昨天一位網友問我小程序怎么解析富文本。他嘗試過把html轉出小程序的組件，但是還是不成功，我說可以把內容剝離出來。但是這兩種方法都是不行了。后來找到了wxParse-微信小程序富文本解析組件。

特性

Copy文件夾wxParse 基本使用方法

• 

- wxParse/
  -wxParse.js(必須存在)
  -html2json.js(必須存在)
  -htmlparser.js(必須存在)
  -showdown.js(必須存在)
  -wxDiscode.js(必須存在)
  -wxParse.wxml(必須存在)
  -wxParse.wxss(必須存在)
  -emojis(可選)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 引入必要文件

//在使用的View中引入WxParse模塊
var WxParse = require('../../wxParse/wxParse.js');

• 1
• 2

• 1
• 2

//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

• 1
• 2

• 1
• 2

• 數據綁定

var article = '

'; /** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName綁定的數據名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體數據(必填) * 4.target為Page對象,一般為this(必填) * 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選) */ var that = this; WxParse.wxParse('article', 'html', article, that, 5);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 模版引用

// 引入模板
<import src="你的路徑/wxParse/wxParse.wxml"/>
//這里data中article為bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

注意點

在上面的基本使用里面在.js文件和.wxml文件里面出現的article這個是兩個文件里面是一樣的。但是article是js文件里面的一個變量是可以變的，只要保證js文件和wxml文件里面變量名一致即可。

實例

實例結構

  page頁面是測試頁面。

wxml文件

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

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

wxss文件

@import "../../wxParse/wxParse.wxss";

• 1

• 1

js文件

var WxParse = require('../../wxParse/wxParse.js');
data: {
  article: '<div style="text-align:center;">《靜夜思》· 李白<br />床前明月光，<br />疑是地上霜。 <br />舉頭望明月， <br />低頭思故鄉。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br />div>',
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
 var that = this;
 var temp = WxParse.wxParse('article', 'html', that.data.article, that, 5);
 that.setData({
   article: temp
 })
},

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

效果圖

總結

這里使用這個插件并不難。但是需要主要data里面的那個變量article(這個名字是可變)在幾個位置是一樣的。需要看看小程序-template。