微信小程序使用wxParse解析超文本标记语言的实现示例

最近项目上遇到在微信小程序里需要显示新闻内容，新闻内容是通过接口读取的服务器中的富文本内容，是超文本标记语言格式的，小程序默认是不支持超文本标记语言格式的内容显示的，那我们需要显示超文本标记语言内容的时候，就可以通过wxParse来实现。

首先我们在开源代码库上下载wxParse

https://github.com/icindy/wxParse

下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下

下面是具体的使用步骤

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

@ import '/page/wxParse/wxParse。wxss '；2.在需要加载超文本标记语言内容的页面对应的射流研究…文件里引入wxParse

var WxParse=require('././wx解析/wx解析。js’)；3.通过调用WxParse.wxParse方法来设置超文本标记语言内容

/*** WxParse.wxParse(绑定名称、类型、数据、目标、图像填充)* 1 .绑定名称绑定的数据名（必填)* 2 .类型可以为超文本标记语言或者md(必填)* 3 .数据为传入的具体数据（必填)4 .目标为页对象，一般为这个（必填)* 5 .图像填充为当图片自适应是左右的单一填充（默认为0,可选)*/Page({ data : } }，onLoad:函数(){ var即=thiswx.request({ url: ' '，method: 'POST '，data: { 'id':13 }，header : { ' content-type ' : ' application/JSON ' })，success 3360 function(RES){ var article=RES . data[0].岗位；WxParse.wxParse('article '，' html '，article，that，5)；} }) }})4.在页面中引用模板

导入src='http:/./wx解析/wx解析。wxml “/模板为=' wx parse '数据=' { { wx parsedata : article。节点} } '/这样就可以在微信小程序中嵌入超文本标记语言内容了

wxParse多数据循环使用方法

方法介绍

/* * * wx parse。wxparsteemarray(temArrayName，bindNameReg，total，that)* 1.temArrayName:为你调用时的数组名称* 3.bindNameReg为循环的共同体如绑定为回复1,回复2.则bindNameReg='reply'* 3.total为回答的个数that=thiswxparssetmarray(' replyTemArray '，' reply '，replyArr.length，that)使用方式

循环绑定数据

var replyHtml0=` div style=' margin-top :10 px；'height :50 px ' p class=' reply ' Wx parse回复0:不错，喜欢[03][04]p/div `;var replyhtml 1=` div style=' margin-top :10 px；'height :50 px ' p class=' reply ' Wx parse回复1:不错，喜欢[03][04]p/div `;var replyhtm L2=` div style=' margin-top :10 px；'height :50 px ' p class=' reply ' Wx parse回复2:不错，喜欢[05][07]p/div `;var replyHtml3=` div style=' margin-top :10 px；'height :50 px ' p class=' reply ' Wx parse回复3:不错，喜欢[06][08]p/div `;var replyHtml4=` div style=' margin-top :10 px；height :50 px ' p class=' reply ' Wx parse回复4:不错，喜欢[09][08]p/div `;var replyHtml5=` div style=' margin-top :10 px；height :50 px ' p class=' reply ' Wx parse回复5:不错，喜欢[07][08]p/div `;var repl yar=[]；回答哈。push(replyHtml0)；replyHtml1replyharr。push(replyhtm L2)；回答哈。推送(replyHtml3)；回答哈。推送(replyHtml4)；回答哈。push(replyHtml5)；用于(设I=0；我回答长度；i ) { WxParse.wxParse('回复' I，' html '，回复yarr[I]，即);if(I===replyArr . length-1){ wxparssetemarray(' replyTemArray '，' reply '，replyarr。长度，那个)} }模版使用

对于=“{ { replyTemArray } }”wx :键=“”，阻止wx :回复{ { index } } :模板为=' wxparsend ' data=' { { wxparsendata : item } } '//block以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。