微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记

微信小程序使用wxParse插件读取富文本,解析html标记

发布时间：2018-04-07

作者：Admin

标签： 微信小程序

微信小程序解析HTML标记

访问量：1203

使用wxParse可以让微信识别到HTML标签(一样可以识别ueditor富文本中的HTML标签)

首先下载wxParse插件

Github: https://github.com/icindy/wxParse

Github点击Download ZIP可直接下载包

下载完成后只需要将包中的wxParse文件夹拷贝到小程序目录中即可

在需要用到的项目js文件中引入wxParse.js(使用相对路径)var WxParse = require('../wxParse/wxParse.js');

然后在需要用到的wxss中引入css样式(可以在全局样式app.wxss中引入)

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

在项目js文件中进行数据绑定

onLoad: function (options) {

var that=this;

wx.request({

url: '服务器接口地址',

success:function(res){

that.setData({

detail:WxParse.wxParse('detail', 'html', res.data[options.id].content, that, 5)

})

},

})

},

参数说明:

/*** WxParse.wxParse(bindName , type, data, target,imagePadding)

*  data 数据不能为数组 类型需要为String

* 1.bindName绑定的数据名(必填)

* 2.type可以为html或者md(必填)

* 3.data为传入的具体数据(必填)

* 4.target为Page对象,一般为this(必填)

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/

然后就可以在项目wxml文件中引入wxParse视图模块

import src="../wxParse/wxParse.wxml" /> (这是一个标签<>)

然后进行模板数据输出

//detail为在js文件中的数据绑定时的bindName

template is="wxParse" data="wxParseData:detail.nods"  />(这是一个标签<>)