前言
距離上一篇初始篇過了一段時間,在初始篇裡面主要分享了微信小程式工具 和微信小程式的檔案組成
以及小程式架構的基本大綱和描述，看了第一篇的小夥伴應該大概知道了微信小程式執行時候各部分檔案職能了,如果不太瞭解的話可以再去看下
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的實現和在文章開頭說的案例分析和雲開發小遊戲架構分析相關，我打算放在下幾篇《核心篇》裡面來一一分享，本來打算放在一起的，但寫起來才發現雖然文字不多但考慮東西太多時間要很久，如果放在一起只是大概概括的話會很快少很多省時省力，但是感覺沒太大意義可能對一些想了解的同學沒有太大幫助，所以我就想通過我中途的過程和遇到的問題來分析可能會好理解一些
創作不易 點個贊支援一下就是動力！！
歡迎感謝持續關注！！！