小程序解析富文本

在最近微信小程序开发过程中，遇到一些文章内容是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 = '<div>我是HTML代码</div>';
  var that = this;
  WxParse.wxParse('article', 'html', article, that, 5);

5.模版引用

 // 引入模板
    <import src="/wxParse/wxParse.wxml"/>
  //这里data中article为bindName
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

完成后页面就能够正常渲染HTML富文本数据了

当然除了这个之外 微信小程序还自带富文本标签 大家可以去微信公众平台看看官方的文档

因为没有仔细去研究这个方法 这里就直接放地址啦 感兴趣的可以去看一下呀

地址:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html