如何使微信小程式解析 H5檔案

前段時間,終於千呼萬喚出來的微信小程式,可謂是坑苦了廣大程式猿了.下面將就我所遇到的問題做一個總結

由於微信的編寫檔案不再是html格式,所以也無法解析 html程式碼,這個著實令人難過. 我在用網上的API介面獲取資料時, 遇到了一個大坑, 那就是 API返回的資料竟然是 含有標籤的字串, 讓我無從下手, 在嘗試過正則失敗後, 不斷在網上看有沒有可以解析的外掛, 終於讓我找到了, 那就是 wxParse-微信小程式富文字解析元件, 它支援Html及markdown轉wxml視覺化, 下面不多說, 程式碼貢獻上:

API返回的資料:

注意:
message 對應的 value 值 為

"<h2>材料 </h2><hr>  \n<p>雪梨一個、冰糖適量、牙籤幾根</p>   <h2>做法 </h2><hr>  \n<p>1、雪梨洗好，用刀切去尾部，用勺子挖出梨核，最好挖乾淨，不然影響口感。 </p> \n<p>2、放幾顆冰糖進去，插幾根牙籤，隔水蒸30分鐘左右就OK了。</p>",
      "name": "冰糖雪梨"

這個小程式是無法解析的, 所以, 重點來了.
wxParse-微信小程式富文字解析元件, 通過這個元件, 小程式就可以解析部分的 html檔案 還包括 表情包哦, 下面是大禮包, 我將演示如何使用:

1. 下載官方demo
2. Copy資料夾wxParse,與 pages檔案目錄同級

//wxParse目錄
- wxParse/
  -wxParse.js(必須存在)
  -html2json.js(必須存在)
  -htmlparser.js(必須存在)
  -showdown.js(必須存在)
  -wxDiscode.js(必須存在)
  -wxParse.wxml(必須存在)
  -wxParse.wxss(必須存在)
  -emojis(可選)

3.引入必要檔案

3.1 在目標 wxml檔案中新增以下程式碼

<import src="../../wxParse/wxParse.wxml"
 
/> 
<view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

3.2 在 wxss檔案 中新增以下程式碼(可以是全域性wxss,也可以是目標的 wxss檔案)

@import "/wxParse/wxParse.wxss";

3.3 資料繫結(在目標的 js檔案中新增)

//在 onLoad 函式裡新增哦,
var article = '<div>我是HTML程式碼</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName繫結的資料名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體資料(必填)
* 4.target為Page物件,一般為this(必填)
* 5.imagePadding為當圖片自適應是左右的單一padding(預設為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that,5);

4.你已成功,不信你看模擬器