使用wxParse插件输出HTML内容数据的教程
wxParse是一个微信小程序的HTML解析插件，可以将HTML内容解析成小程序可以识别的数据。使用方法如下：
1. 首先在小程序项目中引入wxParse插件，可以在官方文档中找到下载链接和安装方法。
2. 在需要使用wxParse的页面的js文件中，引入wxParse模块：`import wxParse from 'wxParse'`。
3. 在页面的data中定义一个变量，例如`htmlContent`，用于存储HTML内容。
4. 在页面的wxml文件中，使用`
wxParse使用方法
1. Copy文件夹wxParse
-wxParse/-wxParse.js(必须存在)-html2json.js(必须存在)-htmlparser.js(必须存在)-showdown.js(必须存在)-wxDiscode.js(必须存在)-wxParse.wxml(必须存在)-wxParse.wxss(必须存在)-emojis(可选)
2. 引入必要文件
//在使用的View中引入WxParse模块varWxParse=require('../../wxParse/wxParse.js');//在使用的Wxss中引入WxParse.css,可以在app.wxss@import"/wxParse/wxParse.wxss";3. 数据绑定
vararticle='<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,可选)*/varthat=this;WxParse.wxParse('article','html',article,that,5);4. 模版引用
//这里data中article为bindName<templateis="wxParse"data="{{wxParseData:article.nodes}}"/>高级用法配置小表情emojis/***WxParse.emojisInit(reg,baseSrc,emojis)*1.reg，如格式为[00]=>赋值reg='[]'*2.baseSrc,为存储emojis的图片文件夹*3.emojis,定义表情键值对*/WxParse.emojisInit('[]',"/wxParse/emojis/",{"00":"00.gif","01":"01.gif","02":"02.gif","03":"03.gif","04":"04.gif","05":"05.gif","06":"06.gif","07":"07.gif","08":"08.gif","09":"09.gif","09":"09.gif","10":"10.gif","11":"11.gif","12":"12.gif","13":"13.gif","14":"14.gif","15":"15.gif","16":"16.gif","17":"17.gif","18":"18.gif","19":"19.gif",});多数据循环使用方法
介绍如何使用wxParse在回复等多条HTML共同渲染的方法
/***WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)*1.temArrayName:为你调用时的数组名称*3.bindNameReg为循环的共同体如绑定为reply1，reply2...则bindNameReg='reply'*3.total为reply的个数*懒人建站http://www.51xuediannao.com/*varthat=this;WxParse.wxParseTemArray("replyTemArray",'reply',replyArr.length,that)*/循环绑定数据
varreplyHtml0=`<divstyle="margin-top:10px;height:50px;"><pclass="reply">wxParse回复0:不错，喜欢[03][04]</p></div>`;varreplyHtml1=`<divstyle="margin-top:10px;height:50px;"><pclass="reply">wxParse回复1:不错，喜欢[03][04]</p></div>`;varreplyHtml2=`<divstyle="margin-top:10px;height:50px;"><pclass="reply">wxParse回复2:不错，喜欢[05][07]</p></div>`;varreplyHtml3=`<divstyle="margin-top:10px;height:50px;"><pclass="reply">wxParse回复3:不错，喜欢[06][08]</p></div>`;varreplyHtml4=`<divstyle="margin-top:10px;height:50px;"><pclass="reply">wxParse回复4:不错，喜欢[09][08]</p></div>`;varreplyHtml5=`<divstyle="margin-top:10px;height:50px;"><pclass="reply">wxParse回复5:不错，喜欢[07][08]</p></div>`;varreplyArr=[];replyArr.push(replyHtml0);replyArr.push(replyHtml1);replyArr.push(replyHtml2);replyArr.push(replyHtml3);replyArr.push(replyHtml4);replyArr.push(replyHtml5);for(leti=0;i<replyArr.length;i++){WxParse.wxParse('reply'+i,'html',replyArr[i],that);if(i===replyArr.length-1){WxParse.wxParseTemArray("replyTemArray",'reply',replyArr.length,that)}}模版使用方法
<blockwx:for="{{replyTemArray}}"wx:key="">回复{{index}}:<templateis="wxParse"data="{{wxParseData:item}}"/></block>
