獲取線上微信小程序源碼(反編譯)
看到人家上線的小程序的效果,純靠推測,部分效果在絞盡腦汁后能做出大致的實現,但是有些細節,費勁全力都沒能做出來。很想一窺源碼?查看究竟?看看大廠的前端大神們是如何規避了小程序的各種奇葩的坑?那么趕緊來試試吧
認識一下.wxalikg文件
先來想想一個很簡單的問題,小程序的源文件存放在哪?
當然是在微信的服務器上
- 但是在微信服務器上,普通用戶想要獲取到,肯定是十分困難的,有沒有別的辦法呢?
- 簡單思考一下我們使用小程序的場景就會明白,當我們點開一個微信小程序的時候,其實是微信已經將它的從服務器上下載到了手機,然后再來運行的。所以,雖然我們沒能力從服務器上獲取到,但是我們應該可以從手機本地找到到已經下載過的小程序源文件
那么如何才能在手機里找到小程序的源文件包呢?
-
具體目錄位置直接給出:/data/data/com.tencent.mm/MicroMsg//alilibrand/likg/
-
在這個目錄下,會發現一些 xxxxxxx.wxalikg 類型的文件,這些就是微信小程序的包,微信小程序的格式就是:.wxalikg,.wxalikg是一個二進制文件,有其自己的一套結構。關於.wxalikg的詳細內容可以參考lrdcq大神的博文: 微信小程序源碼閱讀筆記
-
但是這里有個坑,想要進入到上面這個目錄的話,用手機自帶的文件管理器肯定是不行的,安卓或者ilihone都要要用到第三方的文件管理器,比如:RE文件管理器,並且安卓需要取得root權限,而蘋果手機肯定是要越獄的,且iPhone的越獄難度>>安卓獲取root,不管越獄還是root,這都太費勁(也讓手機系統存在一定安全和穩定性破壞風險),當然有能力的同學可以直接從手機上來操作,但是這里不推薦從真機上獲取。
准備工作
node.js運行環境 下載地址
-
如果沒有安裝nodejs,請先安裝一下
-
反編譯的腳本。下載地址 這里提供一個Github上qwerty472123大神寫的node.js版本的,當然也有其它版本的,你也可以去嘗試,其實對我們來說重點是怎么提取出手機里的緩存文件,這里我只是簡單地用node.js版本舉例
-
安卓模擬器(要求自帶root權限)下載地址自行百度
-
我使用的是夜神模擬器,用來獲取小程序源文件,感覺很不錯,UI做的挺好,重點是自帶root權限,你把RE管理器下載好打開自動就會獲取權限,並且支持mac系統
但值得說明的是mac版本你不一定能裝成功,官方也沒好的解決辦法,結合我自己安裝經驗有兩點,一:安裝時候會有個提示彈窗一堆英文,有兩個按鈕,一個‘open xxx’,另一個是個'OK',你應該點擊到open,進去會有提示給權限,把夜游神需要的權限給予,然后再繼續。二:如果安裝失敗,你可以重啟電腦再試,我就是重啟后再裝成功了
-
RE管理器 下載地址自行百度,也可以用我網盤里的
-
下載好RE管理器直接拖到模擬器中,會自動安裝,打開時候自動就會獲取權限,允許授權即可
詳細步驟
-
使用安卓模擬器獲取到.wxapkg文件
-
不用越獄,不用root,使用電腦端的安卓模擬器來獲取是一個非常簡單快捷且萬能的獲取方式,具體步驟如下:
-
打開安裝好的安卓模擬器,並在模擬器中安裝QQ、微信、RE管理器
-
QQ、微信在模擬器自帶的應用商店里搜索下載安裝即可
-
下載好后直接拖拽進打開的模擬器窗口就會自動安裝
-
設置一下模擬器
-
以我個人認為比較好用的夜神模擬器舉例
-
首先到模擬器內部設置超級用戶權限
-
這些操作的目的都是為了能讓RE管理器順利的獲取到ROOT權限
-
接下來在模擬器里打開微信,然后在微信中運行你想要獲取的下程序(這其實是讓微信把小程序的源文件包從服務器下載到了本地了)
-
就以我說的這款今日頭條的小程序舉例
-
在模擬器微信中運行“今日頭條的小程序”一下后,直接切回模擬器桌面運行RE瀏覽器 來到目錄/data/data/com.tencent.mm/MicroMsg/appbrand(類似一個a8b3488516c9d81e1d5f511891583cf9文件,別的教程是不會告訴你的)/pkg/就抵達了目的文件夾
-
你會看到發現里面的一些.wxapkg后綴的文件,就是它們沒錯啦,可以根據使用的時間來判斷那個是你剛才從服務器下載過來的,一般小程序的文件不會太大(一般會有2-3個文件,那個大小達到1-2M的不是,你都可以反編譯出來看看),可以結合時間來判斷,長按壓縮所選文件,然后再將壓縮好的包通過QQ發送到我的電腦,如果不進行壓縮的話,是無法將這個文件通過QQ來發送的。所以QQ的這個功能可以讓我們很方便的拿到源文件,而不必到電腦目錄去找模擬器的文件目錄。解壓。這樣幾步簡單操作,就成功拿到了小程序的源文件了。
使用反編譯腳本解包 wxapkg
到這里你應該已經將反編譯腳本從github下載或者clone到本地某個目錄(建議采用此種方式gitee上下載反編譯包)
一
二
三
-
打開nodejs命令窗口,按住shift+右擊
-
cd 到你clone或者下載好的反編譯腳本目錄下
-
在node命令窗口中依次安裝如下依賴(當然,你也可以選擇-g全局安裝):
1、npm install esprima
2、npm install css-tree
3、npm install cssbeautify
4、npm install vm2
5、npm install uglify-es
6、npm install js-beautify
-
安裝好依賴之后,就是最后一步了,反編譯 .wxapkg 文件
在當前目錄下輸入 node wuWxapkg.js [-d] //files 就是你想要反編譯的文件名 例如:我有一個需要反編譯的文件 _163200311_32.wxapkg 已經解壓到了C盤根目錄下,那么就輸出命令 node wuWxapkg.js C:_163200311_32.wxapkg -
回車運行,反編譯腳本就能一步將.wxapkg 文件還原為微信開發者工具能夠運行的源文件,目錄地址和你反編譯的文件地址是一樣的 然后在微信開發者工具新增項目即可打開?
不,注意,截止到目前並沒完全結束,你現在打開肯定是不成功的,因為編譯后的文件是不帶appid項目配置文件的,因此,你需要注冊個微信小程序開發者賬號,然后生成一個小程序,接着項目中會有一個project.config.json文件,直接拿到當前源碼中即可,並且你需要在小程序開發者工具中勾選https校驗。另外值得一提的是,編譯后的文件會經過專業格式化插件格式化,.js文件源碼的var、let、const變量名字會替換成a、b、c這種命名形式。到此,整個教程完全結束!