微信小程序——wxParse使用方法

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

wxParse git地址：https://github.com/icindy/wxParse。可以先稍作了解。下面具體講一下我實現的步驟：

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

如下圖：

 

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

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

 

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

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

 

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

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

 

5.將你需要解析的內容進行解析

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

 

6.在 wxml 文件中引用你解析出來的數據

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

 

O 啦~~

感謝閱讀~~