最近在边学边做小程序项目,需要解析数据库的文章HTML
数据,一开始使用的是小程序内置的web-view
,却遇到了报错。
在微信小程序的开放文档中查到
这对个人的开发者来说确实挺不友好的,在开放文档中查找web-view
的时候还发现了另一个可以解析的组件rich-text
上手了之后遇到了几点问题。
- 解析
<code></code> <pre></pre>
标签会显示空白 - 图片太大会超出屏幕
- 没有代码高亮
所有只能放弃小程序内置的组件了,在百度了几分钟后,看到目前比较热门的是wxParse插件,功能还是比较多
但好像没有我需要的代码高亮功能,于是又百度了几分钟,
最终找到了完美解决上述问题的插件html2wxml,目前有三种使用方法,我使用的是组件版本
-
首先将
html2wxml-component
整个文件复制到小程序的目录
-
在你要使用的页面的对应的
json
文件,例如我使用的是article页面,就在article.json
中添加组件的声明。注意文件的相对路径
{
"usingComponents": {
"htmltowxml": "../../html2wxml-component/html2wxml"
}
}
- 之后在你要使用到的
wxml
文件中加入
<htmltowxml text="{{data}}" ></htmltowxml>
其中{{data}}
为你要渲染的HTML
数据。
在html2wxml的GitHub官网中有详细的介绍。
// 将Page中的content数据作为HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 禁用代码高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 禁用代码行号显示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 代码高亮样式改为tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 设置代码高亮检测语言 (最多6个,自行搭建服务不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 对HTML数据中的img标签的相对路径补全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 禁用加载中动画
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 将Page中的text数据作为Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 直接渲染Page中的已经过解析的obj数据
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
使用的效果截图