微信小程序開發--富文本插件wxParse的使用

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

特性

支持特性	實驗功能	ToDo
[x] HTML的大部分標籤解析	[x] 小表情emjio	[x] table標籤
[x] 內聯style	[x] a標籤跳轉
[x] 標籤Class	[x] 動態添加
[x] 圖片自適應規則
[x] 圖片多圖片預覽
[x] 模版層級可擴展性
[x] 多數據循環方式
[x] 內聯style

基本使用方法

• Copy文件夾wxParse 
  

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

• 引入必要文件

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

 

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

• 數據綁定

var article = '<div>我是HTML代碼</div>'; /** * 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);

• 模版引用

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

 

注意點

在上面的基本使用裏面在.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>

wxss文件

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

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

效果圖

總結

這裏使用這個插件並不難。可是須要主要data裏面的那個變量article(這個名字是可變)在幾個位置是同樣的。須要看看小程序-template。