微信小程序小结(3) -- 使用wxParse解析html及多数据循环

wxParse-微信小程序富文本解析组件：https://github.com/icindy/wxParse

支持Html及markdown转wxml可视化

使用

1、copy下载好的文件夹wxParse

- wxParse/-wxParse.js(必须存在)-html2json.js(必须存在)-htmlparser.js(必须存在)-showdown.js(必须存在)-wxDiscode.js(必须存在)-wxParse.wxml(必须存在)-wxParse.wxss(必须存在)-emojis(可选)

2、分别在相应的文件中引入：

let WxParse = require("../../utils/wxParse/wxParse.js");@import "../../utils/wxParse/wxParse.wxss"; <import src="../../utils/wxParse/wxParse.wxml"/>

3、使用方法

• 数据绑定

var article ="<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,可选)
*/var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

• 模版引用

// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

wxParse多数据循环使用方法

多条HTML共同渲染的方法

/**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName: 为你调用时的数组名称
* 3.bindNameReg为循环的共同体 如绑定为reply1，reply2...则bindNameReg = 'reply'
* 3.total为reply的个数
*/
var that = this;
WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)

循环绑定数据

var replyHtml0 =  "<div style="margin-top:10px;height:50px;"><p class="reply">wxParse回复0:不错，喜欢[03][04]</p>    </div>";
var replyHtml1 = "<div style="margin-top:10px;height:50px;"><p class="reply">wxParse回复1:不错，喜欢[03][04]</p>    </div>";
var replyHtml2 = "<div style="margin-top:10px;height:50px;"><p class="reply">wxParse回复2:不错，喜欢[05][07]</p>    </div>";
var replyHtml3 = "<div style="margin-top:10px;height:50px;"><p class="reply">wxParse回复3:不错，喜欢[06][08]</p>    </div>";
var replyHtml4 = "<div style="margin-top:10px; height:50px;"><p class="reply">wxParse回复4:不错，喜欢[09][08]</p>    </div>";
var replyHtml5 = "<div style="margin-top:10px;height:50px;"><p class="reply">wxParse回复5:不错，喜欢[07][08]</p>    </div>";
var arr = [];
arr.push(replyHtml0);
arr.push(replyHtml1);
arr.push(replyHtml2);
arr.push(replyHtml3);
arr.push(replyHtml4);
arr.push(replyHtml5);for (let i = 0; i < arr.length; i++) {WxParse.wxParse('reply' + i, 'html', arr[i], that);if (i === arr.length - 1) {WxParse.wxParseTemArray("replyTemArray",'reply', arr.length, that)}
}

模版使用

<block wx:for="{{replyTemArray}}" wx:key="">列表：{{index}}:<template is="wxParse" data="{{wxParseData:item}}"/>        //无需其他直接wxParseData:item（即使时item.htm）
</block>

注意列表的渲染只是单纯的渲染，无法动态的数据同时渲染。

解决方案：

//第一次列表赋值
this.setData({list:listRes
})let that=this;
for (let i = 0; i < listRes.length; i++) {WxParse.wxParse('topic' + i, 'html', listRes[i].topic, that);if (i === listRes.length - 1) {WxParse.wxParseTemArray("list",'topic', listRes.length, that)}
}
//根据上述操作，list的原有数据会被清楚，因此下面重新赋值相关的数据即可let list=this.data.list;
list.map((item,index,arr)=>{arr[index][0].name='abc';           //对应的时使用WxParse后的结构arr[index][0].no=index;});
//重新赋值
this.setData({list:list
})//使用
<view wx:key="{{item.no}}" wx:for="{{list}}"><text >第{{item[0].no}}题</text><text >姓名：{{item[0].name}}</text><template is="wxParse" data="{{wxParseData:item}}"/>
</view>