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

weixin_34198881發表於2018-11-05
微信小程式

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 啦~~

感謝閱讀~~

相關文章