小程序解析富文本和(循环解析)

小程序解析富文本和(循环解析)

首先我们去https://github.com/icindy/wxParse下载wxParse如下图所示

在接受后台传过来的富文本没有解析的时候输出，如下图所示

接下来我们用下载好的wxParse来解析后台传过来的富文本，首先把下载好的wxParse放到小程序文件夹里面，我是放在了pages文件夹里面。

引入必要的文件到需要的解析的文件里面

//在需要使用wxParse来解析富文本的js里引入wxParse.js
var WxParse = require('../wxParse/wxParse.js');

//在需要使用wxParse来解析富文本的wxss里引入wxParse.wxss  小程序CSS不允许出现注释的记得去掉
@import "../wxParse/wxParse.wxss";

接下来就是解析后台传过来的富文本进行转译
.js

var WxParse = require('../wxParse/wxParse.js');
Page({
  data: {
    index:'<div style="color:#FF0000;">模拟后台传来的数据</div>'
  },
  onLoad: function (options) {
    let that = this
    let content = WxParse.wxParse('content', 'html', this.data.index, that, 5);
  }
})

.wxml

<import src="../wxParse/wxParse.wxml"/><!-- 引入wxParse.wxml文件 -->
<template is="wxParse" data="{{wxParseData:content.nodes}}" /><!-- 然后才能把转译后的值输出 -->

循环解析富文本
//调用完wx.request在success里面执行
.js

let artilesA = res.data;
       for (let i = 0; i < artilesA.length;i++){
         WxParse.wxParse('content' + i, 'html', artilesA[i]['content'], that, 5);
        if (i == artilesA.length - 1) {
           WxParse.wxParseTemArray("artileList", 'content', artilesA.length, that)
         }
       }
      that.setData({
        pagingi: artilesA,
      })
    })

.wxml

<view class='news_content'>
<import src="../wxParse/wxParse.wxml"/>
    <view wx:for="{{artileList}}" wx:key>
         <template is="wxParse" data="{{wxParseData:item}}"/>
    </view>
</view>

代码少方便理解，转义后的富文本如上图所示，有什么问题欢迎评论留言，我会及时回复你的。