【轉】微信小程序原理

微信小程序原理

 

kamidox 關注

2016.11.05 09:42* 字數 2356 閱讀 14621評論 5喜歡 75讚揚 1

微信小程序使用了前端技術棧 JavaScript/WXML/WXSS。它背後的原理是怎麼樣的呢？

寫在前面

微信小程序使用了前端技術棧 JavaScript/WXML/WXSS。但和常規的前端開發又有一些區別：

• JavaScript: 微信小程序的 JavaScript 運行環境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中，不能操做 Browser context 下的 DOM，也不能經過 Node.js 相關接口訪問操做系統 API。因此，嚴格意義來說，微信小程序並非 Html5，雖然開發過程和用到的技術棧和 Html5 是相通的。
• WXML: 做爲微信小程序的展現層，並非使用 Html，而是本身發明的基於 XML 語法的描述。
• WXSS: 用來修飾展現層的樣式。官方的描述是 「 WXSS (WeiXin Style Sheets) 是一套樣式語言，用於描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎麼顯示。」 「咱們的 WXSS 具備 CSS 大部分特性...咱們對 CSS 進行了擴充以及修改。」基於 CSS2 仍是 CSS3？大部分是哪些部分？是否支持 CSS3 裏的動畫？不得而知。

在微信小程序官方文檔上，有下面這段話：

微信小程序運行在三端：iOS、Android 和 用於調試的開發者工具

• 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
• 在 Android 上，小程序的 javascript 代碼是經過 X5 內核來解析
• 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中

咱們先從開發工具談起。

開發工具

小程序的 javascript 代碼運行在 nwjs 中。nwjs 是什麼鬼呢？官方介紹是這樣寫的：

NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.

nwjs 合併 Browser 和 Node.js 的運行時，可使用前端開發技術來開發跨平臺的應用程序。藉助 Node.js 訪問操做系統原生 API 的能力，能夠開發中跨平臺的應用程序。微信小程序開發工具就是使用 nwjs 開發的。若是你是 Mac 用戶，進入目錄 /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app 能夠看到開發工具的實現代碼，固然代碼是通過混淆的。網上流行的破解版本開發工具原理上就是修改這裏面的代碼。

與此相似的，一個更火的項目是 Electron，由 GitHub 推出的，它也是把 Browser 和 Node.js 結合，用來開發跨平臺的應用程序。程序員們應該據說過 Atom 這個編輯器界的後起之秀。包括微軟擁抱開源社區的編輯器 vscode 也是使用 Electron 開發的。

Electron vs nwjs

這兩個平臺有什麼區別？爲何微信選擇 nwjs 呢？咱們不妨猜一猜。

從技術角度來說：

• 應用程序入口不一樣：Electron 入口是一個 javascript 腳本，腳本里要本身負責建立瀏覽器窗口，加載 html 頁面。而 nwjs 的入口就是一個 html 頁面，框架本身會建立瀏覽器窗口來顯示這個 html 頁面。
• Node.js 集成方式不一樣：Electron 直接使用 Node.js 的共享庫，不須要修改 Chromium 代碼。而 nwjs 爲了集成 Node.js ，須要修改 Chromium 代碼，以便在瀏覽器裏能經過 Node.js 訪問系統原生 API。
• Multi-Context: nwjs 有多個上下文，一個是瀏覽器的上下文，用來訪問 Browser 相關 API，好比操做 DOM ，另一個是 Node 上下文，用來訪問操做系統 API。Electron 沒有使用多個上下文，對開發者更友好。

從應用角度來說：

• 打包後的文件大小：Electron 打包後文件會比 nwjs 小很多。一個 18M 的程序，使用 Electron 打包後是 117M，而使用 nwjs 打包後的程序是 220M。微信小程序開發工具打包後是 219M (v0.10.102800)。沒有親測，評價來源參考文檔。
• 代碼保護：Electron 只支持代碼混淆來保護，而 nwjs 把核心代碼放在 V8 引擎裏，不但能夠保護代碼，還能夠提升執行效率。
• 開源社區活躍度：Electron 應該是完勝的。看看使用 Electron 構建的應用程序就知道了。而聽說 nwjs 的開發文檔有些都沒有及時更新。
• 應用程序啓動時間：Electron 會稍微快一點。沒有親測，評價來源參考文檔。

