實(shí)現(xiàn)微信小程序編譯和運(yùn)行環(huán)境系列 (初始篇)

前言

最近一段時(shí)間在研究實(shí)現(xiàn)微信小程序和小游戲編譯打包和運(yùn)行環(huán)境平臺(tái)開(kāi)發(fā)。

目前基本可以支持微信基礎(chǔ)庫(kù) 2.8.2 功能迭代了。

所以想通過(guò)記錄分享一下自己的認(rèn)知過(guò)程中遇到的一些問(wèn)題和解決方案來(lái)更好的理解小程序設(shè)計(jì)上的優(yōu)點(diǎn)和一些不足的地方。

在此之前網(wǎng)上有存在開(kāi)源的一些基于微信基礎(chǔ)庫(kù)版本 1.0 的一些參考。核心作者是由開(kāi)源大牛 啟明兄 的 wept 項(xiàng)目基礎(chǔ)上構(gòu)建的 (目前有幸和啟明兄成為同事對(duì)這個(gè)小程序整體的架構(gòu)理解幫助了我很多)。

由于 wept 的運(yùn)行環(huán)境是基于微信基礎(chǔ)庫(kù) 1.0 的版本上實(shí)現(xiàn)之后也不維護(hù)了，時(shí)間上是 2016 的在后續(xù)的更新的版本中新加的一些特性如自定義組件 npm 包很多 api 等開(kāi)發(fā)實(shí)現(xiàn)都不支持，最主要是的微信在后續(xù)架構(gòu)中更換底層的通信方式采用了 webstock 的方式等一些其他變化。

正文

后面我會(huì)通過(guò)幾篇文章來(lái)整體描述一下從工具到破解到源碼解析和原理到實(shí)現(xiàn)的處理流程

最開(kāi)始的時(shí)候也在網(wǎng)上找了很多的資料，看了有一些人寫的解析微信小程序架構(gòu)的文章，從中學(xué)習(xí)了解了很多，

但如果想模擬實(shí)現(xiàn)出來(lái)這么個(gè)東西還是有蠻迷糊的，所以我想通過(guò)我們所實(shí)現(xiàn)的過(guò)程來(lái)一點(diǎn)點(diǎn) 從現(xiàn)象 看本質(zhì) 來(lái)解析下微信小程序編譯和運(yùn)行原理。

凡事對(duì)自己多點(diǎn)信心，多堅(jiān)持下，多學(xué)習(xí)下，想想我們遇到的問(wèn)題，當(dāng)時(shí)感覺(jué)我，搞不定了，弄不了，最后隨著時(shí)間的推移和認(rèn)知的迭代問(wèn)題總會(huì)慢慢消滅掉。

本文將先通過(guò)全面解析微信開(kāi)發(fā)者工具來(lái)知道那些基本的文件和內(nèi)容組成一一講述 (從現(xiàn)象 看本質(zhì))。

在此之前我們通過(guò)官方文檔可以了解一些內(nèi)容

• 整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）；

• 小程序提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS；

• 基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)他們兩個(gè)線程里運(yùn)行；

• 視圖層使用 WebView 渲染，邏輯層使用 JSCore 運(yùn)行， 視圖層和邏輯層通過(guò)系統(tǒng)層的 JSBridage 進(jìn)行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁(yè)面更新，

  視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。

從上述說(shuō)明中我們可以得知一些重要信息邏輯層（App Service）和 視圖層（View） 以及兩者之間的通信協(xié)調(diào)。

下面通過(guò)微信開(kāi)發(fā)工具來(lái)展示說(shuō)明，小程序邏輯層的 javascript 代碼是運(yùn)行在 NW.js 中，視圖層是由 Chromium 60 Webview 來(lái)渲染的

他們之間是通過(guò) webstock 協(xié)議來(lái)通信的。

以下我們主要是以 mac 環(huán)境為主

我們先打開(kāi) 微信開(kāi)發(fā)工具官方 demo 如圖：

從上圖和我們的一些理解我們知道微信小程序的文件格式主要組成：

• .js 主要頁(yè)面邏輯；
• .wxml 頁(yè)面結(jié)構(gòu)，框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)；
• .wxss 是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式；
• .json 頁(yè)面配置按照『約定優(yōu)于配置』的原則。

