關於在taro使用wx.parse那些事

• 2019 年 10 月 3 日
• 筆記

　　好久不見，好久沒更新博客，最近工作也比較忙，今天在使用解決富文本的時候遇到兩個bug，由於第一次使用wx.parse經驗不足，走了很多彎路，今天特地把自己修復bug的感想分享一下，希望能幫助更多的小夥伴們，有錯誤的地方，請多多指教?。

　　首先在taro實現富文本的方式有多種，之前也是嘗試過使用richText標籤，但是感覺很不好用，一個原因是，每次要把原有後台返回的數據格式都要組裝成特定的格式，過程很麻煩，還好後端比較友好給轉好，不然就費勁了。關於richText的使用

　　最終使用了一次就放棄了，最後選擇wx.parse,它是微信小程序專門用來解析富文本的，上手很快，只要把需要的包給引進來就行了，這裡不詳細介紹了，可以參考wx.parse,在使用過程中注意以下幾點：

1、在渲染之前一定要引用這兩個文件

import WxParse from '../../../components/wxParse/wxParse'  import '../../../components/wxParse/wxParse.wxss'

今天就是因為沒有引入css文件排查了半天，不引入的現象就是，加粗加顏色的文本會換行顯示，圖片也不會自適應。其中的主要的原因在於思路錯了，一開始一直以為，可以用css強制把它變成一行，後來發現行不通，因為層級太深，節點關係也不統一，接着試了第二中方法就是改變wxParse的代碼，將strong的標籤給轉成text標籤，這個方法太蠢了，最後在github上發現和我一樣問題的朋友，引入wxss解決了問題。

2、在渲染組件之前

 WxParse.wxParse('article', 'html', res.data.msg, this.$scope, 5);

3、在標籤中引入

<import src='../../../components/wxParse/wxParse.wxml' />  //注一定要有  <template is='wxParse' data='{{wxParseData:article.nodes}}'/>  //註：article和上面保持一致

ok，簡單的一條數據就可以渲染成功了，問題來了，我們開發過程中經常會遇到像ugc列表一樣的需求，不僅僅渲染的是一條數據，而是很多條json數據，怎麼實現呢，我上網搜了一下，有很多解決方法，這裡不多說了，主要是我試了沒成功，感興趣的可以試試，順便教教我?，參考文件wxParse多數據循環使用，最終用了一個偷懶的方法解決了，思路就是自己封裝了一個組件，然後遍歷的時候每次調用這個組件，可以說簡單粗暴而且有效，封裝組件的過程就是實現一條數據的過程，可以參考1，2，3步驟。

這就是我今天遇到的兩個關於taro富文本問題bug，最後總結：問題很簡單，主要是一開始思路沒想對，以後遇到問題先不要急於去寫，先仔細分析下問題，方向很重要，晚安?