微信小程序富文本显示之wxParse 踩坑记（嵌套式循环列表显示）

踩了近一天的坑，终于是做出来了。今天用一下午时间整理下，分享出来，希望对大家有所帮助

一、下载wxParse，并在微信小程序使用

1. 下载wxParse-微信小程序富文本解析组件：wxParse组件下载
2. 在项目app.wxss全局样式文件中，引入wxParse的样式表：@import "./wxParse/wxParse.wxss";
3. 在需要加载html内容的页面文件目录下的js文件里引入wxParsevar WxParse = require('../../wxParse/wxParse.js');
4. 在需要加载html内容的页面文件目录下的wxml文件里引入wxParse
5. 在需要加载html内容的页面文件目录下的wxss文件里引入wxParse（若需要样式的情况下）@import "/wxParse/wxParse.wxss";

二、wxParse方法

1. WxParse.wxParse(bindName , type, data, target, imagePadding)方法介绍

1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

2. WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)介绍

1.temArrayName: 为你调用时的数组名称
3.bindNameReg为循环的共同体（这里具体不太清楚，我用的是共同属性名）
3.total为reply的个数

E.g.
wxml:

<import src="../../wxParse/wxParse.wxml" />
<view wx:for="{{array}}" wx:key="idx" wx:for-index="idx">
  <template is="wxParse" data="{{wxParseData:WxParseListArr[idx]}}" />
</view>

js

var WxParse = require('../../wxParse/wxParse.js');
Page({
  data: {
    array: [{
      title: `
这是一道选择题
`,
    }, {
      title: `
这是一道判断题
`,
    }]
  },
  
  onLoad: function(options) {
    var that = this;
    let artilesA = this.data.array;
    for (let i = 0; i < artilesA.length; i++) {
      WxParse.wxParse('title' + i, 'html', artilesA[i]['title'], that, 5);
      if (i === artilesA.length - 1) {
        WxParse.wxParseTemArray("WxParseListArr", 'title', artilesA.length, that)
      }
    }
  },
  
 })

三、嵌套式循环列表显示

现在回头一想，当时钻牛角尖了，本来很简单的赋值一下就能解决的事情，非得想着用经过wxParse转换list来循环展示，浪费了大量时间
这里的代码就尽量简化，方便大家查阅= =
先从数据结构开始看的可能更容易看懂
wxml：

<import src="../../wxParse/wxParse.wxml" />
<view wx:for="{{array}}" wx:key="item" >
  <template is="wxParse" data="{{wxParseData:artileList[index]}}" />
  <view wx:for="{{array[index].tempArray}}" wx:key="select" wx:for-item="select" wx:for-index='idx' >
    <template is="wxParse" data="{{wxParseData:select}}" />
  </view>
</view>

js：

const md5 = require('../../utils/md5.js');
const utils = require('../../utils/util.js');
var network = require('../../service/network.js');
const api = require('../../service/api.js');
const restfulNetWork = require('../../service/restfulNetWork.js');
const constants = require('../../utils/constants.js');
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp();

Page({
  data: {
	array: [{
      id: 5025,
      title: `
这是一道选择题
`,
      select: [{
        id: 1,
        content: `
A、1+1=1
`
      }, {
        id: 2,
        content: `
B、2+2=4
`
      }, {
        id: 3,
        content: `
C、4+4=8
`
      }, {
        id: 4,
        content: `
D、8+8=16
`
      },]
    },
    {
      id: 5026,
      title: `
wxParse是什么
`,
      select: [{
        id: 1,
        content: `
A、1+1=1
`
      }, {
        id: 2,
        content: `
B、2+2=4
`
      }, {
        id: 3,
        content: `
C、4+4=8
`
      },]
    },
    ],
  },
  
  onLoad: function(options) {
    var that = this;
    let array = that.data.array

    for (let i = 0; i < array.length; i++) {
      WxParse.wxParse('title' + i, 'html', array[i]['title'], that, 5);
      if (i === array.length - 1) {
        WxParse.wxParseTemArray("artileList", 'title', array.length, that)
      }
      let select = array[i].select
      for (let j = 0; j < select.length; j++) {
        WxParse.wxParse('content' + j, 'html', select[j]['content'], that, 5);
        if (j === select.length - 1) {
          WxParse.wxParseTemArray("selectListArr", 'content', select.length, that);
          array[i].tempArray = [...that.data.selectListArr];
          // console.log(...that.data.selectListArr)
        }
      }
      console.log(array[i].tempArray)
    }
    that.setData({
      array: array
    });
  },
  
})