18910140161

微信小程序输出html内容数据插件wxParse

顺晟科技

2021-06-16 10:50:38

361

微信小程序输出超文本标记语言内容数据插件wxParse,可以把带超文本标记语言标签的数据输出为微信小程序正常显示的格式,测试可用,不过外观样式,可能需要根据你的需求再调整一下,wxParse插件带有演示,也有使用文档说明。

下载地址:https://github.com/icindy/wxParse

wxParse文档基本使用方法

1.复制文件夹wxParse

- wxParse/

-wxParse.js(必须存在)

-html2json.js(必须存在)

-htmlparser.js(必须存在)

-摊牌。js(必须存在)

-wxdocde。js(必须存在)

-wxParse.wxml(必须存在)

-wxParse.wxss(必须存在)

-表情符号(可选)

2.引入必要文件

//在使用的视角中引入WxParse模块

var WxParse=require('././wx parse/wx parse。js’);

//在使用的页面样式表中引入WxParse.css,可以在app.wxss

@ import '/wxParse/wxParse。wxss ';

3.数据绑定

var article='div我是超文本标记语言代码/div ';

/**

* WxParse.wxParse(绑定名称、类型、数据、目标、图像填充)

* 1.bindName绑定的数据名(必填)

* 2 .类型可以为超文本标记语言或者md(必填)

* 3 .数据为传入的具体数据(必填)

* 4 .目标为页对象,一般为这个(必填)

* 5 .图像填充为当图片自适应是左右的单一填充(默认为0,可选)

*/

那=这个

WxParse.wxParse('article ',' html ',article,that,5);

4.模版引用

//这里数据中文章为bindName

模板为=' wxParse '数据=' { { wxparsedata :文章。节点} } '/

用法

配置小表情表情符号

/**

* WxParse.emojisInit(reg,baseSrc,emojis)

* 1.reg,如格式为[00]=赋值reg='[]'

* 2.baseSrc,为存储表情符号的图片文件夹

* 3 .表情符号,定义表情键值对

*/

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多数据循环使用方法

介绍如何使用wxParse在回复等多条超文本标记语言共同渲染的方法

方法介绍

/**

* wxparse。wxparsetemarray(temArrayName,bindNameReg,total,that)

* 1.temArrayName:为你调用时的数组名称

* 3.bindNameReg为循环的共同体如绑定为回复1,回复2.则bindNameReg='reply '

* 3 .合计为回答的个数

* 懒人建站http://www.51xuediannao.com/

* var=this天气预报。wxparsetemarray(' replyTemArray ',' reply ',replyArr.length,那个)

*/

使用方式

循环绑定数据

var replyHtml0=` div style=' margin-top :10 px;'高度:50像素

p class='reply '

wxParse回复0:不错,喜欢[03][04]

/p

/div `;

var ReplyhTMl 1=` div style=' margin-top :10 px;'高度:50像素

p class='reply '

wxParse回复1:不错,喜欢[03][04]

/p

/div `;

var ReplyhTMl 2=` div style=' margin-top :10 px;'高度:50像素

p class='reply '

wxParse回复2:不错,喜欢[05][07]

/p

/div `;

var ReplyhTMl 3=` div style=' margin-top :10 px;'高度:50像素

p class='reply '

wxParse回复3:不错,喜欢[06][08]

/p

/div `;

var ReplyhTMl 4=` div style=' margin-top :10 px;'高度:50像素

p class='reply '

wxParse回复4:不错,喜欢[09][08]

/p

/div `;

var replyHtml5=` div style=' margin-top :10 px;'高度:50像素

p class='reply '

wxParse回复5:不错,喜欢[07][08]

/p

/div `;

var repl yar=[];

复制器。push(replyHtml0);

复制器。push(reply html 1);

复制器。push(reply ht ml 2);

复制器。push(replyHtml3);

复制器。push(replyHtml4);

复制器。push(replyHtml5);

对于(设I=0;i replyArr.lengthi ) {

WxParse.wxParse('reply' i,' html ',reply yarr[I],那个);

if (i===replyArr.length - 1) {

天气预报。wxparsetemarray(' replyTemArray ',' reply ',replyArr.length,那个)

}

}

模版使用

块wx :为=' { { ReplyTerray } } ' wx :键=' '

回复{{index}}:template为=' wxParse '数据=' { { Wx PASs data : ITeM } } '/

/block

下载地址:https://github.com/icindy/wxParse

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航