微信小程序使用了前端技術(shù)棧 JavaScript/WXML/WXSS。但和常規的前端開(kāi)發(fā)又有一些區別：
-
JavaScript: 微信小程序的 JavaScript 運行環(huán)境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通過(guò) Node.js 相關(guān)接口訪(fǎng)問(wèn)操作系統 API。所以，嚴格意義來(lái)講，微信小程序并不是 Html5，雖然開(kāi)發(fā)過(guò)程和用到的技術(shù)棧和 Html5 是相通的。
-
WXML: 作為微信小程序的展示層，并不是使用 Html，而是自己發(fā)明的基于 XML 語(yǔ)法的描述。
-
WXSS: 用來(lái)修飾展示層的樣式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。WXSS 用來(lái)決定 WXML 的組件應該怎么顯示。” “我們的 WXSS 具有 CSS 大部分特性...我們對 CSS 進(jìn)行了擴充以及修改。”基于 CSS2 還是 CSS3？大部分是哪些部分？是否支持 CSS3 里的動(dòng)畫(huà)？不得而知。
在微信小程序官方文檔上，有下面這段話(huà)：
微信小程序運行在三端：iOS、Android 和 用于調試的開(kāi)發(fā)者工具
在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
在 Android 上，小程序的 javascript 代碼是通過(guò) X5 內核來(lái)解析
在 開(kāi)發(fā)工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中
我們先從開(kāi)發(fā)工具談起。
開(kāi)發(fā)工具
小程序的 javascript 代碼運行在 nwjs 中。nwjs 是什么鬼呢？官方介紹是這樣寫(xiě)的：
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 的運行時(shí)，可以使用前端開(kāi)發(fā)技術(shù)來(lái)開(kāi)發(fā)跨平臺的應用程序。借助 Node.js 訪(fǎng)問(wèn)操作系統原生 API 的能力，可以開(kāi)發(fā)中跨平臺的應用程序。微信小程序開(kāi)發(fā)工具就是使用 nwjs 開(kāi)發(fā)的。如果你是 Mac 用戶(hù)，進(jìn)入目錄 /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app 可以看到開(kāi)發(fā)工具的實(shí)現代碼，當然代碼是經(jīng)過(guò)混淆的。網(wǎng)上流行的破解版本開(kāi)發(fā)工具原理上就是修改這里面的代碼。
與此類(lèi)似的，一個(gè)更火的項目是 Electron，由 GitHub 推出的，它也是把 Browser 和 Node.js 結合，用來(lái)開(kāi)發(fā)跨平臺的應用程序。程序員們應該聽(tīng)說(shuō)過(guò) Atom 這個(gè)編輯器界的后起之秀。包括微軟擁抱開(kāi)源社區的編輯器 vscode 也是使用 Electron 開(kāi)發(fā)的。
Electron vs nwjs
這兩個(gè)平臺有什么區別？為什么微信選擇 nwjs 呢？我們不妨猜一猜。
從技術(shù)角度來(lái)講：
-
應用程序入口不同：Electron 入口是一個(gè) javascript 腳本，腳本里要自己負責創(chuàng )建瀏覽器窗口，加載 html 頁(yè)面。而 nwjs 的入口就是一個(gè) html 頁(yè)面，框架自己會(huì )創(chuàng )建瀏覽器窗口來(lái)顯示這個(gè) html 頁(yè)面。
-
Node.js 集成方式不同：Electron 直接使用 Node.js 的共享庫，不需要修改 Chromium 代碼。而 nwjs 為了集成 Node.js ，需要修改 Chromium 代碼，以便在瀏覽器里能通過(guò) Node.js 訪(fǎng)問(wèn)系統原生 API。
-
Multi-Context: nwjs 有多個(gè)上下文，一個(gè)是瀏覽器的上下文，用來(lái)訪(fǎng)問(wèn) Browser 相關(guān) API，比如操作 DOM ，另外一個(gè)是 Node 上下文，用來(lái)訪(fǎng)問(wèn)操作系統 API。Electron 沒(méi)有使用多個(gè)上下文，對開(kāi)發(fā)者更友好。
從應用角度來(lái)講：
-
打包后的文件大?。篍lectron 打包后文件會(huì )比 nwjs 小不少。一個(gè) 18M 的程序，使用 Electron 打包后是 117M，而使用 nwjs 打包后的程序是 220M。微信小程序開(kāi)發(fā)工具打包后是 219M (v0.10.102800)。沒(méi)有親測，評價(jià)來(lái)源參考文檔。
-
代碼保護：Electron 只支持代碼混淆來(lái)保護，而 nwjs 把核心代碼放在 V8 引擎里，不但可以保護代碼，還可以提高執行效率。
-
開(kāi)源社區活躍度：Electron 應該是完勝的?？纯词褂?Electron 構建的應用程序就知道了。而據說(shuō) nwjs 的開(kāi)發(fā)文檔有些都沒(méi)有及時(shí)更新。
-
應用程序啟動(dòng)時(shí)間：Electron 會(huì )稍微快一點(diǎn)。沒(méi)有親測，評價(jià)來(lái)源參考文檔。
從這個(gè)分析猜測，微信選擇 nwjs 的原因可能是出于代碼保護。畢竟開(kāi)發(fā)工具可以上傳小程序，有些接口和數據需要比較嚴密的保護。哪位大?？梢酝谕诳茨男┐a被保護起來(lái)了。
真機運行環(huán)境
下面內容完全是猜測的，如有言中，實(shí)屬運氣。
微信小程序的運行環(huán)境應該更類(lèi)似 ReactNative 之類(lèi)，而不是純 Html5。兩者最大的不同在于，ReactNative 的界面是由原生控件渲染出來(lái)的，而 Html5 的界面是由瀏覽器內核渲染出來(lái)的。兩者在性能上有較大的差異，感興趣的可以參閱我的另外一篇文章《跨平臺 App 開(kāi)發(fā)技術(shù)方案匯總》。
原理上，小程序是如何在微信 App 里運行的呢？
-
微信 App 里包含 javascript 運行引擎。
-
微信 App 里包含了 WXML/WXSS 處理引擎，最終會(huì )把界面翻譯成系統原生的控件，并展示出來(lái)。這樣做的目的是為了提供和原生 App 性能相當的用戶(hù)體驗。
我們來(lái)意淫一下小程序加載運行的過(guò)程：
-
用戶(hù)點(diǎn)擊打開(kāi)一個(gè)小程序
-
微信 App 從微信服務(wù)器下載這個(gè)小程序
-
分析 app.json 得到應用程序的配置信息（導航欄，窗口樣式，包含的頁(yè)面列表等）
-
加載并運行 app.js
-
加載并顯示在 app.json 里配置的第一個(gè)頁(yè)面
這個(gè)只是從開(kāi)發(fā)者眼中看到的一個(gè)簡(jiǎn)化版的過(guò)程，實(shí)際過(guò)程應該比這要復雜得多，涉及到瀏覽器線(xiàn)程（就是運行我們的邏輯層代碼 app.js 等的線(xiàn)程）和 AppService 線(xiàn)程之間的交互。從官方網(wǎng)站上的一個(gè)圖片可以看出端倪：
生命周期
至于微信 App 是如何與小程序的邏輯層 javascript 交互的呢？可以簡(jiǎn)單地歸納如下：
JavaScript 是腳本語(yǔ)言，可以在運行時(shí)解釋并執行。微信 App 里包含了一個(gè) JavaScript 引擎，由它來(lái)負責執行邏輯層的 JavaScript 代碼。那么 JavaScript 調用的小程序相關(guān) API 怎么實(shí)現的呢？答案是最終會(huì )被翻譯成實(shí)現在微信 App 里的原生接口。比如開(kāi)發(fā)者調用 wx.getLocation(OBJECT) 獲取當前地理位置，微信 App 里的 JavaScript 引擎在執行這個(gè)代碼時(shí)，會(huì )去調用微信 App 里實(shí)現的原生接口來(lái)獲取地理位置坐標。
感興趣的朋友可以閱讀我之前推薦過(guò)的一篇文章《React Native 從入門(mén)到原理》。文章分析的雖然是 ReactNative，但實(shí)際上原理是相通的。
總結
微信小程序最大的好處是不需要做設備適配，只要微信能運行，小程序就能運行。小程序雖然是一個(gè)封閉形態(tài)下的前端開(kāi)發(fā)技術(shù)，但借助微信的巨大影響力，幾乎所有人都在往里面沖。微信小程序太火了，內測火，公測更火。內測剛出來(lái)，就有人用微信小程序實(shí)現了商城，并開(kāi)源。感嘆一下：你的熱情，就像一把火，燃燒了整個(gè)沙漠。
作為開(kāi)發(fā)者，提幾個(gè)不足：
-
不支持從 node_modules 中加載模塊。這樣無(wú)形中就把 npm 排除在外了。從開(kāi)發(fā)生態(tài)角度，這個(gè)應該是微信小程序下一步要重點(diǎn)解決的問(wèn)題吧。
-
開(kāi)發(fā)工具自帶的代碼編輯器還是太簡(jiǎn)陋了。不知道為什么微信要重復發(fā)明輪子。理論上，給流行的代碼編輯器 (sublime/atom/vscode etc.) 開(kāi)發(fā)個(gè)插件。然后用戶(hù)直接到小程序后臺上傳提交審核就好了。程序員是挑剔到近乎偏執的物種，代碼編輯器又是程序員時(shí)刻打交道的工具，要做好實(shí)屬不易。
