微信小程序开发--富文本插件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。