E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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>“以上是本人在实际工作中的一些小小的总结,不足之处还请大家多多指教。小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » wxParse微信小程序解析富文本组件的使用总结
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