最近在學習微信小程序開發,半個月學習下來,很想實戰一下踩踩坑,於是就仿寫了一個滴滴他們家的青桔單車小程序的前端實現,過程一言難盡,差不多兩週時間過去了,發現小程序的坑遠比想象的要多的多!!在實際練手中,完全是黑盒的,看到人家上線的小程序的效果,純靠推測,部分效果在絞盡腦汁後能做出大致的實現,但是有些細節,費勁全力都沒能做出來。很想一窺源碼,查看究竟,看看大廠的前端大神們是如何規避了小程序的各種奇葩的坑。
於是就想到獲取到小程序地源文件,然後再對其進行反編譯還原爲源代碼,來作爲學習參考。我百度了各種關於小程序地反編譯教程,但是感覺都不太適合像我這樣地初學小白,踩了挺多坑。在這裏把我重新簡化好的,快速地獲取一個微信小程序源碼的方式記錄下來。
一、簡單聊一下xxxxx.wxapkg
先來想想一個很簡單的問題,小程序的源文件存放在哪?
- 當然是在微信的服務器上。
但是在微信服務器上,普通用戶想要獲取到,肯定是十分困難的,有沒有別的辦法呢?
- 簡單思考一下我們使用小程序的場景就會明白,當我們點開一個微信小程序的時候,其實是微信已經將它的從服務器上下載到了手機,然後再來運行的。
- 所以我們應該可以從
手機本地
找到到已經下載過的小程序文件
那麼如何才能在手機裏找到小程序的源文件包呢?
- 這裏只以安卓手機爲例,畢竟窮逼不曾擁有過蘋果手機
- 具體目錄位置直接給出:
根目錄/data/data/com.tencent.mm/MicroMsg/{一串16進制字符}/appbrand/pkg/
-
在這個目錄下,會發現一些
xxxxxxx.wxapkg
類型的文件,這些就是微信小程序的包微信小程序的格式就是:
.wxapkg
!!! PS !!!:
這裏重要聲明一下:雖然微信小程序的包後綴是.wxapkg
,但有一些包的依賴後綴也是.wxapkg
,真正的小程序包大小1M
左右,而依賴包大小2、3M
甚至更多。所以一股腦的反編譯.wxapkg
類型的文件可能會報錯:Error: This Package is unrecognizable, please decrypted every type of file by hand.
,遇見這個問題的小夥伴請自知,你可能沒找對包哦! -
.wxapkg
是一個二進制文件,有其自己的一套結構。 - 微信小程序源碼閱讀筆記lrdcq大神的這篇博文有對.wxapkg的詳細介紹,當然你也不可以不看
- 但是這裏有個坑,想要進入到上面這個目錄的話,用手機自帶的文件管理器肯定是不行的,
安卓
或者iPhone
都要要用到第三方的文件管理器,比如:RE文件管理器
,並且安卓需要取得root權限,而蘋果手機肯定是要越獄的,且iphone的越獄難度>>安卓獲取root,不管越獄還是root,這都太費勁,當然有能力的同學可以直接從手機上來操作,但是這裏不推薦從真機上獲取
。
二、準備材料
1.node.js運行環境
- 如果沒有安裝nodejs,請先安裝一下
- 下載地址:https://nodejs.org/en/
2.反編譯的腳本
- 這裏提供一個Github上
qwerty472123
大神寫的node.js版本的,當然也有其它版本的,例如python
版本,這裏我只是簡單地用node.js版本舉例 - 地址:https://github.com/qwerty472123/wxappUnpacker
3.安卓模擬器(要求自帶root權限)
- 我使用的是
夜神模擬器
,你也可以自選 - 下載地址:https://www.yeshen.com/cn/download/fullPackage
三、詳細步驟
使用安卓模擬器獲取到.wxapkg文件
不用越獄,不用root,使用電腦端的安卓模擬器來獲取是一個非常簡單快捷的獲取方式,具體步驟如下:
1.打開安裝好的安卓模擬器,並在模擬器中安裝QQ
、微信
、RE管理器
QQ
、微信
在模擬器自帶的應用商店裏搜索下載安裝即可-
RE管理器
的下載地址:https://pan.baidu.com/s/1PPBx08rNutXxhlMMJbuTpQ提示一下:
RE管理器
在模擬器的應用商店一般也能搜到!!可以直接下載 -
下載好後直接拖拽進打開的模擬器窗口就會自動安裝
2.設置一下模擬器
- 以我個人認爲比較好用的
夜神模擬器
舉例 - 首先到模擬器內部設置超級用戶權限
- 這些操作的目的都是爲了能讓
RE管理器
順利的獲取到ROOT權限
3.接下來在模擬器裏打開微信,然後在微信中運行你想要獲取的下程序(這其實是讓微信把小程序的源文件包從服務器下載到了本地了)
- 就以我說的這款共享單車的小程序舉例
- 在模擬器微信中運行一下後,直接切回模擬器桌面,運行RE瀏覽器 來到目錄
根目錄/data/data/com.tencent.mm/MicroMsg/{一串16進制字符}/appbrand/pkg/
-
就抵達了目的文件夾
-
你會看到發現裏面的一些.wxapkg後綴的文件,就是它們沒錯啦,可以根據使用的時間來判斷那個是你剛纔從服務器下載過來的
- 一般小程序的文件不會太大,長按,然後點右上角選項將其
壓縮爲zip包
,然後再將壓縮好的包通過QQ發送到我的電腦
-
注:
如果不進行壓縮的話,QQ會提示文件不可用
-
所以QQ的這個功能可以讓我們很方便的拿到源文件,而不必到電腦目錄去找模擬器的文件目錄。
- 解壓。這樣幾步簡單操作,就成功拿到了小程序的源文件了。
四、使用反編譯腳本解包 wxapkg
- 到這裏你應該已經將反編譯腳本從github下載 或者 clone 到本地某個目錄
- 打開nodejs命令窗口,如果有vscode的直接使用vscode更方便,沒有安裝的,打開如下這個命令行窗口:
-
用cd命令進入到你clone或者下載好的反編譯腳本目錄下
圖中的是我的命令行目錄,
注意
:這個路徑最好不要有中文,大家都知道,中文路徑,經常引起一些奇奇怪怪的bug,如果路徑有中文,自行解決
把那幾個反編譯要用到的腳本放在上圖中的目錄下(這個目錄根據自己的實際目錄而定,圖中是我的目錄):
(qwerty472123
大神的腳本里面,後綴.js
、.json
的文件纔是有用的文件,其他文件是GitHub上需要的文件,當然也可以全部解壓!在這裏我只解壓了後綴.js
.json
的文件) -
在node命令窗口中安裝依賴:
npm install
-
安裝好依賴之後,就是最後一步了,反編譯
.wxapkg
文件 -
在當前目錄下輸入
node wuWxapkg.js [-d] <files…>
//files就是你想要反編譯的文件名
例如:我有一個需要反編譯的文件_163200311_32.wxapkg
已經解壓到了D盤根目錄下,那麼就輸出命令node .\wuWxapkg.js D:\_163200311_32.wxapkg
小技巧:注意這裏斜杆別打反了,你可以輸入文件名前幾個字符,然後Tab鍵會自動補全文件名
(注意一點:
.wxapkg
文件名,不要有空格。有些.wxapkg
文件名中自帶空格,請自行把空格去掉,或者把文件名改成其他的。路徑問題自行修改!!!) -
回車運行
-
反編譯腳本就能一步將.wxapkg 文件還原爲微信開發者工具能夠運行的源文件,目錄地址和你反編譯的文件地址是一樣的
-
看到這些文件結構,是不是非常熟悉!我們在微信開發者工具新增項目即可打開
- 運行成功,源碼獲取完成
如果運行出現了點問題:
1、可以試試,點擊開發者工具詳情去掉 es6轉es5的勾,勾上不校驗安全域名
2、 勾選了還是無法運行?那麼請在詳情裏把基礎版本庫調低至1.5左右,再試試
3、出現找不到某些文件的情況怎麼辦?我只能告訴:刪!刪!刪! app.json
裏面,提示找不到那個文件,就將pages下注冊的該頁面語句暫時刪除掉。刪
到可以運行爲止
4、還是無法運行?那就自己想辦法吧!
五、兩步即可完成
至此我們就通過非常簡單的方式獲取到了一個想要的小程序源文件,並對其進行了反編譯還原 以後想要再反編譯其他的小程序,非常快速,只需要兩步
1.使用模擬器找到小程序.wxapkg文件
2.使用nodejs反編譯腳本將.wxapkg文件反編譯
使用此方法,絕大部分的小程序都能正常反編譯出來,但是也會有一些特殊的情況,具體可以查看
qwerty472123
大神的readme.md
文件
六、寫在後面的話
早在跳一跳小遊戲火的時候,就有人通過小程序的appid和版本號,構造URL直接從服務器端下載該小程序的源碼wxapkg文件。但是這種方法很快就被封了。
上線的源代碼能如此簡單的被獲取到,不得不說小程序的源碼安全存在一些隱患,不過現在的小程序開發框架會用babel這樣的打包工具把js邏輯代碼揉在一個js文件裏,轉編譯成看不懂的代碼,這樣,即使被獲取了源碼,也很難窺得蛛絲馬跡。
這裏介紹的方法只想提供給像我一樣的小程序新手用來學習和仿寫練手,獲取仿寫素材。
小程序作爲微信生態內的新生力量,不僅被官方,也被很多開發者和內容創業者寄予厚望,處於對代碼的安全性的考慮,這裏的獲取方式,不確定以後是否還行得通。