接下來(lái)我們先找到本機(jī)微信開(kāi)發(fā)者工具應(yīng)用包里面如圖

我們后面分析的主要代碼都在 package.nw 里面和 core.wxvpkg。

這些文件在后面實(shí)現(xiàn)過(guò)程中都會(huì)使用說(shuō)明用途的。

• js 文件里面的內(nèi)容主要是在頁(yè)面和邏輯層的渲染用，后面將會(huì)看到；
• core.wxvpkg 是這個(gè)里面的核心文件破解這個(gè)包可以知道很多邏輯可以先給大家看下解壓后包的結(jié)構(gòu)：

core.wxvpkg 解壓代碼上傳在 unwxvpkg 大家有興趣可以自己先試試。

接下來(lái)我們回到開(kāi)發(fā)者工具中打開(kāi)：

微信開(kāi)發(fā)者工具–》調(diào)試–》調(diào)試微信開(kāi)發(fā)者工具

打開(kāi)調(diào)試后我們可以看到的界面如下：

從上面的現(xiàn)象我們可以看出他的兩層渲染層和邏輯層結(jié)構(gòu)是包含在兩個(gè) webview 里面

第一個(gè)對(duì)應(yīng)的 webview 是渲染層的每個(gè)頁(yè)面都對(duì)應(yīng)一個(gè)地址

但邏輯層 appservice 只有一個(gè)不變的

下來(lái)我們可以看看這個(gè) webview 里面是個(gè)什么東

如果我們直接把 view 層的 webview 標(biāo)簽改成 iframe 的話

可以看到微信就直接不在里面展示給你頁(yè)面白屏了

如果你更改 appservice 的 webview 的話微信還會(huì)給你各種 alert 彈框，反正應(yīng)該就是不想讓你分析他的代碼

點(diǎn)擊確定消都消不了只能重新重啟編譯了 有點(diǎn)小惡心啊

居然不讓我們正大光明的看，那我們只能搞一些旁門左道來(lái)破壞了

我們第一步還是打開(kāi)：微信開(kāi)發(fā)者工具–》調(diào)試–》調(diào)試微信開(kāi)發(fā)者工具

在控制臺(tái)輸入

 復(fù)制代碼

document.getElementsByTagName('webview')

可以看到對(duì)應(yīng)的有 4 個(gè) webview, 我們先要關(guān)注的是第一個(gè) webview 因?yàn)槟泓c(diǎn)開(kāi)可以發(fā)現(xiàn)第一個(gè)對(duì)應(yīng)的就是渲染層的 webview

后面的幾個(gè)可以先不關(guān)注，后續(xù)我們會(huì)詳解

然后我們執(zhí)行命令打開(kāi)第一個(gè) webview:

 復(fù)制代碼

document.getElementsByTagName('webview')[0].showDevTools(true,null)

可以看到如圖

現(xiàn)在我們就可以看到微信頁(yè)面渲染層的頁(yè)面結(jié)構(gòu)了

(這里說(shuō)明下本篇文章中文件里面的內(nèi)容每一個(gè)文件的來(lái)源和用途，我都會(huì)在后續(xù)章節(jié)中講解出來(lái) 因?yàn)槔锩嫔婕暗膬?nèi)容過(guò)多 我怕放在一篇文章里會(huì)太長(zhǎng)大家看了會(huì)厭煩，所以我會(huì)分為幾篇來(lái)說(shuō)明，后面的 appservice 和 一些基礎(chǔ)包和 WAWebview.js WAService.js 以及使用的同步 api 和請(qǐng)求在頁(yè)面的 appservice.js 等等，在本篇中只會(huì)簡(jiǎn)單描述出來(lái) 不做過(guò)多講解，后續(xù)會(huì)逐步更新)

上面的 webview 可以找到對(duì)應(yīng)的頁(yè)面層的結(jié)構(gòu)，那么 appservice 要怎么找到呢？

其實(shí)最簡(jiǎn)單的我們直接在首頁(yè)里面的控制臺(tái)打 document 就可以直接看到展示的邏輯層代碼

(我的做法是從寫了微信的 alert 和基礎(chǔ)庫(kù)的一些文件都可以看到這個(gè)結(jié)構(gòu))

注意點(diǎn)在微信小游戲里面微信重寫了 window 和 document 對(duì)象 所以不能直接按照我們平常操作頁(yè)面那樣使用

