只需兩步快速獲取微信小程序源碼


只需兩步快速獲取微信小程序源碼

第一次在掘金這樣高大上的社區寫文章,忐忑地敲下我獲取小程序源碼過程中的經驗分享。

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

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


簡單聊一下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文件里,轉編譯成看不懂的代碼,這樣,即使被獲取了源碼,也很難窺得蛛絲馬跡。

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

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

原文鏈接:行無忌的成長小屋:只需兩步快速獲取微信小程序源碼

再轉來自:https://juejin.im/post/5b0e431f51882515497d979f


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM