聊一聊微信小程序包內(nèi)容
2021-07-26 10:17:19

?

先有雞還是先有蛋？談?wù)勑〕绦虬漠a(chǎn)生與消亡

任何事物都是有生命周期的，小程序包也不例外，為了方便理解，我們暫且叫它【小程序包的生命周期】。其實(shí)官方本沒(méi)有明確提出這個(gè)概念，這里只是為了本文的理解才作了這個(gè)引入，讀完就忘記吧????。
這里大致歸納為以下幾個(gè)階段。

• 產(chǎn)生：苦逼的程序猿們接到領(lǐng)導(dǎo)的需求，火速開發(fā)小程序，最后在微信開發(fā)者工具中點(diǎn)擊【上傳】按鈕完成小程序包的打包上傳，至此一個(gè)體驗(yàn)版小程序包(需要后臺(tái)手動(dòng)設(shè)置版本為體驗(yàn)版)就此在微信的服務(wù)器上誕生了。

• 傳播：提交審核通過(guò)之后小程序包會(huì)被分發(fā)到CDN網(wǎng)絡(luò)，供用戶下載。

• 使用：用戶通過(guò)某種渠道打開小程序就會(huì)把小程序包下載到本地進(jìn)行解壓使用。

• 歸宿：用戶們玩膩了在微信主頁(yè)頂端下拉菜單中長(zhǎng)按小程序并拖進(jìn)垃圾桶。。(最終歸于塵土 ?_?)

這里需要注意的是：同一小程序分開發(fā)版、體驗(yàn)版、正式版，幾個(gè)包都是獨(dú)立，互相隔離的，并且緩存(打開時(shí)優(yōu)先加載)在本地。普通用戶看到的只是正式版。

用戶初次打開小程序時(shí)發(fā)生了什么?

在小程序啟動(dòng)時(shí)，微信會(huì)為小程序展示一個(gè)固定的啟動(dòng)界面，界面內(nèi)包含小程序的圖標(biāo)、名稱和加載提示圖標(biāo)。
微信會(huì)做以下工作：

• 下載小程序代碼包

• 加載小程序代碼包

• 初始化小程序首頁(yè)

包文件結(jié)構(gòu)介紹與打包規(guī)則

關(guān)于文件結(jié)構(gòu)這里不再贅述(不是本文關(guān)注重點(diǎn))
這里簡(jiǎn)要提一下微信小程序包的文件格式，注意是『微信』哦。

格式：
文件頭+文件名+文件內(nèi)容起始地址及長(zhǎng)度

注意：

• 微信小程序包文件頭信息是以?0xbe開頭，所以如果你拿了抖音的小程序包來(lái)解是沒(méi)用的

• 文件內(nèi)容都是明文存放的，這是我們能夠順利解包的前提

接著我們回過(guò)來(lái)來(lái)看看解包后文件的主要構(gòu)成，這里還是拿開源中國(guó)的小程序開刀吧????????。
為了輔助理解，我們先修改源碼中的 wuWxapkg.js 文件，L34(34行)后面追加下面的代碼

• ?

console.log(`No.${i+1}：`, info.name);

然后執(zhí)行以下命令得到日志

• ?

node wuWxapkg.js -o osc.wxapkg

執(zhí)行命令后可以在命令行看到包內(nèi)文件名列表

通過(guò)觀察文件名列表我們可以看出：
包內(nèi)主要包含
①靜態(tài)資源->static/**、圖片、svg......
②app-config.json
③app-service.js
④page-frame.html
⑤頁(yè)面html文件->pages/**.html、其它組件或者頁(yè)面的html

關(guān)鍵文件作用整理如下：

主包一般都是2M左右大小，也有特別的會(huì)達(dá)到4M+

未列進(jìn)來(lái)的文件：

解出來(lái)之后如果得到包含這幾個(gè)文件的內(nèi)容，就說(shuō)明解的不是主包。

我們順帶看看微信開發(fā)者工具源碼中的 pageframe.html
在mac系統(tǒng)下可以通過(guò)『微信開發(fā)者工具』上右鍵菜單點(diǎn)擊顯示包內(nèi)容來(lái)找到這個(gè)模板文件，文件路徑：

1. /Applications/wechatwebdevtools.app/Contents/Resources/package.nw/html

部分內(nèi)容一覽：

<!-- -->部分即是模板字符串，會(huì)在執(zhí)行過(guò)程中被動(dòng)態(tài)替換。

得出的一些結(jié)論

• 基礎(chǔ)庫(kù)是內(nèi)置在微信客戶端的，在用戶本地會(huì)有緩存，打開小程序時(shí)如果本地存在緩存則優(yōu)先加載，所以如果在開發(fā)模式下開啟了調(diào)試模式?jīng)]有關(guān)閉則打開正式版也會(huì)出現(xiàn)綠底白字的『console』懸浮按鈕。

• 微信小程序包的文件頭是以 0xbe 開頭，所以如果不是則認(rèn)為不是微信家的小程序包

• page-frame.html 是小程序運(yùn)行時(shí)模板文件，所有視圖層頁(yè)面內(nèi)容的加載都是基于這個(gè)模板html文件(從微信開發(fā)者工具源碼也可以略知一二)進(jìn)行模板字符串替換

• 所有的業(yè)務(wù)邏輯代碼都是打包到 app-service.js 文件

注：以上內(nèi)容僅是博主學(xué)習(xí)了相關(guān)資料結(jié)合個(gè)人理解整理所得，不免會(huì)有疏漏的地方，如有更好的發(fā)現(xiàn)，歡迎交流。

參考資料

• https://github.com/xuedingmiaojun/wxappUnpacker/blob/master/wuWxapkg.js

• https://github.com/xuedingmiaojun/wxappUnpacker/blob/master/DETAILS.md#wxapkg-%E5%8C%85

?