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