小程序解析富文本

在最近微信小程序开发过程中,遇到一些文章内容是HTML富文本的,但是微信小程序是不支持HTML标签的,所以我们在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签,然后找到了一个很好用的方法来解决这个问题的方法----->wxParse
下边是具体的使用方法

1.1.下载github官方wxParse目录到小程序项目的根目录下

//附上官网地址:
//github地址:https://github.com/icindy/wxParse
//首先是要下载的目录
//文件结构:
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)

2. 引入必要文件

//在要使用的页面中引入WxParse模块
var WxParse = require('/wxParse/wxParse.js');

3..将WxParse.css引入在app.wxss中

@import "/wxParse/wxParse.wxss"

4.将富文本绑定给wxParse

格式:WxParse.wxParse(参数1, 参数2, 参数3, 参数4, 参数5);
参数说明
* 参数1.bindName绑定的数据名(必填)
* 参数2.type可以为html或者md(必填)
* 参数3.data为传入的具体数据(必填)
* 参数4.target为Page对象,一般为this(必填)
* 参数5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
var article = '

我是HTML代码
';
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

5.模版引用

// 引入模板

//这里data中article为bindName

posted @ 2020-08-09 00:35  哈哈O0O  阅读(1896)  评论(0)    收藏  举报