微信小程序解析富文本(支持代码高亮)

最近在边学边做小程序项目，需要解析数据库的文章HTML数据，一开始使用的是小程序内置的web-view，却遇到了报错。

在微信小程序的开放文档中查到

这对个人的开发者来说确实挺不友好的，在开放文档中查找web-view的时候还发现了另一个可以解析的组件rich-text

上手了之后遇到了几点问题。

1. 解析<code></code> <pre></pre>标签会显示空白
2. 图片太大会超出屏幕
3. 没有代码高亮

所有只能放弃小程序内置的组件了，在百度了几分钟后，看到目前比较热门的是wxParse插件，功能还是比较多

但好像没有我需要的代码高亮功能，于是又百度了几分钟，

最终找到了完美解决上述问题的插件html2wxml，目前有三种使用方法，我使用的是组件版本

1. 首先将html2wxml-component整个文件复制到小程序的目录
   

2. 在你要使用的页面的对应的 json文件，例如我使用的是article页面，就在article.json中添加组件的声明。注意文件的相对路径

{
  "usingComponents": {
    "htmltowxml": "../../html2wxml-component/html2wxml"
  }
}

3. 之后在你要使用到的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>

使用的效果截图

目前该小程序已经发布，大伙可以扫码体验一下(目前处于测试阶段)