微信小程序小结(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>