如何使用微信小程序解析H5文件
2017-06-05
導(dǎo)讀：經(jīng)常有網(wǎng)友問hishop怎么讓微信小程序解析H5文件或者類似封裝H5網(wǎng)頁到APP里面我一開始覺得這是不可能的因?yàn)楣俜降慕獯鹗沁@樣的每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組...
|
經(jīng)常有網(wǎng)友問怎么讓微信小程序解析H5文件或者類似封裝H5網(wǎng)頁到APP里面我一開始覺得這是不可能的因?yàn)楣俜降慕獯鹗沁@樣的 每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成如index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件.json后綴的文件是配置文件.wxss后綴的是樣式表文件.wxml后綴的文件是頁面結(jié)構(gòu)文件。 上面的意思就已經(jīng)很清楚了。翻譯過來就是
然而wxml與wxss的語法是微信自己定義不同于html與css語法。既然語法都不一樣微信小程序自然無法加載H5頁面。微信只能加載在工程內(nèi)已經(jīng)注冊的page頁面無法打開外部鏈接只能從服務(wù)器抓取數(shù)據(jù)
前段時(shí)間,由于微信的編寫文件不再是html格式,所以也無法解析 html代碼,這個(gè)著實(shí)令人難過. 我在用網(wǎng)上的API接口獲取數(shù)據(jù)時(shí), 遇到了一個(gè)大坑, 那就是 API返回的數(shù)據(jù)竟然是 含有標(biāo)簽的字符串, 讓我無從下手, 在嘗試過正則失敗后, 不斷在網(wǎng)上看有沒有可以解析的插件, 終于讓我找到了, 那就是wxParse-微信小程序富文本解析組件, 它支持Html及markdown轉(zhuǎn)wxml可視化, 下面不多說, 代碼貢獻(xiàn)上:
API返回的數(shù)據(jù):
注意:
message 對應(yīng)的 value 值 為
[AppleScript] 純文本查看 復(fù)制代碼
"材料 \n 雪梨一個(gè)、冰糖適量、牙簽幾根 做法 \n1、雪梨洗好用刀切去尾部用勺子挖出梨核最好挖干凈不然影響口感。 \n2、放幾顆冰糖進(jìn)去插幾根牙簽隔水蒸30分鐘左右就OK了。 ","name": "冰糖雪梨"
這個(gè)小程序是無法解析的, 所以, 重點(diǎn)來了.
wxParse-微信小程序富文本解析組件, 通過這個(gè)組件, 小程序就可以解析部分的 html文件 還包括 表情包哦, 下面是大禮包, 我將演示如何使用:
//wxParse目錄 - wxParse/ -wxParse.js(必須存在) -html2json.js(必須存在) -htmlparser.js(必須存在) -showdown.js(必須存在) -wxDiscode.js(必須存在) -wxParse.wxml(必須存在) -wxParse.wxss(必須存在) -emojis(可選)
3.引入必要文件
3.1 在目標(biāo) wxml文件中添加以下代碼
3.2 在 wxss文件 中添加以下代碼(可以是全局wxss,也可以是目標(biāo)的 wxss文件)
@import "/wxParse/wxParse.wxss";
3.3 數(shù)據(jù)綁定(在目標(biāo)的 js文件中添加)
//在 onLoad 函數(shù)里添加哦, var article = '
我是HTML代碼
';/** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName綁定的數(shù)據(jù)名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體數(shù)據(jù)(必填) * 4.target為Page對象,一般為this(必填) * 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選) */ var that = this; WxParse.wxParse('article', 'html', article, that,5);
4.你已成功,不信你看模擬器
|
第二部分：如何開通一個(gè)小商店
- 關(guān)注官方公眾號 -
咨詢電話：4006-089-731