如何使用微信小程序解析H5文件

2017-06-05

導讀：經常有網友問hishop怎么讓微信小程序解析H5文件或者類似封裝H5網頁到APP里面我一開始覺得這是不可能的因為官方的解答是這樣的每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組...

經常有網友問hishop怎么讓微信小程序解析H5文件或者類似封裝H5網頁到APP里面我一開始覺得這是不可能的因為官方的解答是這樣的每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成如index.js、i...

經常有網友問怎么讓微信小程序解析H5文件或者類似封裝H5網頁到APP里面我一開始覺得這是不可能的因為官方的解答是這樣的

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成如index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件.json后綴的文件是配置文件.wxss后綴的是樣式表文件.wxml后綴的文件是頁面結構文件。

上面的意思就已經很清楚了。翻譯過來就是

.js就是javascript
.wxss相當于css
.wxml相當于html

然而wxml與wxss的語法是微信自己定義不同于html與css語法。既然語法都不一樣微信小程序自然無法加載H5頁面。微信只能加載在工程內已經注冊的page頁面無法打開外部鏈接只能從服務器抓取數據

前段時間,由于微信的編寫文件不再是html格式,所以也無法解析 html代碼,這個著實令人難過. 我在用網上的API接口獲取數據時, 遇到了一個大坑, 那就是 API返回的數據竟然是含有標簽的字符串, 讓我無從下手, 在嘗試過正則失敗后, 不斷在網上看有沒有可以解析的插件, 終于讓我找到了, 那就是wxParse-微信小程序富文本解析組件, 它支持Html及markdown轉wxml可視化, 下面不多說, 代碼貢獻上:

API返回的數據:

注意:
message 對應的 value 值為

[AppleScript] 純文本查看復制代碼

"材料   \n

雪梨一個、冰糖適量、牙簽幾根

做法 \n

1、雪梨洗好用刀切去尾部用勺子挖出梨核最好挖干凈不然影響口感。

2、放幾顆冰糖進去插幾根牙簽隔水蒸30分鐘左右就OK了。

",
"name": "冰糖雪梨"

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

下載官方demo
Copy文件夾wxParse,與 pages文件目錄同級

//wxParse目錄

- wxParse/

  -wxParse.js(必須存在)

  -html2json.js(必須存在)

  -htmlparser.js(必須存在)

  -showdown.js(必須存在)

  -wxDiscode.js(必須存在)

  -wxParse.wxml(必須存在)

  -wxParse.wxss(必須存在)

  -emojis(可選)

3.引入必要文件

3.1 在目標 wxml文件中添加以下代碼

3.2 在 wxss文件中添加以下代碼(可以是全局wxss,也可以是目標的 wxss文件)

@import "/wxParse/wxParse.wxss";

3.3 數據綁定(在目標的 js文件中添加)

//在 onLoad 函數里添加哦,

var article = '

我是HTML代碼

';
/**
* 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.你已成功,不信你看模擬器