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

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

特性

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 = '

我是HTML代碼

'; /** * 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。