用微信怎么做企业网站,微信公众号推文模板素材,闵行网页设计公司,课程网站课程资源建设wxParse-微信小程序富文本解析组件#xff1a;https://github.com/icindy/wxParse 支持Html及markdown转wxml可视化 使用 1、copy下载好的文件夹wxParse - wxParse/-wxParse.js(必须存在)-html2json.js(必须存在)-htmlparser.js(必须存在)-showdown.js(必须存在)-wxDiscode.js…wxParse-微信小程序富文本解析组件https://github.com/icindy/wxParse 支持Html及markdown转wxml可视化 使用 1、copy下载好的文件夹wxParse - wxParse/-wxParse.js(必须存在)-html2json.js(必须存在)-htmlparser.js(必须存在)-showdown.js(必须存在)-wxDiscode.js(必须存在)-wxParse.wxml(必须存在)-wxParse.wxss(必须存在)-emojis(可选) 2、分别在相应的文件中引入 let WxParse require(../../utils/wxParse/wxParse.js);import ../../utils/wxParse/wxParse.wxss; import src../../utils/wxParse/wxParse.wxml/ 3、使用方法 数据绑定var article div我是HTML代码/div;/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/var that this;
WxParse.wxParse(article, html, article, that, 5);模版引用// 引入模板
import src你的路径/wxParse/wxParse.wxml/
//这里data中article为bindName
template iswxParse data{{wxParseData:article.nodes}}/ wxParse多数据循环使用方法 多条HTML共同渲染的方法 /**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName: 为你调用时的数组名称
* 3.bindNameReg为循环的共同体 如绑定为reply1reply2...则bindNameReg reply
* 3.total为reply的个数
*/
var that this;
WxParse.wxParseTemArray(replyTemArray,reply, replyArr.length, that)循环绑定数据 var replyHtml0 div stylemargin-top:10px;height:50px;p classreplywxParse回复0:不错喜欢[03][04]/p /div;
var replyHtml1 div stylemargin-top:10px;height:50px;p classreplywxParse回复1:不错喜欢[03][04]/p /div;
var replyHtml2 div stylemargin-top:10px;height:50px;p classreplywxParse回复2:不错喜欢[05][07]/p /div;
var replyHtml3 div stylemargin-top:10px;height:50px;p classreplywxParse回复3:不错喜欢[06][08]/p /div;
var replyHtml4 div stylemargin-top:10px; height:50px;p classreplywxParse回复4:不错喜欢[09][08]/p /div;
var replyHtml5 div stylemargin-top:10px;height:50px;p classreplywxParse回复5:不错喜欢[07][08]/p /div;
var arr [];
arr.push(replyHtml0);
arr.push(replyHtml1);
arr.push(replyHtml2);
arr.push(replyHtml3);
arr.push(replyHtml4);
arr.push(replyHtml5);for (let i 0; i arr.length; i) {WxParse.wxParse(reply i, html, arr[i], that);if (i arr.length - 1) {WxParse.wxParseTemArray(replyTemArray,reply, arr.length, that)}
} 模版使用 block wx:for{{replyTemArray}} wx:key列表{{index}}:template iswxParse data{{wxParseData:item}}/ //无需其他直接wxParseData:item即使时item.htm
/block 注意列表的渲染只是单纯的渲染无法动态的数据同时渲染。 解决方案 //第一次列表赋值
this.setData({list:listRes
})let thatthis;
for (let i 0; i listRes.length; i) {WxParse.wxParse(topic i, html, listRes[i].topic, that);if (i listRes.length - 1) {WxParse.wxParseTemArray(list,topic, listRes.length, that)}
}
//根据上述操作list的原有数据会被清楚因此下面重新赋值相关的数据即可let listthis.data.list;
list.map((item,index,arr){arr[index][0].nameabc; //对应的时使用WxParse后的结构arr[index][0].noindex;});
//重新赋值
this.setData({list:list
})//使用
view wx:key{{item.no}} wx:for{{list}}text 第{{item[0].no}}题/texttext 姓名{{item[0].name}}/texttemplate iswxParse data{{wxParseData:item}}/
/view 转载于:https://www.cnblogs.com/adoctors/p/9100870.html
