富文本格式（Rich Text Format, 一般简称为RTF）是我们开发常见的跨平台文本格式
从前端角度我们可以把它理解为 “自带标签和样式的文档，可包含文案，图片，链接，视频等”
而通常富文本数据是由富文本编辑器编辑出的，我们常见的富文本编辑器有
TinyMce、CKEditor、UEditor、Froala等
它们均能够编辑出自带标签和样式的富文本数据
既然这些数据是自带标签和样式的，那么前端在展示这部分数据时，就需要考虑html片段的嵌入以及样式的冲突
因此，富文本渲染组件就派上用场了
我们今天来聊聊微信小程序上的富文本数据渲染
小程序上进行富文本数据渲染，这部分聪明的小程序开发人员早已经考虑到，并且写好了原生组件
这是官方原生组件API链接： https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
rich-text的开始支持版本是在1.4.0之后，也就是说小程序版本在1.4.0之前是不具备rich-text原生组件的 (当然，现在开发都是新版本了)
使用方法也极其简单，只需要引用组件标签即可
<rich-text nodes="{{data}}"></rich-text>
nodes属性装载的其实就是富文本数据，支持array以及string格式
这么一看，引用起来确实很方便，但是仍然需要注意几点
1.富文本中的视频不能渲染
原生rich-text是不支持video等视频标签的，这个问题有挺多开发人员反馈的，但是目前依然是未支持的状态
2.nodes 不推荐使用 String 类型
nodes装载的数据可以支持array以及string两种，但是string类型渲染会导致性能下降。所以我们尽量使用array类型
3.如果使用了不受信任的html节点，该节点会被删除
这里如何理解“不受信任”呢？ 其实可以理解为不被支持，也就是说rich-text虽然支持自带html标签的数据，但是并不是所有标签都支持
具体支持的标签可以参考官方文档
4.img标签仅支持网络图片
富文本数据中的img标签，src的链接必须是网络链接。也就是说 './'、'../' 等类似引用方式是不支持的
因此我们需要对富文本数据中img的路径进行转化，转化为线上路径
例如使用replace进行匹配替换
注意以上几个小点，rich-text还是非常方便快捷的。接下来介绍另一款小程序可以使用的第三方富文本组件
wxParser组件
wxParser是第三方富文本渲染组件，对比rich-text原生组件，wxParser具备更完整的功能，兼容更多富文本格式
并且支持了rich-text所不支持的video标签等
如何使用wxParser呢？
可以进入小程序后台管理——设置——第三方服务——插件管理中查找wxParser，申请添加使用
使用方法也不难
1.引入plugins
"plugins": { "wxparserPlugin": { "version": "0.2.1", "provider": "wx9d4d4ffa781ff3ac" } }
2.添加到json配置文件中
"usingComponents": { "wxparser": "plugin://wxparserPlugin/wxparser" }
3.在wxml中使用
<wxparser rich-text="{{data}}" />
轻巧的Parser组件
作为一个30多kb大小的富文本渲染组件，parser同样也能完成丰富的富文本渲染。
该插件对rich-text进行了二次封装，同时还解决了wxParser中的一些缺陷(无法解析表格，一些组件显示格式不正确等)
附上码云地址： https://gitee.com/zhaowx_admin/Parser
作者不仅留下了好的插件，同时也留下了好的文档，开源免费可分享，本文档动态更新，建议加星收藏
具体用法：
1.利用npm或者yarn下载Parser插件
npm install parser-wxapp
2. 引入parser组件
3.在wxml中使用
<parser class="article" html="{{ data }}" />
博主也是喜欢用Parser这款组件，同样推荐大家使用~~
如果还有其他更好的第三方富文本解析组件，欢迎分享！！！