⼩程序将html转化为wxml（循环列表）git上有详细的基本使⽤⽅法
在开⽂⽬录下引⼊下载好的⽂件wxParse
第⼀种⽅法
这是⼀个蠢⽅法
js中引⼊wxParse.js⽂件
const WxParse = require('../wxParse/wxParse.js');
//这是某⼀段需要循环的数据
var result = res.data.list;  //请求到的数据数组形式
var len = result.length;
代码转换for (let i = 0; i < len; i++) {
WxParse.wxParse('article' + i, 'html', result[i].des, that, 5); //转化html  单⽂件
if (i === len - 1) {
WxParse.wxParseTemArray("replyTemArray", 'article', len, that)
}
}
wxml中引⼊wxParse.wxml
下⾯使⽤的⼀个蠢办法  主要代码如下
<!-- 实际上你要循环的数据是circlelist wxpase有⾃⼰的规范但是为了把列表⾥的⽂本全部渲染进列表这⾥使⽤了⼀个蠢办法 -->
<!-- replyTemArray的长度实际上跟circlelist的长度是⼀样的-->
<!-- 需要转换的⽂字依旧使⽤ <template is="wxParse" data="{{wxParseData:item}}" />就⾏ -->
<!-- 其他的信息你可以根据  circlelist所在的索引引⼊例如 {{circlelist[index].time}} 这样 -->
<import src="../wxParse/wxParse.wxml" />
<block wx:key="{{index}}" wx:for="{{replyTemArray}}">
<view class='circlelist'>
<!-- 头部区域 -->
<view class='top'>
<view class='left'>
<image src='{{logo}}'></image>
</view>
<view class='right'>
<view class='left'>
<p class='username'>{{tittle}}</p>
<p>{{circlelist[index].time}}前</p>
</view>
<view class='sharbtn' catchtap='godetail' data-goodsid='{{circlelist[index].goodsId}}' data-platform='{{circlelist[index].platform}}'>              <view class='center'>
<image src='../../img/buycar.png'></image>
<text>购买</text>
</view>
</view>
</view>
</view>
<view class='concent'>
<!-- 描述 -->
<view class='des'>
<!-- <template is="wxParse" data="{{des}}" /> -->
<template is="wxParse" data="{{wxParseData:item}}" />
</view>
<!-- 图⽚ -->
<view class='img_wrap' catchtap='godetail' data-goodsid='{{circlelist[index].goodsId}}' data-platform='{{circlelist[index].platform}}'>            <view class='img' wx:for="{{circlelist[index].array}}" wx:key="{{index}}">
<image src='{{item}}'></image>
</view>
</view>
</view>
</view>
</block>
第⼆种⽅法
js在第⼀种⽅法的基础上添加了⼀步把后台返回的数据动态的添加到replyTemArray⾥
const WxParse = require('../wxParse/wxParse.js');
//这是某⼀段需要循环的数据
var result = res.data.list;  //请求到的数据数组形式
var len = result.length;
for (let i = 0; i < len; i++) {
WxParse.wxParse('article' + i, 'html', result[i].des, that, 5); //转化html  单⽂件
if (i === len - 1) {
WxParse.wxParseTemArray("replyTemArray", 'article', len, that)
}
}
console.log(plyTemArray);  //存放的是转换后的wxml⽂本
console.log(result);    //后台返回的真实信息
var reallist = plyTemArray;
//通过循环的⽅法往replyTemArray⾥⾯添加添加属性
reallist.map((item, index, arr) => {
arr[index][0].reallist = result[index]; //对应的时使⽤WxParse后的结构
});
that.setData({
replyTemArray: reallist
})
console.log(plyTemArray);
wxml中的更改较⼤  真实的数据现在已经全部在replyTemArray中  只需要在replyTemArray中匹配就⾏
<block wx:key="{{index}}" wx:for="{{replyTemArray}}">
<view class='circlelist'>
<!-- 头部区域 -->
<view class='top'>
<view class='left'>
<image src='{{logo}}'></image>
</view>
<view class='right'>
<view class='left'>
<p class='username'>{{tittle}}</p>
<p>{{item[0].reallist.time}}前</p>
</view>
<block wx:if="{{navindex==0}}">
<view class='sharbtn' catchtap='godetail' data-goodsid='{{item[0].dsId}}' data-platform='{{item[0].reallist.platform}}'>                <view class='center'>
<image src='../../img/buycar.png'></image>
<text>购买</text>
</view>
</view>
</block>
<block wx:if="{{navindex==1}}">
<view class='sharbtn1' catchtap="canvasFn" data-goodsinfo='{{item[0].reallist}}'>
<view class='center'>
<image src='../../img/saveimg1.png'></image>
<text>保存图⽚</text>
</view>
</view>
</block>
</view>
</view>
<view class='concent'>
<!-- 描述 -->
<view class='des'>
<!-- <template is="wxParse" data="{{des}}" /> -->
<template is="wxParse" data="{{wxParseData:item}}" />
</view>
<!-- 图⽚ -->
<view class='img_wrap' catchtap='godetail' data-goodsid='{{item[0].dsId}}' data-platform='{{item[0].reallist.platform}}'>            <view class='img' wx:for="{{item[0].reallist.array}}" wx:key="{{index}}">
<image src='{{item}}'></image>
</view>
</view>
</view>
</view>
</block>
打印的replyTemArray 数据如下  replyTemArray⾥下标为0的⾥⾯已经增加了⼀个reallist属性
总结⼀下吧
第⼀种办法虽然蠢但是⽐较好理解只要细⼼就不太容易犯错，第⼆种办法⽐较简洁主要思想就是合并数据给原始数据增添属性，理解起来较第⼀种稍微难点。两种办法都⾏看个⼈爱好
有些错的地⽅欢迎补充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。