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:'

  白内障

  需要注意什么？
  '
  (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: '

白内障

需要注意什么？

' }, { name: 'CataResult', id: '8', content: '

白内障

需要注意什么？

'} ]
(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).模板中使用