wxParse是一款非常好用的解析微信小程序中富文本的组件,支持大部分的html标签:
#####基本使用方法:
(1)Copy文件夹wxParse ,放在小程序根目录下。
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)
(2)引入文件:
//在使用的view的js中引入WxParse模块
var WxParse = require(’…/…/wxParse/wxParse.js’);
//在使用的Wxss中引入WxParse.css,也可以在app.wxss中引入
@import “/wxParse/wxParse.wxss”;
// 在使用的view的.wxml中引入模板
#####1.单数据渲染:
(1)在data中声明article变量:
article:'<div class="content"><h3 class="main-title">白内障</h3><h4 class="sub-title">需要注意什么?</h4><div class="desc><p>1.减少辐射,防紫外线,特别是要避开强光紫外线。如看电视的距离尽量远一点,不要长时间看手机,夏季外出时打遮阳伞、带防紫外线的太阳眼镜等; </p><p>2.平时多喝水,避免机体缺水。老年人体内缺水是导致晶体变浑浊的原因之一,因此平常要养成多喝水的习惯;[M3] </p><img class="img" src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /></div></div>'
(2)在onload声明周期中使用:
``
WxParse.wxParse(‘article’, ‘html’, this.data.article, this, 5);
/**
- WxParse.wxParse(bindName , type, data, target,imagePadding)
- 1.bindName绑定的数据名(必填)
- 2.type可以为html或者md(必填):
- 但在实际应用中,发现此插件比较倾向于处理 html 的解析,对于 markdown语法只是简单的兼容。
- 3.data为传入的具体数据(必填)
- 4.target为Page对象,一般为this(必填)
- 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
(3)在.wxml中使用:
#####2.数组循环渲染
(1).数据格式:
list: [ { name: 'CataResult', id: '7', content: '<div class="content"><h3 class="main-title">白内障</h3><h4 class="sub-title">需要注意什么?</h4><div class="desc><p>1.减少辐射,防紫外线,特别是要避开强光紫外线。如看电视的距离尽量远一点,不要长时间看手机,夏季外出时打遮阳伞、带防紫外线的太阳眼镜等; </p><p>2.平时多喝水,避免机体缺水。老年人体内缺水是导致晶体变浑浊的原因之一,因此平常要养成多喝水的习惯;[M3] </p><img class="img" src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /></div></div>' }, { name: 'CataResult', id: '8', content: '<div class="content"><h3 class="main-title">白内障</h3><h4 class="sub-title">需要注意什么?</h4><div class="desc><p>1.减少辐射,防紫外线,特别是要避开强光紫外线。如看电视的距离尽量远一点,不要长时间看手机,夏季外出时打遮阳伞、带防紫外线的太阳眼镜等; </p><p>2.平时多喝水,避免机体缺水。老年人体内缺水是导致晶体变浑浊的原因之一,因此平常要养成多喝水的习惯;[M3] </p><img class="img" src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /></div></div>'} ]
(2).循环绑定数据:
``
for (let i = 0; i < that.data.list.length; i++) {
WxParse.wxParse(‘item’ + i, ‘html’, that.data.list[i].content, that);
if (i === that.data.list.length - 1) {
WxParse.wxParseTemArray(“list”, ‘item’, that.data.list.length, that)
}
}
/**
-
WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
-
1.temArrayName: 为你调用时的数组名称
-
3.bindNameReg为循环的共同体 如绑定为reply1,reply2…则bindNameReg = ‘reply’
-
3.total为reply的个数
*/
(3).模板中使用
<!-- 富文本渲染你内容 --> <block wx:for="{{list}}" wx:key=""> <template is="wxParse" data="{{wxParseData:item}}" /> </block>
``
以上是本人在实际工作中的一些小小的总结,不足之处还请大家多多指教。