微信小程序weapp的底層實現原理

首先聲明：

1. 如下全部內容僅是對微信小程序weapp的我的研究，僅有參考價值，不確保正確；
2. 如下全部內容僅用於交流學習，不能作其餘用途，歡迎大咖指點

其餘

1. 如下簡稱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是一個沒有窗口對象的環境

• 1

因此不能使用bom相關的對象。而依賴bom的經常使用的好比說jQuery就無能爲力了。這種說法太牽強了。實際上，這是故意爲之的。wa正式部署使用webpack打的包，而在打包的過程當中，把如下變量給屏蔽了：

window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket

• 1

天然你就訪問不了bom對象啦，固然其餘不少對象也不能訪問啦。這些對象若是訪問，就是undefined。

       爲何要這樣作呢？還不是爲了管理和監控嘛。若是這些對象你能訪問，那麼你就能夠像操做一般的網頁同樣操做wa，這是絕對不被容許的，因此，你懂的。 
       具體是怎麼屏蔽的，帖段代碼：

define("...", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){});

• 1

七. 在native app中是若是實現多個應用的多個生命週期的

       個人想法是微信在內部維持了一個棧，用來裝載wa，並且會記錄一些信息，方便管理。但這個棧比較特別，沒有前後順序，僅僅是坐個排排而已。至於這個棧是在native中實現仍是在web中實現，目前還不得而知。

另外

轉載隨意，但請註明@senntyou