實現微信小程序編譯和運行環境系列(進階篇)
前言
距離上一篇初始篇過了一段時間,在初始篇裏面主要分享了微信小程序工具 和微信小程序的文件組成
以及小程序架構的基本大綱和描述，看了第一篇的小夥伴應該大概知道了微信小程序運行時候各部分文件職能了,如果不太瞭解的話可以再去看下
github
csdn
進階篇內容主要從以下幾個方面來分享下微信小程序的架構
-
核心文件WAService.js WAWebview.js appservice.js的解析
和其他文件在邏輯層和渲染層的⚠️注意事項 -
websocket通信在微信小程序框架中的應用實現
-
通過幾個案例和部分代碼來實現自己的小程序運行環境
-
微信小程序雲開發和小遊戲架構初步分析(後續會持續更新)
正文
WAService.js文件
在第一篇裏面有講到WAService.js文件是在邏輯層模版頁面裏面引入的，但是沒有給予過多的介紹，
接下來主要分析下WAService.js的代碼組成，這個文件算是微信小程序基礎庫文件裏面很核心的文件了，所以微信對它的保護應該很到位了，微信通過了壓縮 編譯 打包後生成的一坨這個js文件(如下圖)
直接看完全沒什麼頭緒，看着頭很重！！
下面只有讓我們來一步一步分解它，讓它原形畢露
- 第一步讓它變得看起來稍微美一點，畢竟大家都喜歡美一點的人事物，
既然有需求那肯定有解決方案，所以給大家推薦一個工具包js-beautify,可以先讓代碼看起來比原來漂亮很多
直接執行命令(不要對他抱太大期望，美化後的不可能讓你一步到位，還是要慢慢咔哧咔哧)
js-beautify ./WAService.js -r
美化後的代碼
- 看着花花綠綠的還是要舒心很多，但是畢竟人家是一個6萬多行編譯後的大物，想看明白不是一件易事，但我們還是要和它死磕來慢慢消耗它，接下里給大家介紹下個我
比較笨也是蠻傻逼的一種方案就是一點點有策略性的手動給他反編譯過來(中間的過程只有經歷後才能明白其中的痛啊)
不過看到結果還是蠻欣慰的
先給大家看下最終大部分解出來的編譯文件如下圖
上面的圖是通過分析代碼還原的一些人看的代碼，然後分類的
在網上我有看到有人說通過一些工具對 WAService.js 進行格式化後進行 debug來分析，這種方式也是ok的但是有一些門檻問題，對於一些同學來說不太方便也不太能處理，因爲你沒有調試這些文件的運行環境，在微信開發者工具裏面你是看不到WAService.js文件的更不要說去調試了，如果非要在開發者工具調試的話方法也是有的，要通過修改微信開發者工具客戶端的代碼纔可以但是一般都不知道怎麼去修改基礎庫代碼
下面介紹一個好理解但是有點痛苦的方式，比較清晰的一個操作是在上面我們讓它變得美一點了，現在讓它變得有條理一些，推薦使用vscode格式化後進行方法摺疊
這樣一看其實很清晰了我們可以看到這些我們常聽說的一些微信對象，WeixinJSBridge、 NativeBuffer、 wxConsole、 WeixinWorker、Reporter、VirtualDom等對象都打包一起了，
然後看到對象裏面有很多個function(e,t,n)文件對應的就是每個暴露的方法，下面要做的就是把這些方法的代碼手動編譯過來，可以給大家一個案例演示下
下圖這個是VirtualDom對象文件裏面的一個方法
下圖的是上面的代碼改成我們正常人讀的代碼
這個過程對你的js水平要有一定要求的，如果你基礎不紮實和了解怎麼應用的話，還原起來可能會很吃力的，如果你可以完整的編譯這些文件的話，你的js水平完全可以超越大部分人
可以先給大家簡單分析一點非技術層面的一些疑問，具體的技術層面編譯過程，可以熟悉js整個編譯歷史，和es6轉es5的方式推薦大家熟悉下babel源碼，可以有很多收穫 由於本人也還比較小白（高手可以忽略這點）
大家可以看到
var i=n(22)我改成了const DomIndex=require(’./domIndex’)
這個語句語意可能很多人都可以理解，但我爲什麼把22這個文件寫成DomIndex，
其實這裏面的變量和命名和對應的文件都不是自己想當然的，這個可以在文件中進行分析得到的，具體怎麼分析的這裏不過多介紹了，內容就太多了有興趣可以留言討論
使用對 WAService.js文件分析可以看出大致有 ： WeixinJSBridge、 NativeBuffer、 wxConsole、 WeixinWorker、 Reporter、 wx、 exparser、 virtualDOM、 appServiceEngine 等對象組成的
WAWebview.js文件
這個大致和WAService.js文件分析方式一樣，大家感興趣的可以自行嘗試下，留給大家自己研究，理解的肯定比我寫出來的要深刻很多
appservice.js文件
這個文件分析的結果可以讓我們看到一些浮出水面的東西來，但這個過程比較曲折開始
在微信小程序工具的渲染層和邏輯層裏面和微信基礎庫都沒有發現這個文件，說明可能是運行時注入進去的(猜測的)，
後來在sources裏面有發現這個文件
但是文件是空的，頁面資源和network裏面都沒有找到對應的文件，一時比較絕望，後來就一直瞎折騰半天后，終於在工具包裏面appservice找到來這個類似文件，讓生活注入了一點希望
但是一打開還是這一坨不是人看的代碼，但奈何不看不行啊(阿彌陀佛)
通過分析研究發現，還是發現了一些蛛絲馬跡，看到了這個文件裏面存在webstocket和http通信方式，有通信說明就會和外界有關聯，於是大膽嘗試了在一些通信相關代碼的地方，修改了一點代碼和添加了日誌
標記三就是稍微在原來微信appservice.js的基礎上進行了一點修改，然後保存，期待這微信開發者工具上面會有一些不一樣的煙火🎆，但奈何關了又開，開了又關半天屁的變化都沒有，於是就產生了自我懷疑，難道不應該這樣嗎，但是還是感覺方向是對的，於是打算在試試終極解決方法《重啓電腦》,果然當我在打開開發者工具的時候看到了不一樣的煙火🎆，
在console裏面出現了耀眼的光芒，這裏應該算一個突破性進展吧！！！
看到api和返回的結果，發現這些其實就是微信提供對外的同步api,可以看到getSystemInfo走的其實是同步的方式，那微信還提供了getSystemInfoSync說明也是同步的，他們的底層實現都是同步的不知道這個api還提供這兩個接口有什麼意義 沒理解， 然後又試了下其他微信提供的同步方法發現都會出現在這裏，其他很多異步api的不會走這裏都是通過webstocket走的，這裏可以得出結論這些同步api請求都是通過/apihelper/assdk傳輸的，大家可以自己測試下攔截這個請求會發現更多內容。
至於這個文件和基礎庫的關聯和最核心的webstocket的實現和在文章開頭說的案例分析和雲開發小遊戲架構分析相關，我打算放在下幾篇《核心篇》裏面來一一分享，本來打算放在一起的，但寫起來才發現雖然文字不多但考慮東西太多時間要很久，如果放在一起只是大概概括的話會很快少很多省時省力，但是感覺沒太大意義可能對一些想了解的同學沒有太大幫助，所以我就想通過我中途的過程和遇到的問題來分析可能會好理解一些
原文地址github感覺有用的話點個star支持一下