微信小程序源碼獲取教程

初衷

最近在學習微信小程序開發,實戰踩了踩坑,仿寫了某桔單車小程序的前端。php

在仿寫過程當中,因爲小程序徹底是黑盒的,不像瀏覽器同樣能夠在開發者工具查看到代碼、拿到素材。因此實現起來純靠推測。這種時候,想到要是能像網頁項目那樣能照着抄多舒服啊~前端

忽然想到能不能獲取到小程序地源文件,而後嘗試對其進行反編譯還原爲源代碼,最後再倒入微信開發者工具來運行來做爲學習參考,因而便有了獲取小程序源碼這段奇妙的經歷。node

搜索了各類關於小程序地反編譯教程,可是感受都不太適合像我這樣地初學小白,踩了挺多坑。在這裏把我整理簡化過的 獲取微信小程序源碼 的方式記錄下來。python


小程序源文件

先來想一想一個很簡單的問題,小程序的源文件存放在哪git

  • 嗯,不出意外應該被微信的某臺服務器託管着。

直接去微信服務器獲取是不太可能的。有沒有什麼間接的辦法呢?es6

  • 有,簡單思考一下咱們使用小程序的場景就會明白,當咱們點開一個微信小程序的時候,有一個加載過程,實際上是微信已經將它的從服務器上下載到了手機,而後在手機本地運行的。
  • 因此咱們應該能夠從手機本地找到到已經下載過的小程序文件

那麼小程序文件存儲在手機的什麼位置呢?github

  • 這裏只以安卓手機爲例,畢竟窮逼未曾擁有過蘋果手機
  • 具體目錄位置直接給出(花括號是佔位符):
  • /data/data/com.tencent.mm/MicroMsg/{{一串32位的16進制字符串名文件夾}}/appbrand/pkg/
  • 在這個目錄下,會發現一些 xxxxxxx.wxapkg 類型的文件,這些文件中,就是微信小程序運行時須要的文件
  • .wxapkg是一個二進制文件,有其本身的一套結構。
  • 微信小程序源碼閱讀筆記這篇博文有對.wxapkg的詳細介紹,感謝興趣的能夠瞄兩眼

推薦的獲取方法npm

  • 進入上述提到的目錄須要使用到第三方的文件管理器,好比:RE文件管理器,而且安卓須要取得root權限,蘋果手機要求越獄,這太費勁,不推薦從真機上獲取,咱們可使用市面上自帶root權限的安卓模擬器來作這件事。

開搞

火燒眉毛了吧,開始搞起來~小程序

準備材料

  1. node.js運行環境
  • 若是沒有安裝nodejs,請先安裝一下
  • 下載地址:nodejs.org/en/
  1. 反編譯的腳本(這個是吃飯的傢伙)
  • 這裏提供一個Github上qwerty472123大神寫的node.js版本的,固然也有其它版本的,例如python版本,這裏我只是簡單地用node.js版本舉例
  • 地址:github.com/qwerty47212…
  1. 安卓模擬器(要求自帶root權限)

詳細步驟:

使用安卓模擬器獲取到.wxapkg文件

  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後綴的文件,有一部分是小程序的依賴文件,體積會比小程序自己大
  • 通常小程序的文件都比較小,咱們選擇這個700kb的長按,而後點右上角選項將其壓縮爲zip包,而後再將壓縮好的包經過QQ發送到個人電腦
  • 注:若是不進行壓縮的話,QQ會提示文件不可用

  • 因此QQ的這個功能可讓咱們很方便的拿到源文件,而沒必要到電腦目錄去找模擬器的文件目錄。
  • 解壓。這樣幾步簡單操做,就成功拿到了小程序的源文件了。

使用反編譯腳本解包 wxapkg

  • 到這裏你應該已經將反編譯腳本從github下載 或者 clone 到本地某個目錄
  • 打開nodejs命令窗口,若是有vscode的直接使用vscode更方便,沒有安裝的,打開以下這個命令行窗口

  • 用cd命令進入到你clone或者下載好的反編譯腳本目錄微信小程序

  • 安裝依賴

    npm install
    複製代碼
  • 安裝好依賴以後,就是最後一步了,反編譯 .wxapkg 文件

  • 在當前目錄下輸入

    node wuWxapkg.js [-d] <files...>    //files 就是你想要反編譯的文件名
    複製代碼

    例如:我有一個須要反編譯的文件 _163200311_32.wxapkg 已經解壓到了D盤根目錄下,那麼就輸出命令

    node .\wuWxapkg.js D:\_163200311_32.wxapkg
    複製代碼

小技巧:注意這裏斜杆別打反了,你能夠輸入文件名前幾個字符,而後Tab鍵會自動補全文件名

  • 回車運行

  • 反編譯腳本就能一步將.wxapkg 文件還原爲微信開發者工具可以運行的源文件,目錄地址和你反編譯的文件地址是同樣的

  • 看到這些文件結構,是否是很是熟悉!咱們在微信開發者工具新增項目便可打開

  • 運行成功,源碼獲取完成

若是運行出現了點問題:能夠試試,點擊開發者工具 詳情 去掉 es6轉es5 的勾勾上不校驗安全域名

勾選了仍是沒法運行?那麼請在詳情裏切換基礎版本庫再試試

至此咱們就經過很是簡單的方式獲取到了一個想要的小程序源文件,並對其進行了反編譯還原 之後想要再反編譯其餘的小程序,整體來講挺簡單的

  1. 使用模擬器找到小程序.wxapkg文件
  2. 使用nodejs 反編譯腳本將.wxapkg文件反編譯

使用此方法,絕大部分的小程序都能正常反編譯出來,可是也會有一些特殊的狀況,具體能夠查看qwerty472123大神Github的readme.md文件

寫在後面的話

從查閱的資料瞭解到,早在跳一跳小遊戲火的時候,就有人經過小程序的appid和版本號,構造URL直接從服務器端下載該小程序的源碼wxapkg文件。可是這種方法很快就被封了。

上線的源代碼能如此簡單的被拿到,說明小程序的源碼安全仍是存在一些隱患。不太小程序自己就是前端生態的衍生產品,前端的代碼每每只負責人機交互部分的呈現,即便代碼泄露,每每也不足以對系統形成太大的影響。而且如今的小程序開發框架在打包時每每會進行編譯和混淆,替換變量後的代碼很難閱讀,咱們經過反編譯拿到的代碼其實和瀏覽器中直接查看某個網頁的運行代碼差很少,很難窺得其中的具體邏輯。

因此這裏介紹的方法只是想提供給像我同樣的小程序新手用來獲取一些仿寫素材和記錄一些動手探索的思考

小程序做爲微信生態內的新生力量,不只被官方,也被不少開發者和內容創業者寄予厚望,處於對代碼的安全性的考慮,文中的獲取方式,不肯定之後是否還行得通。

相關文章
相關標籤/搜索