?

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

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

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

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

• 使用：用戶通過某種渠道打開小程序就會把小程序包下載到本地進行解壓使用。

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

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

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

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

• 下載小程序代碼包

• 加載小程序代碼包

• 初始化小程序首頁

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

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

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

注意：

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

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

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

• ?

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

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

• ?

node wuWxapkg.js -o osc.wxapkg

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

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

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

主包一般都是2M左右大小，也有特別的會達到4M+

未列進來的文件：

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

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

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

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

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

得出的一些結(jié)論

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

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

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

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

注：以上內(nèi)容僅是博主學(xué)習(xí)了相關(guān)資料結(jié)合個人理解整理所得，不免會有疏漏的地方，如有更好的發(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

?