前言：

大家都知道，無論是微信小程式還是支付寶小程式都不支援html程式碼的展示的，甚至說你想貼個純html程式碼做demo都不方便，更不用說解析html了。那麼怎麼解決這個問題呢？

解決方案：

使用WxParse外掛（微信小程式富文字解析元件）就能解決這個問題。本來這個外掛是專為微信小程式設計的，但是瞭解過支付寶小程式開發的同學們應該能猜到，這個外掛應該也支援支付寶小程式的（原因就不說了，大家懂的）。事實證明，這個外掛只需要做適當修改，就能給支付寶小程式使用。

外掛安裝：

https://github.com/icindy/wxParse

1. 下載檔案後，解壓壓縮檔案：

2. 把資料夾中的wxParse資料夾複製貼上到小程式根目錄下：

 外掛使用：

1. 指令碼引入：

//在要使用wxParse的頁面的指令碼中引入WxParse模組
var WxParse = require('../../wxParse/wxParse.js');

2. 資料繫結：

    var that = this
    /**
     * WxParse.wxParse(bindName , type, data, target,imagePadding)
     * 1.bindName繫結的資料名(必填)
     * 2.type可以為html或者md(必填)
     * 3.data為傳入的具體資料(必填)
     * 4.target為Page物件,一般為this(必填)
     * 5.imagePadding為當圖片自適應是左右的單一padding(預設為0,可選)
     
 
*/
    var article = '<div>我是HTML程式碼<img src="http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg"></img></div>';
    WxParse.wxParse('article', 'html', article, that, 0); // 例項化物件

3. 樣式引入：

/*在對應的Wxss中引入WxParse.css,如果使用較多i，也可以直接在app.wxss中全域性引入*/
@import "/wxParse/wxParse.wxss";
 

4. 模板使用：

<!-- 引入模板 -->
<import src="../../wxParse/wxParse.wxml" />
<!--這裡data中article為bindName -->
<template is="wxParse" data="{{wxParseData:article.nodes}}" />

然後，重新編譯就可以了：

注意事項：

示例程式碼：

    /**
     * WxParse.emojisInit(reg,baseSrc,emojis)
     * 1.reg，如格式為[00]=>賦值 reg='[]'
     * 2.baseSrc,為儲存emojis的圖片資料夾
     * 3.emojis,定義表情鍵值對
     */
    WxParse.emojisInit('[]', "/wxParse/emojis/", {
      "00": "00.gif",
      "01": "01.gif",
      "02": "02.gif",
      "03": "03.gif",
      "04": "04.gif",
      "05": "05.gif",
      "06": "06.gif",
      "07": "07.gif",
      "08": "08.gif",
      "09": "09.gif",
      "09": "09.gif",
      "10": "10.gif",
      "11": "11.gif",
      "12": "12.gif",
      "13": "13.gif",
      "14": "14.gif",
      "15": "15.gif",
      "16": "16.gif",
      "17": "17.gif",
      "18": "18.gif",
      "19": "19.gif",
    });
    var emojis = `
      <div>
        <h3>2. 支援emojis小表情</h3>
        <div style="margin-top:5px;">
            <p>這裡可以解析出固定格式的emoji的表情</p>
            <p>[00][01][02][03][04][05][06][07][08][09]</p>
        </div>
      </div>
    `
    WxParse.wxParse('emojis', 'html', emojis, that, 0); // 例項化物件

    <!-- 引入模板 -->
    <import src="../../wxParse/wxParse.wxml" />
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />