wxParse-微信小程序富文本解析组件：github.com/icindy/wxPa…

支持Html及markdown转wxml可视化

一、基本使用

1、下载wxParse文件夹，并引入到自己项目中

2、分别在相应的文件中引入以下文件

let WxParse = require("../../utils/wxParse/wxParse.js");
 
@import "../../utils/wxParse/wxParse.wxss";  //根据自己需求，可要可不要
 
<import src="../../utils/wxParse/wxParse.wxml"/>

二、wxParse单条HTML渲染

1、在使用的页面的js中引入WxParse模块

var WxParse = require('../../wxParse/wxParse.js');

data: {
    questionsContent: "<p>【标准题库】毛泽东思想被确定为中国共产党的指导思想是在( &nbsp; &nbsp; &nbsp; )</p><p><br>&nbsp;</p>",
    option: [{ option: "A", value: "<p>中共七大</p>", flag: 0 }, 
    { option: "B", value: "<p>遵义会议</p>", flag: 0 }, 
    { option: "C", value: "<p>中共十一届三中全会</p>", flag: 0 },
    { option: "D", value: "<p>中共十二大</p>", flag: 0 }]
  },

2、自定义方法模拟请求的接口：

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that=this;
    that.getContent();
  },
 
  getContent(){
    let that=this;
    if (that.data.questionsContent){
      WxParse.wxParse('content', 'html', that.data.questionsContent, that); //内容
    }
  },

3、视图页面中进行渲染

<import src="../../wxParse/wxParse.wxml"/>
<view>
 <template is="wxParse" data="{{wxParseData:content.nodes}}" />
</view>

4、显示结果：

三、wxParse多数据循环使用方法

/**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName: 为你调用时的数组名称
* 3.bindNameReg为循环的共同体 如绑定为reply1，reply2...则bindNameReg = 'reply'
* 3.total为reply的个数
*/

1、 循环绑定数据：

 //wxParse多数据循环绑定
    let replyArr = that.data.option;
    if (replyArr.length > 0) {
      for (let i = 0; i < replyArr.length; i++) {
        WxParse.wxParse('reply' + i, 'html', replyArr[i].value, that);
        if (i === replyArr.length - 1) {
          WxParse.wxParseTemArray("replyOptionArray", 'reply', replyArr.length, that)
        }
      }
      let listArr = that.data.replyOptionArray;
      listArr.forEach((item, index) => {
        that.data.option[index].optionCopy = item;
      })
    }
    that.setData({
      option:that.data.option
    })

2、页面中进行进行渲染

<view wx:for="{{option}}">
  <template is="wxParse" data="{{wxParseData:item.optionCopy}}" />
 </view>

3、结果显示

四、整个代码

1、index.wxml

<!--pages/shopping/index.wxml-->
<import src="../../wxParse/wxParse.wxml"/>
<view>
  <template is="wxParse" data="{{wxParseData:content.nodes}}" />
  <view wx:for="{{option}}">
    <template is="wxParse" data="{{wxParseData:item.optionCopy}}" />
  </view>
</view>

2、index.js

// pages/shopping/index.js
var WxParse = require('../../wxParse/wxParse.js');
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    questionsContent: "<p>【标准题库】毛泽东思想被确定为中国共产党的指导思想是在( &nbsp; &nbsp; &nbsp; )</p><p><br>&nbsp;</p>",
    option: [{ option: "A", value: "<p>中共七大</p>", flag: 0 }, 
    { option: "B", value: "<p>遵义会议</p>", flag: 0 }, 
    { option: "C", value: "<p>中共十一届三中全会</p>", flag: 0 },
    { option: "D", value: "<p>中共十二大</p>", flag: 0 }]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that=this;
    that.getContent();
  },
 
  getContent(){
    let that=this;
    let replyArr = that.data.option
    if (that.data.questionsContent){
      WxParse.wxParse('content', 'html', that.data.questionsContent, that); //内容
    }
    //wxParse多数据循环绑定
    if (replyArr.length > 0) {
      for (let i = 0; i < replyArr.length; i++) {
        WxParse.wxParse('reply' + i, 'html', replyArr[i].value, that);
        if (i === replyArr.length - 1) {
          WxParse.wxParseTemArray("replyOptionArray", 'reply', replyArr.length, that)
        }
      }
      let listArr = that.data.replyOptionArray;
      listArr.forEach((item, index) => {
        that.data.option[index].optionCopy = item;
      })
    }
    that.setData({
      option:that.data.option
    })
  },
 
})