通過反編譯小程序來學習前端: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源碼,變量名大部分會被單字母取替,注釋也會消失。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM