微信小程式中簡單使用wxParse插件解析富文本

微信的小程式中也會出現一些帶标簽的資料不能直接在頁面上渲染出該有的屬性值。vue中實作解析富文本比較簡單，直接使用v-html即可，而在小程式中有兩種解析方法，分别是

rich-text

和

wxParse

,今天就主要講講用wxParse實作解析富文本的步驟。。。。

1.首先去github上下載下傳我們需要的wxParse插件

網址：https://github.com/icindy/wxParse

2.在要使用的頁面的js中引入WxParse子產品

var WxParse = require('../../wxParse/wxParse.js'); 
//這個路徑是你項目中的路徑，别弄錯咯
           

3.在需要是用的wxss中引入WxParse.wxss，也可以在app.wxss中引入，

引用在app.wxss中是全局的。

4.将富文本綁定給wxParse

格式為：

格式：WxParse.wxParse(參數1, 參數2, 參數3, 參數4, 參數5);
參數說明：
* 參數1.bindName綁定的資料名(必填)
* 參數2.type可以為html或者md(必填)
* 參數3.data為傳入的具體資料(必填)
* 參數4.target為Page對象,一般為this(必填)
* 參數5.imagePadding為當圖檔自适應是左右的單一padding(預設為0,可選)
*/
           

我就自己簡單寫了個帶标簽的富文本，然後自己解析解析，

在使用頁面的js檔案中操作。。。

onReady(){
  var article ="<div>我喜歡鄧紫棋，超級喜歡</div>"  
  var that = this; 
  WxParse.wxParse('article', 'html', article,that, 5);
 }
           

5.最後一步，就先引入引入模闆再在頁面上渲染就ok咯

<import src="../../wxParse/wxParse.wxml" />

<view>
 <template is="wxParse" data="{{wxParseData:article.nodes}}" />
 //這裡data中article為bindName綁定的資料
</view>
           

我的效果是這樣的：

就是簡單的渲染了一個資料，希望可以幫助你理清思路，解決的步驟，

要想了解更加細緻的步驟，可查閱：https://github.com/icindy/wxParse

最後現在是不是發現沒有那麼難搞了呢？嘿嘿，加油哦！！！