小程序富文本WxParse插件

参考https://blog.csdn.net/loveyoulouyou/article/details/83413628

下载WxParse插件，插件地址https://github.com/icindy/wxParse

css部分：

@import "../../utils/wxParse/wxParse.wxss";

html部分：

<import src="../../utils/wxParse/wxParse.wxml"/>

<block wx:for='{ {richText}}' wx:for-index='itemIndex' wx:for-item='item' wx:key=''>

<view class="listItem">

<image src="{ {item.img}}"></image>

<view>{ {item.title}}</view>

<view>

扫描二维码关注公众号，回复： 12058573 查看本文章

<template is="wxParse" data="{ {wxParseData:artileList[itemIndex]}}"/>

</view>

</view>

</block>

js部分：

var WxParse = require("../../utils/wxParse/wxParse.js");

Page({

/**

* 页面的初始数据

*/

data: {

richText:[

{

'img': 'https://csdnimg.cn/cdn/content-toolbar/csdn-xie.png',

'title':'第一个title',

'des':'<p>第一个描述<span>哈哈哈哈哈撒多或</span></p>'

},

{

'img': 'https://csdnimg.cn/public/common/toolbar/images/message-icon.png',

'title': '第二个title',

'des': '<p>第二个描述<span>哈哈哈哈哈撒多或</span></p>'

},

{

'img': 'https://csdnimg.cn/public/common/toolbar/images/vipimg.png',

'title': '第三个title',

'des': '<p>第三个描述<span>哈哈哈哈哈撒多或</span></p>'

},

]

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

var that = this;

var richText = that.data.richText;

for (var i = 0; i < richText.length; i++) {

WxParse.wxParse('content' + i, 'html', richText[i]['des'], that);

if (i === richText.length - 1) {

WxParse.wxParseTemArray("artileList", 'content', richText.length, that)

}

}

},