兩步快速獲取小程序源碼

最近在學習微信小程序開發，半個月學習下來，很想實戰一下踩踩坑，因而就仿寫了某個小程序的前端實現，在實際練手中，徹底是黑盒的，純靠推測，部分效果在各類嘗試後能能作出大體的實現，可是有些細節，實在不知道如何去實現。這種時候，真的很想一窺源碼，查看究竟，看看大廠的前端大神們是如何規避了小程序的一些比較奇葩的坑。

因而就想到獲取到小程序地源文件，而後嘗試對其進行反編譯還原爲源代碼，來做爲學習參考。我百度了各類關於小程序地反編譯教程，可是感受都不太適合像我這樣地初學小白，踩了挺多坑。在這裏把我從新簡化好的，快速地獲取一個微信小程序源碼的方式記錄下來。

---

簡單聊一下xxxxx.wxapkg

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

• 在微信的服務器上。

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

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

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

• 這裏只以安卓手機爲例，畢竟窮逼未曾擁有過蘋果手機
• 具體目錄位置直接給出：
• /data/data/com.tencent.mm/MicroMsg//appbrand/pkg/

• 在這個目錄下，會發現一些 xxxxxxx.wxapkg 類型的文件，這些就是微信小程序的包

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

• .wxapkg是一個二進制文件，有其本身的一套結構。

• 微信小程序源碼閱讀筆記lrdcq大神的這篇博文有對.wxapkg的詳細介紹，固然你也不能夠不看

• 這裏有個小坑，想要進入到上面這個目錄的話，用手機自帶的文件管理器是不行的，須要使用到第三方的文件管理器，好比：RE文件管理器，而且安卓須要取得root權限，蘋果手機要求越獄，且iphone的越獄難度>>安卓獲取root，無論越獄仍是root，這都太費勁，固然有能力的同窗能夠直接從手機上來操做，可是在這裏不推薦從真機上獲取。

準備材料

1. node.js運行環境
   • 若是沒有安裝nodejs，請先安裝一下
   • 下載地址：nodejs.org/en/
2. 反編譯的腳本
   • 這裏提供一個Github上qwerty472123大神寫的node.js版本的，固然也有其它版本的，例如python版本，這裏我只是簡單地用node.js版本舉例
   • 地址：github.com/qwerty47212…
3. 安卓模擬器（要求自帶root權限）
   • 我使用的是夜神模擬器，你也能夠自選
   • 下載地址：www.yeshen.com/cn/download…

詳細步驟：

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

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

1. 打開安裝好的安卓模擬器，並在模擬器中安裝QQ、微信、RE管理器

   • QQ、微信在模擬器自帶的應用商店裏搜索下載安裝便可
   • RE管理器的下載地址：pan.baidu.com/s/1PPBx08rN…
   • 下載好後直接拖拽進打開的模擬器窗口就會自動安裝

2. 設置一下模擬器

   • 以我我的認爲比較好用的夜神模擬器舉例
   • 首先到模擬器內部設置超級用戶權限

• 這些操做的目的都是爲了能讓RE管理器順利的獲取到ROOT權限

3. 接下來在模擬器裏打開微信，而後在微信中運行你想要獲取的小程序（這一步微信就會把目標小程序的源文件包從服務器下載到了本地）

   • 就以我說的這款共享單車的小程序舉例
   • 在模擬器微信中運行一下後，切回模擬器桌面，運行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

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

• 回車運行

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

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

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

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

勾選了仍是沒法運行？那麼請在詳情裏把基礎版本庫調低至1.8左右，再試試

出現找不到某些文件的狀況怎麼辦？我只能告訴：刪！刪！刪！app.json裏面,提示找不到那個文件，就將pages下注冊的該頁面語句暫時刪除掉。刪到能夠運行爲止

仍是沒法運行？那你能夠在個人博客裏找到個人聯繫方式，申請加我好友，我會嘗試幫你解決，這是免費的，就當交個朋友

兩步便可完成

至此咱們就經過很是簡單的方式獲取到了一個想要的小程序源文件，並對其進行了反編譯還原
之後想要再反編譯其餘的小程序，很是快速，只須要兩步

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

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

寫在後面的話

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

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

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

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

原文地址：行無忌的成長小屋：只需兩步獲取任何微信小程序源碼

下圖爲我使用此方法獲取的源碼，稍微修改後發佈上去的。該小程序但是新個稅改革後的薪資計算器，僅供娛樂參考