富文本格式（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這款組件，同樣推薦大家使用~~
如果還有其他更好的第三方富文本解析組件，歡迎分享！！！