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>【标准题库】毛泽东思想被确定为中国共产党的指导思想是在( )</p><p><br> </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>【标准题库】毛泽东思想被确定为中国共产党的指导思想是在( )</p><p><br> </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
})
},
})