小程序富文本方案怎么选？

本文根据 最近¹市面上的小程序富文本渲染方案，整理对比

插件介绍

1. MiniSDK-richtext（微信原生富文本标签）²

	支持特性	可用程度
1	HTML 标签白名单内所有标签	✔️
2	class / attr 属性	✔️
3	行内样式	✔️

引用注意事项：

1. nodes 不推荐使用 String 类型，性能会有所下降。
2. rich-text 组件内屏蔽所有节点的事件。
3. attrs 属性不支持 id ，支持 class 。
4. name 属性大小写不敏感。
5. 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. <img /> 标签仅支持网络图片。
7. 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

不支持：

1. 视频标签<video> 展示
2. id 标签属性读取
3. 对不受信任 HTML 节点兼容性有限
4. 性能问题

2. wxparse.js³

	支持特性	可用程度	备注
1	HTML的大部分标签解析	✔️
2	内联 style	✔️
3	标签 Class	✔️
4	图片自适应规则	✔️
5	图片多图预览	✔️
6	模板层级可拓展性	✔️
7	多数据循环方式	✔️
8	自定义 emoji		实验中
9	<a> 标签跳转		实验中
10	动态添加节点		实验中

引用注意事项：

1. 注：开源的小程序富文本插件。2020年1月停止维护。
2. 源码htmlparser.js 中有匹配video标签。但是小程序video由独立的小程序组件渲染。使用富文本建议图文和视频分开展示。
3. 多端同构过程中会因为源码中的部分api导致兼容报错 .eg console.dir()在qq小程序真机环境会静默报错
4. 渲染出的页面不支持选中

不支持

1. 视频标签<video> 展示
2. 对不受信任 HTML 节点兼容性有限

3. html2wxml⁴

html2wxml 是参考wxparse.js 开发的小程序富文本编译库，与wxparse.js 不同的是支持官方插件引入。和自定义服务器引入插件。引入方式可以在微信小程序管理后台的设置中引用。

接入后在app.json plugins 字段中增加配置。

{
    //...引用注意事项：与wxparse.js 一致。
  "plugins": {    
  "pluginName": {     
  "version": "1.3.17",      
  "provider": "wxa75efa648b60994b"    }  
  }
}

4. UlinkMini SDK

腾讯 UlinkMiniSDK (Ulink 团队小程序sdk集成方案<不开源>) 内部集成了html2wxml 插件（开发过程参考html2wxmal.js ，重写了编译规则）由于使用Ulink需要在Ulink平台认证后开放SDK权限。本文提到Ulink仅做文档参照。

案例微信小程序

案例QQ小程序

接入方式

• developer.umeng.com/docs/191212…
• ulink.qq.com/

Taro.html.parse⁵

原理：通过Taro compiler 讲vue3语法编译的同时，提供全局Taro.html 解析富文本的插件。

Taro 可以直接通过 Element#innerHTML 或 Vue 的 v-html 或 React/Nerv 的 dangerouslySetInnerHTML 直接渲染 HTML:

API	微信小程序	QQ小程序	支付宝小程序	字节跳动小程序	H5	React Native
RichText	✔️	✔️	✔️	✔️	✔️	✔️

对比汇总

插件名称	MiniSDK-rich-text	WxParser.js	html2wxml	UlinkMini SDK	Taro.html.parse
拓展性：	差：无法拓展	内部引用可对源码做局部修改	内部引用可对源码做局部修改	较差（内部封装）	优秀
引用方式	原生调用	1.小程序第三方插件引入2.打包在小程序内部引入	1.小程序第三方插件引入2.打包在小程序内部引入	1.小程序第三方插件引入	Taro框架编译
支持范围（标签语法）	小程序标签白名单标签	1.html	1.html	1.html2.wxml	1.html2.wxml3.vue.templete 标签
接入成本	无	1.第三方平台授权添加2.小程序内直接占用156kb	1.第三方平台授权添加2.配置第三方服务器添加3.内部直接引用占用180kb	需要经过平台认证后由第三方平台授权添加	api内部集成，接入框架后无其他引入成本
富文本展示效果	1.支持图文、超链接（主体白名单链接）	1.支持图文	1.支持图文、超链接	1.支持图文、超链接2.支持文本复制	-

最后

我自己的项目最后从 WxParser.js 升级到了 Taro.html.parse，如果我的文章对你有帮助欢迎点赞+收藏支持

Footnotes

1. 2021-4-8写于内网 wiki ↩

2. 微信小程序文档-rich-text ↩

3. wxparse.js ↩

4. html2wxml ↩

5. 【Taro 相关文档】 ↩