兩步快速獲取小程式原始碼

fontsize發表於2018-10-02

最近在學習微信小程式開發，半個月學習下來，很想實戰一下踩踩坑，於是就仿寫了某個小程式的前端實現，在實際練手中，完全是黑盒的，純靠推測，部分效果在各種嘗試後能能做出大致的實現，但是有些細節，實在不知道如何去實現。這種時候，真的很想一窺原始碼，檢視究竟，看看大廠的前端大神們是如何規避了小程式的一些比較奇葩的坑。

於是就想到獲取到小程式地原始檔，然後嘗試對其進行反編譯還原為原始碼，來作為學習參考。我百度了各種關於小程式地反編譯教程，但是感覺都不太適合像我這樣地初學小白，踩了挺多坑。在這裡把我重新簡化好的，快速地獲取一個微信小程式原始碼的方式記錄下來。

簡單聊一下`xxxxx.wxapkg`

先來想想一個很簡單的問題，小程式的原始檔存放在哪？

在微信的伺服器上。

普通使用者想要直接獲取到在微信伺服器去獲取，肯定是十分困難的，有沒有別的辦法呢？

簡單思考一下我們使用小程式的場景就會明白，當我們點開一個微信小程式的時候，其實是微信已經將它的從伺服器上下載到了手機，然後再來執行的。
所以我們應該可以從手機本地找到到已經下載過的小程式檔案

那麼小程式檔案儲存在手機的什麼位置呢？

這裡只以安卓手機為例，畢竟窮逼不曾擁有過蘋果手機
具體目錄位置直接給出：
/data/data/com.tencent.mm/MicroMsg//appbrand/pkg/
在這個目錄下，會發現一些 xxxxxxx.wxapkg 型別的檔案，這些就是微信小程式的包

微信小程式的格式就是:.wxapkg
.wxapkg是一個二進位制檔案，有其自己的一套結構。
微信小程式原始碼閱讀筆記lrdcq大神的這篇博文有對.wxapkg的詳細介紹，當然你也不可以不看
這裡有個小坑，想要進入到上面這個目錄的話，用手機自帶的檔案管理器是不行的，需要使用到第三方的檔案管理器，比如：RE檔案管理器，並且安卓需要取得root許可權，蘋果手機要求越獄，且iphone的越獄難度>>安卓獲取root，不管越獄還是root，這都太費勁，當然有能力的同學可以直接從手機上來操作，但是在這裡不推薦從真機上獲取。

準備材料

node.js執行環境
- 如果沒有安裝nodejs，請先安裝一下
- 下載地址：nodejs.org/en/
反編譯的指令碼
- 這裡提供一個Github上qwerty472123大神寫的node.js版本的，當然也有其它版本的，例如python版本，這裡我只是簡單地用node.js版本舉例
- 地址：github.com/qwerty47212…
安卓模擬器（要求自帶root許可權）
- 我使用的是夜神模擬器，你也可以自選
- 下載地址：www.yeshen.com/cn/download…

詳細步驟：

使用安卓模擬器獲取到.wxapkg檔案

不用越獄，不用root，使用電腦端的安卓模擬器來獲取是一個非常簡單快捷的獲取方式，具體步驟如下：

開啟安裝好的安卓模擬器，並在模擬器中安裝QQ、微信、RE管理器
- QQ、微信在模擬器自帶的應用商店裡搜尋下載安裝即可
- RE管理器的下載地址：pan.baidu.com/s/1PPBx08rN…
- 下載好後直接拖拽進開啟的模擬器視窗就會自動安裝
設定一下模擬器
- 以我個人認為比較好用的夜神模擬器舉例
- 首先到模擬器內部設定超級使用者許可權

這些操作的目的都是為了能讓RE管理器順利的獲取到ROOT許可權

接下來在模擬器裡開啟微信，然後在微信中執行你想要獲取的小程式（這一步微信就會把目標小程式的原始檔包從伺服器下載到了本地）
- 就以我說的這款共享單車的小程式舉例
- 在模擬器微信中執行一下後，切回模擬器桌面，執行RE瀏覽器 來到目錄
- /data/data/com.tencent.mm/MicroMsg//appbrand/pkg/
- 就抵達了目的資料夾
- 你會看到發現裡面的一些.wxapkg字尾的檔案，就是它們沒錯啦，可以根據時間來判斷那個是你剛才從伺服器下載過來的
- 一般小程式的檔案不會太大，長按，然後點右上角選項將其壓縮為zip包,然後再將壓縮好的包通過QQ傳送到我的電腦
- 注：如果不進行壓縮的話，QQ會提示檔案不可用
- 所以QQ的這個功能可以讓我們很方便的拿到原始檔，而不必到電腦目錄去找模擬器的檔案目錄。
- 解壓。這樣幾步簡單操作，就成功拿到了小程式的原始檔了。
使用反編譯指令碼解包 wxapkg
- 到這裡你應該已經將反編譯指令碼從github下載或者 clone 到本地某個目錄
- 開啟nodejs命令視窗，如果有vscode的直接使用vscode更方便，沒有安裝的，開啟如下這個命令列視窗
- 用cd命令進入到你clone或者下載好的反編譯指令碼目錄下
- 在node命令視窗中依次安裝如下依賴（依次把每條安裝命令複製到命令列回車就可以）：
  npm install esprima
  npm install css-tree
  
  npm install cssbeautify
  
  npm install vm2
  
  npm install uglify-es
  
  npm install js-beautify
- 安裝好依賴之後，就是最後一步了，反編譯 .wxapkg 檔案
- 在當前目錄下輸入
  
  node wuWxapkg.js [-d] <files…> //files 就是你想要反編譯的檔名
  例如：我有一個需要反編譯的檔案 _163200311_32.wxapkg 已經解壓到了D盤根目錄下,那麼就輸出命令
  
  node .\wuWxapkg.js D:_163200311_32.wxapkg