怎么在微信小程序中利用wxParse解析html？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

首先下載wxParse

下載完之后我們需要用到目錄下的wxParse文件夾，把他拷貝到我們的項目目錄下　　

下面是具體的使用步驟

1.在app.wxss全局樣式文件中，需要引入wxParse的樣式表

@import"/page/wxParse/wxParse.wxss";

2.在需要加載html內容的頁面對應的js文件里引入wxParse

varWxParse=require('../../wxParse/wxParse.js');

3.通過調用WxParse.wxParse方法來設置html內容

/**
*WxParse.wxParse(bindName,type,data,target,imagePadding)
*1.bindName綁定的數據名(必填)
*2.type可以為html或者md(必填)
*3.data為傳入的具體數據(必填)
*4.target為Page對象,一般為this(必填)
*5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
*/

Page({
data:{
},
onLoad:function(){
varthat=this;
wx.request({
url:'',
method:'POST',
data:{
'id':13
},
header:{
'content-type':'application/json'
},
success:function(res){
vararticle=res.data[0].post;
WxParse.wxParse('article','html',article,that,5);
}
})
}
})

4.在頁面中引用模板

<importsrc="../../wxParse/wxParse.wxml"/>
<templateis="wxParse"data="{{wxParseData:article.nodes}}"/>

這樣就可以在微信小程序中嵌入html內容了

wxParse多數據循環使用方法

方法介紹

/**
*WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
*1.temArrayName:為你調用時的數組名稱
*3.bindNameReg為循環的共同體如綁定為reply1，reply2...則bindNameReg='reply'
*3.total為reply的個數
*/
varthat=this;
WxParse.wxParseTemArray("replyTemArray",'reply',replyArr.length,that)

使用方式

循環綁定數據

varreplyHtml0=`<div><pclass="reply">wxParse回復0:不錯，喜歡[03][04]</p></div>`;
varreplyHtml1=`<div><pclass="reply">wxParse回復1:不錯，喜歡[03][04]</p></div>`;
varreplyHtml2=`<div><pclass="reply">wxParse回復2:不錯，喜歡[05][07]</p></div>`;
varreplyHtml3=`<div><pclass="reply">wxParse回復3:不錯，喜歡[06][08]</p></div>`;
varreplyHtml4=`<div><pclass="reply">wxParse回復4:不錯，喜歡[09][08]</p></div>`;
varreplyHtml5=`<div><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>

總結

以上是生活随笔為你收集整理的怎么在微信小程序中利用wxParse解析html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。