寫在前面
微信小程序使用了前端技術(shù)棧 JavaScript/WXML/WXSS。但和常規(guī)的前端開發(fā)又有一些區(qū)別：
JavaScript: 微信小程序的 JavaScript 運(yùn)行環(huán)境即不是 Browser 也不是 Node.js。它運(yùn)行在微信 App 的上下文中，不能操作 Browser context 下的 DOM烂完，也不能通過 Node.js 相關(guān)接口訪問操作系統(tǒng) API抗楔。所以，嚴(yán)格意義來講诫咱，微信小程序并不是 Html5候味，雖然開發(fā)過程和用到的技術(shù)棧和 Html5 是相通的淹遵。 WXML: 作為微信小程序的展示層，并不是使用 Html负溪，而是自己發(fā)明的基于 XML 語法的描述。 WXSS: 用來修飾展示層的樣式济炎。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套樣式語言川抡，用于描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示须尚⊙碌蹋” “我們的 WXSS 具有 CSS 大部分特性...我們對(duì) CSS 進(jìn)行了擴(kuò)充以及修改∧痛玻”基于 CSS2 還是 CSS3密幔？大部分是哪些部分？是否支持 CSS3 里的動(dòng)畫撩轰？不得而知胯甩。
在微信小程序官方文檔上，有下面這段話：
微信小程序運(yùn)行在三端：iOS堪嫂、Android 和 用于調(diào)試的開發(fā)者工具
在 iOS 上偎箫，小程序的 javascript 代碼是運(yùn)行在 JavaScriptCore 中 在 Android 上，小程序的 javascript 代碼是通過 X5 內(nèi)核來解析 在 開發(fā)工具上皆串， 小程序的 javascript 代碼是運(yùn)行在 nwjs（chrome內(nèi)核） 中
我們先從開發(fā)工具談起淹办。
開發(fā)工具
小程序的 javascript 代碼運(yùn)行在 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 的運(yùn)行時(shí)怜森，可以使用前端開發(fā)技術(shù)來開發(fā)跨平臺(tái)的應(yīng)用程序。借助 Node.js 訪問操作系統(tǒng)原生 API 的能力谤牡，可以開發(fā)中跨平臺(tái)的應(yīng)用程序副硅。微信小程序開發(fā)工具就是使用 nwjs 開發(fā)的。如果你是 Mac 用戶翅萤，進(jìn)入目錄 /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app 可以看到開發(fā)工具的實(shí)現(xiàn)代碼想许，當(dāng)然代碼是經(jīng)過混淆的。網(wǎng)上流行的破解版本開發(fā)工具原理上就是修改這里面的代碼。
與此類似的流纹，一個(gè)更火的項(xiàng)目是 Electron糜烹，由 GitHub 推出的，它也是把 Browser 和 Node.js 結(jié)合漱凝，用來開發(fā)跨平臺(tái)的應(yīng)用程序疮蹦。程序員們應(yīng)該聽說過 Atom 這個(gè)編輯器界的后起之秀。包括微軟擁抱開源社區(qū)的編輯器 vscode 也是使用 Electron 開發(fā)的茸炒。
Electron vs nwjs
這兩個(gè)平臺(tái)有什么區(qū)別愕乎？為什么微信選擇 nwjs 呢？我們不妨猜一猜壁公。
從技術(shù)角度來講：
應(yīng)用程序入口不同：Electron 入口是一個(gè) javascript 腳本感论，腳本里要自己負(fù)責(zé)創(chuàng)建瀏覽器窗口，加載 html 頁面紊册。而 nwjs 的入口就是一個(gè) html 頁面比肄，框架自己會(huì)創(chuàng)建瀏覽器窗口來顯示這個(gè) html 頁面。 Node.js 集成方式不同：Electron 直接使用 Node.js 的共享庫囊陡，不需要修改 Chromium 代碼芳绩。而 nwjs 為了集成 Node.js ，需要修改 Chromium 代碼撞反，以便在瀏覽器里能通過 Node.js 訪問系統(tǒng)原生 API妥色。 Multi-Context: nwjs 有多個(gè)上下文，一個(gè)是瀏覽器的上下文遏片，用來訪問 Browser 相關(guān) API嘹害，比如操作 DOM ，另外一個(gè)是 Node 上下文吮便，用來訪問操作系統(tǒng) API吼拥。Electron 沒有使用多個(gè)上下文，對(duì)開發(fā)者更友好线衫。
從應(yīng)用角度來講：
打包后的文件大性淇伞：Electron 打包后文件會(huì)比 nwjs 小不少。一個(gè) 18M 的程序授账，使用 Electron 打包后是 117M枯跑，而使用 nwjs 打包后的程序是 220M。微信小程序開發(fā)工具打包后是 219M (v0.10.102800)白热。沒有親測敛助，評(píng)價(jià)來源參考文檔。 代碼保護(hù)：Electron 只支持代碼混淆來保護(hù)屋确，而 nwjs 把核心代碼放在 V8 引擎里纳击，不但可以保護(hù)代碼续扔，還可以提高執(zhí)行效率。 開源社區(qū)活躍度：Electron 應(yīng)該是完勝的焕数∩疵粒看看使用 Electron 構(gòu)建的應(yīng)用程序就知道了。而據(jù)說 nwjs 的開發(fā)文檔有些都沒有及時(shí)更新堡赔。 應(yīng)用程序啟動(dòng)時(shí)間：Electron 會(huì)稍微快一點(diǎn)识脆。沒有親測，評(píng)價(jià)來源參考文檔善已。
從這個(gè)分析猜測灼捂，微信選擇 nwjs 的原因可能是出于代碼保護(hù)。畢竟開發(fā)工具可以上傳小程序换团，有些接口和數(shù)據(jù)需要比較嚴(yán)密的保護(hù)悉稠。哪位大牛可以挖挖看哪些代碼被保護(hù)起來了艘包。
真機(jī)運(yùn)行環(huán)境
下面內(nèi)容完全是猜測的的猛，如有言中，實(shí)屬運(yùn)氣辑甜。
微信小程序的運(yùn)行環(huán)境應(yīng)該更類似 ReactNative 之類，而不是純 Html5袍冷。兩者最大的不同在于磷醋，ReactNative 的界面是由原生控件渲染出來的，而 Html5 的界面是由瀏覽器內(nèi)核渲染出來的胡诗。兩者在性能上有較大的差異邓线，感興趣的可以參閱我的另外一篇文章《跨平臺(tái) App 開發(fā)技術(shù)方案匯總》。
原理上煌恢，小程序是如何在微信 App 里運(yùn)行的呢骇陈？
微信 App 里包含 javascript 運(yùn)行引擎。 微信 App 里包含了 WXML/WXSS 處理引擎瑰抵，最終會(huì)把界面翻譯成系統(tǒng)原生的控件你雌，并展示出來。這樣做的目的是為了提供和原生 App 性能相當(dāng)?shù)挠脩趔w驗(yàn)二汛。
我們來意淫一下小程序加載運(yùn)行的過程：
用戶點(diǎn)擊打開一個(gè)小程序 微信 App 從微信服務(wù)器下載這個(gè)小程序 分析
app.json得到應(yīng)用程序的配置信息（導(dǎo)航欄婿崭，窗口樣式，包含的頁面列表等） 加載并運(yùn)行app.js加載并顯示在app.json里配置的第一個(gè)頁面
這個(gè)只是從開發(fā)者眼中看到的一個(gè)簡化版的過程肴颊，實(shí)際過程應(yīng)該比這要復(fù)雜得多氓栈，涉及到瀏覽器線程（就是運(yùn)行我們的邏輯層代碼 app.js 等的線程）和 AppService 線程之間的交互。從官方網(wǎng)站上的一個(gè)圖片可以看出端倪：
生命周期
至于微信 App 是如何與小程序的邏輯層 javascript 交互的呢婿着？可以簡單地歸納如下：
JavaScript 是腳本語言授瘦，可以在運(yùn)行時(shí)解釋并執(zhí)行醋界。微信 App 里包含了一個(gè) JavaScript 引擎，由它來負(fù)責(zé)執(zhí)行邏輯層的 JavaScript 代碼提完。那么 JavaScript 調(diào)用的小程序相關(guān) API 怎么實(shí)現(xiàn)的呢形纺？答案是最終會(huì)被翻譯成實(shí)現(xiàn)在微信 App 里的原生接口。比如開發(fā)者調(diào)用 wx.getLocation(OBJECT) 獲取當(dāng)前地理位置氯葬，微信 App 里的 JavaScript 引擎在執(zhí)行這個(gè)代碼時(shí)挡篓，會(huì)去調(diào)用微信 App 里實(shí)現(xiàn)的原生接口來獲取地理位置坐標(biāo)。
感興趣的朋友可以閱讀我之前推薦過的一篇文章《React Native 從入門到原理》帚称。文章分析的雖然是 ReactNative官研，但實(shí)際上原理是相通的。
總結(jié)
微信小程序最大的好處是不需要做設(shè)備適配闯睹，只要微信能運(yùn)行戏羽，小程序就能運(yùn)行。小程序雖然是一個(gè)封閉形態(tài)下的前端開發(fā)技術(shù)楼吃，但借助微信的巨大影響力始花，幾乎所有人都在往里面沖。微信小程序太火了孩锡，內(nèi)測火酷宵，公測更火。內(nèi)測剛出來躬窜，就有人用微信小程序?qū)崿F(xiàn)了商城浇垦，并開源。感嘆一下：你的熱情荣挨，就像一把火男韧，燃燒了整個(gè)沙漠。
作為開發(fā)者默垄，提幾個(gè)不足：
不支持從 node_modules 中加載模塊此虑。這樣無形中就把 npm 排除在外了。從開發(fā)生態(tài)角度口锭，這個(gè)應(yīng)該是微信小程序下一步要重點(diǎn)解決的問題吧朦前。 開發(fā)工具自帶的代碼編輯器還是太簡陋了。不知道為什么微信要重復(fù)發(fā)明輪子鹃操。理論上况既，給流行的代碼編輯器 (sublime/atom/vscode etc.) 開發(fā)個(gè)插件。然后用戶直接到小程序后臺(tái)上傳提交審核就好了组民。程序員是挑剔到近乎偏執(zhí)的物種棒仍，代碼編輯器又是程序員時(shí)刻打交道的工具，要做好實(shí)屬不易臭胜。
