微信小程序使用了前端技術棧 JavaScript/WXML/WXSS。它背后的原理是怎么樣的呢？
微信小程序使用了前端技術棧 JavaScript/WXML/WXSS。但和常規(guī)的前端開發(fā)又有一些區(qū)別：
JavaScript: 微信小程序的 JavaScript 運行環(huán)境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中料扰，不能操作 Browser context 下的 DOM，也不能通過 Node.js 相關接口訪問操作系統(tǒng) API焙蹭。所以晒杈，嚴格意義來講，微信小程序并不是 Html5孔厉，雖然開發(fā)過程和用到的技術棧和 Html5 是相通的拯钻。
WXML: 作為微信小程序的展示層，并不是使用 Html烟馅，而是自己發(fā)明的基于 XML 語法的描述说庭。
WXSS: 用來修飾展示層的樣式然磷。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套樣式語言郑趁，用于描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎么顯示姿搜」讶螅” “我們的 WXSS 具有 CSS 大部分特性...我們對 CSS 進行了擴充以及修改捆憎。”基于 CSS2 還是 CSS3梭纹？大部分是哪些部分躲惰？是否支持 CSS3 里的動畫？不得而知变抽。
在微信小程序官方文檔上础拨，有下面這段話：
微信小程序運行在三端：iOS、Android 和 用于調試的開發(fā)者工具
在 iOS 上绍载，小程序的 javascript 代碼是運行在 JavaScriptCore 中
在 Android 上诡宗，小程序的 javascript 代碼是通過 X5 內核來解析
在 開發(fā)工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中
我們先從開發(fā)工具談起击儡。
開發(fā)工具
小程序的 javascript 代碼運行在 nwjs 中塔沃。nwjs 是什么鬼呢？官方介紹是這樣寫的：
nwjs?合并 Browser 和 Node.js 的運行時阳谍，可以使用前端開發(fā)技術來開發(fā)跨平臺的應用程序蛀柴。借助 Node.js 訪問操作系統(tǒng)原生 API 的能力，可以開發(fā)中跨平臺的應用程序矫夯。微信小程序開發(fā)工具就是使用 nwjs 開發(fā)的鸽疾。如果你是 Mac 用戶，進入目錄?/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app?可以看到開發(fā)工具的實現代碼训貌，當然代碼是經過混淆的肮韧。網上流行的破解版本開發(fā)工具原理上就是修改這里面的代碼。
與此類似的旺订，一個更火的項目是?Electron弄企，由 GitHub 推出的，它也是把 Browser 和 Node.js 結合区拳，用來開發(fā)跨平臺的應用程序拘领。程序員們應該聽說過?Atom?這個編輯器界的后起之秀。包括微軟擁抱開源社區(qū)的編輯器?vscode?也是使用 Electron 開發(fā)的樱调。
Electron vs nwjs
這兩個平臺有什么區(qū)別约素？為什么微信選擇 nwjs 呢？我們不妨猜一猜笆凌。
從技術角度來講：
應用程序入口不同：Electron 入口是一個 javascript 腳本圣猎，腳本里要自己負責創(chuàng)建瀏覽器窗口，加載 html 頁面乞而。而 nwjs 的入口就是一個 html 頁面送悔，框架自己會創(chuàng)建瀏覽器窗口來顯示這個 html 頁面。
Node.js 集成方式不同：Electron 直接使用 Node.js 的共享庫，不需要修改 Chromium 代碼欠啤。而 nwjs 為了集成 Node.js 荚藻，需要修改 Chromium 代碼，以便在瀏覽器里能通過 Node.js 訪問系統(tǒng)原生 API洁段。
Multi-Context: nwjs 有多個上下文应狱，一個是瀏覽器的上下文，用來訪問 Browser 相關 API祠丝，比如操作 DOM 疾呻，另外一個是 Node 上下文，用來訪問操作系統(tǒng) API写半。Electron 沒有使用多個上下文罐韩，對開發(fā)者更友好。
從應用角度來講：
打包后的文件大形坌唷：Electron 打包后文件會比 nwjs 小不少散吵。一個 18M 的程序，使用 Electron 打包后是 117M蟆肆，而使用 nwjs 打包后的程序是 220M矾睦。微信小程序開發(fā)工具打包后是 219M (v0.10.102800)。沒有親測炎功，評價來源參考文檔枚冗。
代碼保護：Electron 只支持代碼混淆來保護，而 nwjs 把核心代碼放在 V8 引擎里蛇损，不但可以保護代碼赁温，還可以提高執(zhí)行效率。
開源社區(qū)活躍度：Electron 應該是完勝的淤齐」赡遥看看使用 Electron 構建的應用程序就知道了。而據說 nwjs 的開發(fā)文檔有些都沒有及時更新更啄。
應用程序啟動時間：Electron 會稍微快一點稚疹。沒有親測，評價來源參考文檔祭务。
從這個分析猜測内狗，微信選擇 nwjs 的原因可能是出于代碼保護。畢竟開發(fā)工具可以上傳小程序义锥，有些接口和數據需要比較嚴密的保護柳沙。哪位大牛可以挖挖看哪些代碼被保護起來了拌倍。
真機運行環(huán)境
下面內容完全是猜測的赂鲤，如有言中噪径，實屬運氣。
微信小程序的運行環(huán)境應該更類似 ReactNative 之類蛤袒，而不是純 Html5熄云。兩者最大的不同在于膨更，ReactNative 的界面是由原生控件渲染出來的妙真，而 Html5 的界面是由瀏覽器內核渲染出來的。兩者在性能上有較大的差異荚守，感興趣的可以參閱我的另外一篇文章《跨平臺 App 開發(fā)技術方案匯總》珍德。
原理上，小程序是如何在微信 App 里運行的呢矗漾？
微信 App 里包含 javascript 運行引擎锈候。
微信 App 里包含了 WXML/WXSS 處理引擎，最終會把界面翻譯成系統(tǒng)原生的控件敞贡，并展示出來泵琳。這樣做的目的是為了提供和原生 App 性能相當的用戶體驗。
我們來意淫一下小程序加載運行的過程：
用戶點擊打開一個小程序
微信 App 從微信服務器下載這個小程序
分析?app.json?得到應用程序的配置信息（導航欄誊役，窗口樣式获列，包含的頁面列表等）
加載并運行?app.js
加載并顯示在?app.json?里配置的第一個頁面
這個只是從開發(fā)者眼中看到的一個簡化版的過程，實際過程應該比這要復雜得多蛔垢，涉及到瀏覽器線程（就是運行我們的邏輯層代碼 app.js 等的線程）和 AppService 線程之間的交互击孩。從官方網站上的一個圖片可以看出端倪：
生命周期
至于微信 App 是如何與小程序的邏輯層 javascript 交互的呢？可以簡單地歸納如下：
JavaScript 是腳本語言鹏漆，可以在運行時解釋并執(zhí)行巩梢。微信 App 里包含了一個 JavaScript 引擎，由它來負責執(zhí)行邏輯層的 JavaScript 代碼艺玲。那么 JavaScript 調用的小程序相關 API 怎么實現的呢括蝠？答案是最終會被翻譯成實現在微信 App 里的原生接口。比如開發(fā)者調用?wx.getLocation(OBJECT)獲取當前地理位置饭聚，微信 App 里的 JavaScript 引擎在執(zhí)行這個代碼時又跛，會去調用微信 App 里實現的原生接口來獲取地理位置坐標。
有任何疑惑加群QQ786276452
對前端的技術若治，架構技術感興趣的同學關注我的頭條號慨蓝，并在后臺私信發(fā)送關鍵字：“前端”即可獲取免費的架構師學習資料
知識體系已整理好（源碼，筆記端幼，PPT礼烈，學習視頻），歡迎免費領取婆跑。還有面試視頻分享可以免費獲取此熬。關注我，可以獲得沒有的架構經驗哦！犀忱！
