用途: 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>