從這個分析猜想，微信選擇 nwjs 的緣由多是出於代碼保護。畢竟開發工具能夠上傳小程序，有些接口和數據須要比較嚴密的保護。哪位大牛能夠挖挖看哪些代碼被保護起來了。

真機運行環境

下面內容徹底是猜想的，若有言中，實屬運氣。

微信小程序的運行環境應該更相似 ReactNative 之類，而不是純 Html5。二者最大的不一樣在於，ReactNative 的界面是由原生控件渲染出來的，而 Html5 的界面是由瀏覽器內核渲染出來的。二者在性能上有較大的差別，感興趣的能夠參閱個人另一篇文章《跨平臺 App 開發技術方案彙總》。

原理上，小程序是如何在微信 App 裏運行的呢？

• 微信 App 裏包含 javascript 運行引擎。
• 微信 App 裏包含了 WXML/WXSS 處理引擎，最終會把界面翻譯成系統原生的控件，並展現出來。這樣作的目的是爲了提供和原生 App 性能至關的用戶體驗。

咱們來意淫一下小程序加載運行的過程：

• 用戶點擊打開一個小程序
• 微信 App 從微信服務器下載這個小程序
• 分析 app.json 獲得應用程序的配置信息（導航欄，窗口樣式，包含的頁面列表等）
• 加載並運行 app.js
• 加載並顯示在 app.json 裏配置的第一個頁面

這個只是從開發者眼中看到的一個簡化版的過程，實際過程應該比這要複雜得多，涉及到瀏覽器線程（就是運行咱們的邏輯層代碼 app.js 等的線程）和 AppService 線程之間的交互。從官方網站上的一個圖片能夠看出端倪：

生命週期

至於微信 App 是如何與小程序的邏輯層 javascript 交互的呢？能夠簡單地概括以下：

JavaScript 是腳本語言，能夠在運行時解釋並執行。微信 App 裏包含了一個 JavaScript 引擎，由它來負責執行邏輯層的 JavaScript 代碼。那麼 JavaScript 調用的小程序相關 API 怎麼實現的呢？答案是最終會被翻譯成實如今微信 App 裏的原生接口。好比開發者調用 wx.getLocation(OBJECT) 獲取當前地理位置，微信 App 裏的 JavaScript 引擎在執行這個代碼時，會去調用微信 App 裏實現的原生接口來獲取地理位置座標。

感興趣的朋友能夠閱讀我以前推薦過的一篇文章《React Native 從入門到原理》。文章分析的雖然是 ReactNative，但實際上原理是相通的。

總結

微信小程序最大的好處是不須要作設備適配，只要微信能運行，小程序就能運行。小程序雖然是一個封閉形態下的前端開發技術，但藉助微信的巨大影響力，幾乎全部人都在往裏面衝。微信小程序太火了，內測火，公測更火。內測剛出來，就有人用微信小程序實現了商城，並開源。感嘆一下：你的熱情，就像一把火，燃燒了整個沙漠。

做爲開發者，提幾個不足：

1. 不支持從 node_modules 中加載模塊。這樣無形中就把 npm 排除在外了。從開發生態角度，這個應該是微信小程序下一步要重點解決的問題吧。
2. 開發工具自帶的代碼編輯器仍是太簡陋了。不知道爲何微信要重複發明輪子。理論上，給流行的代碼編輯器 (sublime/atom/vscode etc.) 開發個插件。而後用戶直接到小程序後臺上傳提交審覈就行了。程序員是挑剔到近乎偏執的物種，代碼編輯器又是程序員時刻打交道的工具，要作好實屬不易。