只需兩步快速獲取微信小程式原始碼

行無忌發表於2018-05-31
微信小程式原始碼

第一次在掘金這樣高大上的社群寫文章，忐忑地敲下我獲取小程式原始碼過程中的經驗分享。

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

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

簡單聊一下xxxxx.wxapkg

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

  • 在微信的伺服器上。

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

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

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

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

微信小程式的格式就是:.wxapkg

  • .wxapkg是一個二進位制檔案，有其自己的一套結構。

  • 微信小程式原始碼閱讀筆記lrdcq大神的這篇博文有對.wxapkg的詳細介紹，當然你也不可以不看

  • 這裡有個小坑，想要進入到上面這個目錄的話，用手機自帶的檔案管理器是不行的，需要使用到第三方的檔案管理器，比如：RE檔案管理器，並且安卓需要取得root許可權，蘋果手機要求越獄，且iphone的越獄難度>>安卓獲取root，不管越獄還是root，這都太費勁，當然有能力的同學可以直接從手機上來操作，但是在這裡不推薦從真機上獲取。

準備材料

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

詳細步驟：

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

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

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

只需兩步快速獲取微信小程式原始碼
只需兩步快速獲取微信小程式原始碼

  • 這些操作的目的都是為了能讓RE管理器順利的獲取到ROOT許可權
  1. 接下來在模擬器裡開啟微信，然後在微信中執行你想要獲取的小程式（這一步微信就會把目標小程式的原始檔包從伺服器下載到了本地）
  • 就以我說的這款共享單車的小程式舉例
  • 在模擬器微信中執行一下後，切回模擬器桌面，執行RE瀏覽器 來到目錄
  • /data/data/com.tencent.mm/MicroMsg/{{一串32位的16進位制字串資料夾}}/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
複製程式碼

小技巧：注意這裡斜杆別打反了，你可以輸入檔名前幾個字元，然後Tab鍵會自動補全檔名

  • 回車執行

只需兩步快速獲取微信小程式原始碼

  • 反編譯指令碼就能一步將.wxapkg 檔案還原為微信開發者工具能夠執行的原始檔，目錄地址和你反編譯的檔案地址是一樣的

    只需兩步快速獲取微信小程式原始碼

  • 看到這些檔案結構，是不是非常熟悉！我們在微信開發者工具新增專案即可開啟

    只需兩步快速獲取微信小程式原始碼

  • 執行成功，原始碼獲取完成

只需兩步快速獲取微信小程式原始碼

如果執行出現了點問題：可以試試，點選開發者工具 詳情 去掉 es6轉es5 的勾，勾上不校驗安全域名

勾選了還是無法執行？那麼請在詳情裡把基礎版本庫調低至1.8左右，再試試

出現找不到某些檔案的情況怎麼辦？我只能告訴：刪！刪！刪！app.json裡面,提示找不到那個檔案，就將pages下注冊的該頁面語句暫時刪除掉。刪到可以執行為止

還是無法執行？那你可以在我的部落格裡找到我的聯絡方式，申請加我好友，我會嘗試幫你解決，這是免費的，就當交個朋友

兩步即可完成

至此我們就通過非常簡單的方式獲取到了一個想要的小程式原始檔，並對其進行了反編譯還原 以後想要再反編譯其他的小程式，非常快速，只需要兩步

  1. 使用模擬器找到小程式.wxapkg檔案
  2. 使用nodejs 反編譯指令碼將.wxapkg檔案反編譯

使用此方法，絕大部分的小程式都能正常反編譯出來，但是也會有一些特殊的情況，具體可以檢視qwerty472123大神Github的readme.md檔案

寫在後面的話

早在跳一跳小遊戲火的時候，就有人通過小程式的appid和版本號，構造URL直接從伺服器端下載該小程式的原始碼wxapkg檔案。但是這種方法很快就被封了。

上線的原始碼能如此簡單的被獲取到，不得不說小程式的原始碼安全存在一些隱患，不過現在的小程式開發框架會用babel這樣的打包工具把js邏輯程式碼揉在一個js檔案裡，轉編譯成看不懂的程式碼，這樣，即使被獲取了原始碼，也很難窺得蛛絲馬跡。

這裡介紹的方法只想提供給像我一樣的小程式新手用來學習和仿寫練手，獲取仿寫素材。

小程式作為微信生態內的新生力量，不僅被官方，也被很多開發者和內容創業者寄予厚望，處於對程式碼的安全性的考慮，這裡的獲取方式，不確定以後是否還行得通。

原文連結：行無忌的成長小屋：只需兩步快速獲取微信小程式原始碼

相關文章