首先聲明：
- 以下所有內容僅是對微信小程序weapp的個人研究，僅有參考價值，不確保正確；
- 以下所有內容僅用於交流學習，不能做其他用途，歡迎大咖指點
其他
- 以下簡稱wa(weapp, 微信小程序)
一. wa的運行環境
根據微信官方的說明，wa的運行環境有3個平臺，IOS的webkit（蘋果開源的瀏覽器內核），Android的X5(QQ瀏覽器內核)，開發時用的nw.js（C++實現的web轉桌面應用）；
二. 爲什麼wa不直接運行在瀏覽器（webview）中，而要繞過瀏覽器直接調用內核呢？
因爲運行在瀏覽器中的webapp是做不了監控的，而wa的表現是半native app，半web app，而native app與web app和一個很重要的區別就是native app有自己的生命週期，在這之中，我們可以根據生命週期的不同時間段做出不同的調整，比如常駐內存，防止被系統殺掉，系統後臺保存活度等等，而web app就沒有這回事了，僅僅能夠根據事件做出不同的調整，跟原生app比起來，體驗就差了一些。基於此，wa當然不會像web app一樣了，他需要有自己的生命週期。
本質上來說，wa還是運行在瀏覽器模式中，而承載wa的系統就是微信，用微信來管理wa的生命週期。而微信，現在本身就是一個系統。
微信官方貼出來的生命週期函數主要有以下3個：onLaunch（初始化完成），onShow（啓動時，後由後臺進入前臺），onHide（由前臺進入後臺）
三. wa的本質是什麼
wa的本質就是富單頁面web應用。首先，一個wa應用程序就是一個單頁面應用，所有的頁面渲染和事件處理，都在一個頁面內進行，但與傳統的webapp不同的是，它也可以做得很豐富，就像native app一樣，可以調用原生的各種接口，像網絡狀態、羅盤，重力，撥打電話
四. wa的wxml, wxss與html, css之間的關係
理解了wa的本質，基本上就應該比較清楚的wxml, wxss與html, css之間的關係了。很明顯，wxml就是wa的模板語言，在正式部署的時候，會轉化成HTML語言，而wxss則會轉化爲css；
那他們又是怎麼轉化的呢？wxml轉化爲html用的是reactjs，包括裏面整套的邏輯都是建構在reactjs之上的；而wxss與css基本上沒有任何不同，除了wa使用的長度單位是rpx之外。
加個題外話：微信官方定義的手機整個寬度是750rpx，但我覺得定位375rpx似乎更爲恰當（理由與本主題無關，略）。
五. 小程序的生命週期與調用系統的api是如何實現的
這個就得依賴WeixinJSBridge.js這個腳本了，所有的關鍵都在這個腳本上。wa通過這個腳本調用原生的接口，而微信用這個腳本來管理wa，包括它的生命週期。這裏只談原理就不貼代碼了。Android可以參考JsBridge，IOS可以參考WebViewJavascriptBridge
六. 傳統的js庫能用嗎
大部分都不行。官方的解釋是
頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境所以不能使用bom相關的對象。而依賴bom的常用的比如說jQuery就無能爲力了。這種說法太牽強了。實際上，這是故意爲之的。wa正式部署使用webpack打的包，而在打包的過程中，把以下變量給屏蔽了：
window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket自然你就訪問不了bom對象啦，當然其他很多對象也不能訪問啦。這些對象如果訪問，就是undefined。
爲什麼要這樣做呢？還不是爲了管理和監控嘛。如果這些對象你能訪問，那麼你就可以像操作通常的網頁一樣操作wa，這是絕對不被允許的，所以，你懂的。
具體是怎麼屏蔽的，帖段代碼：
define("...", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){});七. 在native app中是如果實現多個應用的多個生命週期的
我的想法是微信在內部維持了一個棧，用來裝載wa，而且會記錄一些信息，方便管理。但這個棧比較特別，沒有先後順序，僅僅是坐個排排而已。至於這個棧是在native中實現還是在web中實現，目前還不得而知。
另外
轉載隨意，但請註明@senntyou