小程序解析富文本

在最近微信小程序開發過程中，遇到一些文章內容是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