微信小程序之富文本解析

在小程序项目开发中，会遇到富文本编辑的内容，后台返回到小程序端无法解析，这时就需要一个插件来处理。
微信小程序没有提供webview等html解析，原展示类文本没有办法图文并茂的原生展示，wxParse主要目的就是弥补富文本解析空缺的问题。
1、下载wxParese文件，拷贝wxParse文件夹到自己的小程序项目中。

1.png

2、在项目文件中使用
（1）在需要使用的wxml文件中引入WxParse.wxml
示例：

<!--index.wxml-->
<import src="../../wxParse/wxParse.wxml" />

（2）在当前页对应的js中引入wxParse.js
示例：

//index.js 
const WxParse = require('../../wxParse/wxParse.js');

（3）使用template组件
在刚刚引入的wxml中插入组件，具体插入的位置是需要转换的地方。
示例:

<!--index.wxml--> 
<import src="../../wxParse/wxParse.wxml" /> 
<view class="container"> 
<view class='uinn'> 
<template is="wxParse" data="{{wxParseData:article.nodes}}" /> 
</view> 
</view>

（4）在当前页的js中使用WxParse中的方法

//index.js 
const WxParse = require('../../wxParse/wxParse.js'); 
Page({ 
data: { }, 
onLoad: function () { 
let that = this; 
let ceshi = `<div> <span>请说出你喜欢的水果？</span> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> </div>`; WxParse.wxParse('article', 'html', ceshi, that, 5); 
},
})

参数说明：

2.png
示例代码已上传到GitHub上，可直接拷贝示例代码的wxParse文件使用，地址：wx-wxParese