經過反編譯小程序來學習前端：wxappUnpacker

小程序開發時，會有4種文件：.wxss  .json  .wxs  .wxml。

正式上傳到騰訊時，目錄會被打包，使用時再發放給客戶端。

這個文件包後綴是 .wxapkg。只要手機用過這個小程序，文件包就會緩存在手機內。

因此，要得到源碼，要作的工做是 提取 + 拆解 這個包。

 

（一）提取

 

首先，須要一臺root過的Android手機。

本人只有一臺備用Android手機，不自帶root功能，因而百度搜索 手機型號 + root。

隨便挑了一款一鍵root軟件（「某兔」），鏈接，USB調試模式，一鍵root......

文件包存放在系統文件夾，讀寫權限有限制，因此用Adb去操做。（某些機型自帶高權限文件操做功能，可不用這個方法，無奈此機比較低端）

Adb 全稱 Android Debug Bridge ，由於 Android 是基於 Linux 的，Adb用的也是Linux命令。

在「某兔」中，找到自帶的Adb命令行功能。

例行先檢查一下狀態：

adb devices

輸入後回車，顯示出 List of devices attached，代表鏈接正常。

進入shell模式：

adb shell

此時，光標前面變爲 shell@{你的手機型號}:/ $

進入root模式：

$ su

此時，光標前面變爲 root@{你的手機型號}:/ #

$ cd /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg

cd指令，是change directory，即轉到目標文件夾上進行操做。

{User} 爲微信賬號惟一標識，是一串哈希碼。

因爲不知道本身的標識id，因此先cd到MicroMsg目錄下，用 $ ls 命令，顯示出有哪些文件夾，再cd進那個賬號文件夾

（上圖登錄過兩個微信賬戶，所以有兩個id文件夾）

在pkg文件夾下，用$ ls 命令，羅列出緩存的wxapkg

但此時，/data系統文件夾只可讀，沒法直接複製。

經過 cd .. 命令，回到根目錄。輸入：

$ mount -o remount,rw /data

remount是從新掛上文件系統，rw是改成read-write可讀寫模式。

此時，即可把pkg內的文件複製出去了：

$ cp /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg/{文件名}.wxapkg /mnt/sdcard

/mnt/sdcard是Android的儲存卡目錄，也就是能夠在電腦裏打開的那個盤。

 

（二）拆解

目前比較好的一個拆解的腳本是wxappUnpacker

基於node.js，此處跳過node.js的部署。

把wxappUnpacker下載後，在文件夾shift + 右鍵，調出cmd。

輸入npm install回車，一次性安裝全部依賴。

輸入node wuWxapkg.js + 文件包路徑（注意 / 開頭的是絕對路徑，沒有的是相對路徑）回車。

腳本自動拆解出四種後綴文件，再自動調用wuConfig.js  wuJs.js  wuWxml.js  wuWxss.js分別拆解。

最後得出的目錄文件，就是開發者所建立的結構

 

（三）總結

提取出成熟的小程序源碼來研究，有助於前端入門者對js css的掌握。

但遺憾的是，反編譯後js源碼，變量名大部分會被單字母取替，註釋也會消失。

使得對代碼的理解極其費事，但仍是能從框架結構中，推理出主要功能的實現。