微信小程序之富文本解析（附源碼和效果圖）

示例效果圖：

一、簡介及說明

在小程序項目開發中，會遇到富文本編輯的內容，后台返回到小程序端無法解析，這時就需要一個插件來處理。
微信小程序沒有提供webview等html解析，原展示類文本沒有辦法圖文並茂的原生展示，wxParse主要目的就是彌補富文本解析空缺的問題。

插件由聯盟網站DEV開發，開發者：icindy，最新版本請查看github地址：wxParse

二、 使用方法

1、下載wxParese文件，拷貝wxParse文件夾到自己的小程序項目中。

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); 
  }, 
})

參數說明：

示例代碼已上傳到GitHub上，可直接拷貝示例代碼的wxParse文件使用，地址：wx-wxParese，歡迎start。