wxParse是一個微信小程序富文本解析組件。現(xiàn)在小程序里面自帶了一個<rich-text>組件也能解析富文本，但是表現(xiàn)不盡人意。所以我還是采用的wxParse來解析富文本的。

wxParse?git地址：https://github.com/icindy/wxParse。可以先稍作了解。下面具體實現(xiàn)的步驟：

1.下載?wxParse，解壓，將?wxParse?放入小程序中。

如下圖：

?

2.在?你需要引用這個插件的 wxml?文件中引用??wxParse.wxml

//路徑根據(jù)你實際情況修改 <import src="../../../wxParse/wxParse.wxml"/>

?

?

3.在?你需要引用這個插件的 wxss 文件中引用??wxParse.wxss

//路徑根據(jù)你實際情況修改 @import "../../../wxParse/wxParse.wxss";

?

4.在?你需要引用這個插件的?js?文件中引用??wxParse.js

//路徑根據(jù)你的實際情況更改 var WxParse = require('../../../wxParse/wxParse.js');

?

5.將你需要解析的內(nèi)容進(jìn)行解析

//** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName綁定的數(shù)據(jù)名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體數(shù)據(jù)(必填) * 4.target為Page對象,一般為this(必填) * 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選) */ let that=this; WxParse.wxParse('引用的時候的名字,如courseDetail', 'html', '你需要解析的數(shù)據(jù),如courseDetailContent', that, 5)

?

?

6.在?wxml?文件中引用你解析出來的數(shù)據(jù)

//這里的courseDetail就是你上面的bindName <view><template is="wxParse" data="{{wxParseData:courseDetail.nodes}}" /> </view>

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序-wxParse插件的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。