小程序開發時,會有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源碼,變量名大部分會被單字母取替,注釋也會消失。
使得對代碼的理解極其費事,但還是能從框架結構中,推理出主要功能的實現。