經(jīng)常有網(wǎng)友問(wèn)怎么讓微信小程序解析H5文件或者類似封裝H5網(wǎng)頁(yè)到APP里面？我一開(kāi)始覺(jué)得這是不可能的，因?yàn)楣俜降慕獯鹗沁@樣的：

每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。

上面的意思就已經(jīng)很清楚了。翻譯過(guò)來(lái)就是：

.js就是javascript

.wxss相當(dāng)于css

.wxml相當(dāng)于html

然而，wxml與wxss的語(yǔ)法是微信自己定義，不同于html與css語(yǔ)法。既然語(yǔ)法都不一樣，微信小程序自然無(wú)法加載H5頁(yè)面。微信只能加載在工程內(nèi)已經(jīng)注冊(cè)的page頁(yè)面，無(wú)法打開(kāi)外部鏈接，只能從服務(wù)器抓取數(shù)據(jù)

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

API返回的數(shù)據(jù):

注意:

message 對(duì)應(yīng)的 value 值 為

[AppleScript]"

材料

---

\n

雪梨一個(gè)、冰糖適量、牙簽幾根

做法

---

\n

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

\n

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

",

"name": "冰糖雪梨"

這個(gè)小程序是無(wú)法解析的, 所以, 重點(diǎn)來(lái)了.

wxParse-微信小程序富文本解析組件, 通過(guò)這個(gè)組件, 小程序就可以解析部分的 html文件 還包括 表情包哦, 下面是大禮包, 我將演示如何使用:下載官方demo

Copy文件夾wxParse,與 pages文件目錄同級(jí)//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對(duì)象,一般為this(必填)

* 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選)

*/

var that = this;

WxParse.wxParse('article', 'html', article, that,5);

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

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的微信小程序PHP文件建在哪里,微信小程序解析H5文件方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。