怎么在微信小程序中利用wxParse解析html

怎么在微信小程序中利用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.在页面中引用模板


这样就可以在微信小程序中嵌入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=`
wxParse回复0:不错,喜欢[03][04]

`; varreplyHtml1=`
wxParse回复1:不错,喜欢[03][04]

`; varreplyHtml2=`
wxParse回复2:不错,喜欢[05][07]

`; varreplyHtml3=`
wxParse回复3:不错,喜欢[06][08]

`; varreplyHtml4=`
wxParse回复4:不错,喜欢[09][08]

`; varreplyHtml5=`
wxParse回复5:不错,喜欢[07][08]

`; varreplyArr=[]; replyArr.push(replyHtml0); replyArr.push(replyHtml1); replyArr.push(replyHtml2); replyArr.push(replyHtml3); replyArr.push(replyHtml4); replyArr.push(replyHtml5); for(leti=0;i

模版使用


回复{{index}}:

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注恰卡编程网行业资讯频道,感谢您对恰卡编程网的支持。

发布于 2021-04-08 13:37:33
分享
海报
167
上一篇:怎么在webpack4中对SCSS进行处理 下一篇:怎么在thinkPHP5.0框架中对事务进行处理
目录

    推荐阅读

    忘记密码?

    图形验证码