wxParse-微信小程序解析富文本组件的使用总结

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中使用:
  
  

`` 在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。article是js文件里面的一个变量是可以变的，只需保证js文件和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>
  

``
以上是本人在实际工作中的一些小小的总结，不足之处还请大家多多指教。