接下面我們看下微信小程序的基礎(chǔ)庫(kù)庫(kù)文件

方法是我們?cè)谑醉?yè)控制臺(tái)里面輸入 openVendor()

我們可以看到彈出的文件系統(tǒng)，這里面對(duì)應(yīng)的就是你選擇本地的

詳情 ==》調(diào)試基礎(chǔ)庫(kù) ==》選擇基礎(chǔ)庫(kù)版本

• .wxvpkg 文件就是每個(gè)基礎(chǔ)庫(kù)版本的包我們，解壓這個(gè)包我們可以看到他的組成；
• wcc 可執(zhí)行程序，用于將 wxml 轉(zhuǎn)為 view 模塊使用的 js；
• wcsc 可執(zhí)行程序，用于將 wxss 轉(zhuǎn)為 view 模塊使用的 css。

.wxvpkg 包里面這個(gè)基礎(chǔ)庫(kù)文件的 WAWebview.js 和 WAService.js，對(duì)應(yīng)這兩個(gè) webview 里面的 js 引用你可以仔細(xì)觀察下.wxvpkg 文件解包后的格式：

解壓.wxvpkg 格式包的代碼地址 github

對(duì)于 wcc 和 wcsc 源碼現(xiàn)在沒(méi)必要去研究他，但我們可以通過(guò)腳本劫持方法可以看到他運(yùn)行了什么命令操作

這里告訴大家一個(gè)方法劫持他的運(yùn)行命令

找到微信開(kāi)發(fā)者工具 wcc 和 wcsc 的地方然后新建兩個(gè)同名的腳本，然后把原文件從命名，然后重啟微信開(kāi)發(fā)者工具 一定要重啟不然不生效

wcc wcsca 劫持腳本代碼地址 github

然后我們到首頁(yè)控制臺(tái)還是輸入 openVendor() 可以看到輸出的文件

從上面這個(gè)圖就可以看出下面這個(gè)圖里面我們可以認(rèn)知到一些信息

• 首次加載的時(shí)候 wcc 執(zhí)行了 -ds -d - xc…和 -ds -d - cc…結(jié)構(gòu)的命令可以看到微信首次把所有.wxml 都執(zhí)行了
• 可以看到參數(shù)里面有個(gè)數(shù)字其實(shí)他對(duì)應(yīng)的有幾種.wxml 文件形式向只存在.wxml 和自定義組件等一些格式他是沒(méi)計(jì)算在內(nèi)的
• -xc -cc 其實(shí)對(duì)應(yīng)就是下面圖兩個(gè)邏輯層和渲染層里面的 js 方式

• 我發(fā)現(xiàn)當(dāng)我們修改一個(gè).wxml 里面一點(diǎn)改動(dòng)的時(shí)候，微信又會(huì)全部從新編譯執(zhí)行這些命令很耗時(shí)這點(diǎn)其實(shí)可以改進(jìn)的。
• 另一個(gè)微信開(kāi)發(fā)者工具感覺(jué)做的不友好的地方是大于 500KB 的 javascript 文件不做給你做 es6 轉(zhuǎn)換和壓縮，就算你設(shè)置了微信也不會(huì)給你轉(zhuǎn)，可以在 source 里面的資源可以看出。

wcc 執(zhí)行的命令最終生成的就是邏輯層和渲染層的 $gwxc() 方法里面的 js 代碼，大家可以自己手動(dòng)測(cè)試下就會(huì)發(fā)現(xiàn)。

wxss 生成的主要是渲染層 eval() 這一坨代碼

本篇只是簡(jiǎn)單描述了一些關(guān)鍵文件的描述。

后面我會(huì)對(duì)關(guān)鍵文件進(jìn)行一一分析描述下他具體做了什么，為什么用到它。

下一篇會(huì)給大家?guī)?lái)渲染層和邏輯層的具體頁(yè)面文件內(nèi)容結(jié)構(gòu)解析，以及 webstock 通信架構(gòu)在微信開(kāi)發(fā)者工具里面的運(yùn)用，可以先給大家看下。

其實(shí)他們之間的協(xié)調(diào)工作以及公開(kāi)對(duì)外的 wx. 對(duì)象上面的 api 都是通過(guò) websocket 協(xié)議消息實(shí)現(xiàn)的。