wxParse-微信小程序富文本解析组件: https://github.com/icindy/wxParse
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="{{wxParseData:article1.nodes}}" /> -->
<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(that.data.replyTemArray); //存放的是转换后的wxml文本
console.log(result); //后台返回的真实信息
var reallist = that.data.replyTemArray;
//通过循环的方法往replyTemArray里面添加添加属性
reallist.map((item, index, arr) => {
arr[index][0].reallist = result[index]; //对应的时使用WxParse后的结构
});
that.setData({
replyTemArray: reallist
})
console.log(that.data.replyTemArray);
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].reallist.goodsId}}' 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="{{wxParseData:article1.nodes}}" /> -->
<template is="wxParse" data="{{wxParseData:item}}" />
</view>
<!-- 图片 -->
<view class='img_wrap' catchtap='godetail' data-goodsid='{{item[0].reallist.goodsId}}' 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属性
总结一下吧
第一种办法虽然蠢但是比较好理解只要细心就不太容易犯错,第二种办法比较简洁主要思想就是合并数据给原始数据增添属性,理解起来较第一种稍微难点。两种办法都行看个人爱好