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

//路徑根據你實際情況修改  ,也可以在app.wxss中全局引入 
@import "../../../wxParse/wxParse.wxss";

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

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

並對後臺傳過來的數據內容進行解析

//**
* 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)


//示例:
  goodsGet(id) {
    app.api.goodsGet(id)
      .then(res => {
        let goodsSpu = res.data
        this.setData({
          goodsSpu: goodsSpu
        })
        //html轉wxml
        WxParse.wxParse('description', 'html', goodsSpu.description, this, 0)
      })
  },

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

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章