小程序架構

小程序上線以來，一貫被稱爲「便攜版」的APP，關於二者之間的區別，無外乎小程序相對輕便、開發成本低，下面讓咱們來看一下小程序的「廬山真面目」！

1、app的分類

大體能夠分爲這3種：

native app（原生app）、web app、hybrid app（混合app），關係以下圖：

2、什麼是小程序

小程序是介於web網頁應用和原生應用的一種產物；

小程序的特色：

3、小程序架構

• 視圖層和邏輯層分離，經過數據驅動，事件交互，不直接操做DOM

• 視圖層負責渲染頁面結構，邏輯層負責邏輯處理、數據請求、接口調用等

• 視圖層與邏輯層經過數據和事件進行通訊，邏輯層提供數據給視圖層，視圖層經過綁定/捕獲事件發起交互讓邏輯層處理

• 視圖使用WebView渲染，JS由JSCore(IOS)/X5(Android)/nmjs(DevTool)渲染解析

• JSBridge下架起上層開發與Native（系統層）的橋樑，使得小程序可經過API使用原生的功能，且部分組件爲原生組件實現，從而有良好體驗。實現了對底層API接口的調用，因此在小程序裏面開發，開發者不用太多去考慮OS的實現差別的問題，安心在上層的視圖層和邏輯層進行開發便可。

數據通訊機制：

分爲數據單項綁定、事件綁定。

4、小程序項目結構

約定優於配置（convention over configuration），也稱做按約定編程，是一種軟件設計範式，旨在減小軟件開發人員需作決定的數量，得到簡單的好處，而又不失靈活性。

5、小程序生命週期

小程序的生命週期分爲應用生命週期和頁面生命週期

應用生命週期：

屬性	類型	描述	觸發時機
onLaunch	Function	生命週期函數--監聽小程序初始化	當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow	Function	生命週期函數--監聽小程序顯示	當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
onHide	Function	生命週期函數--監聽小程序隱藏	當小程序從前臺進入後臺，會觸發 onHide

 頁面生命週期：

 

Page()函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。
object 參數說明：

 

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	生命週期函數--監聽頁面加載
onReady	Function	生命週期函數--監聽頁面初次渲染完成
onShow	Function	生命週期函數--監聽頁面顯示
onHide	Function	生命週期函數--監聽頁面隱藏
onUnload	Function	生命週期函數--監聽頁面卸載

 

• 小程序註冊完成後，加載頁面，觸發onLoad方法。
• 頁面載入後觸發onShow方法，顯示頁面。
• 首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。
• 當小程序後臺運行或跳轉到其餘頁面時，觸發onHide方法。
• 當小程序有後臺進入到前臺運行或從新進入頁面時，觸發onShow方法。
• 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。

用Page 實例說明的頁面的生命週期

由上圖可知，小程序由兩大線程組成：負責界面的視圖線程（view thread）和負責數據、服務處理的服務線程（appservice thread），二者協同工做，完成小程序頁面生命週期的調用。

視圖線程有四大狀態：

1. 初始化狀態：初始化視圖線程所須要的工做，初始化完成後向 「服務線程」發送初始化完成信號，而後進入等待狀態，等待服務線程提供初始化數據。
2. 首次渲染狀態：當收到服務線程提供的初始化數據後（json和js中的data數據），渲染小程序界面，渲染完畢後，發送「首次渲染完成信號」給服務線程，並將頁面展現給用戶。
3. 持續渲染狀態：此時界面線程繼續一直等待「服務線程」經過this.setdata（）函數發送來的界面數據，只要收到就從新局部渲染，也所以只要更新數據併發送信號，界面就自動更新。
4. 結束狀態：頁面被回收或者銷燬、應用被系統回收、銷燬時觸發。

服務線程五大狀態：

1. 初始化狀態：此階段僅啓動服務線程所需的基本功能，好比信號發送模塊。系統的初始化工做完畢，就調用自定義的onload和onshow，而後等待視圖線程的「視圖線程初始化完成」號。onload是隻會首次渲染的時候執行一次，onshow是每次界面切換都會執行，簡單理解，這就是惟一差異。
2. 等待激活狀態：接收到「視圖線程初始化完成」信號後，將初始化數據發送給「視圖線程」，等待視圖線程完成初次渲染。
3. 激活狀態：收到視圖線程發送來的「首次渲染完成」信號後，就進入激活狀態既程序的正常運行狀態，並調用自定義的onReady()函數。此狀態下就能夠經過 this.setData 函數發送界面數據給界面線程進行局部渲染，更新頁面。
4. 後臺運行狀態：若是界面進入後臺，服務線程就進入後臺運行狀態，從目前的官方解讀來講，這個狀態挺奇怪的，和激活狀態是相同的，也能夠經過setdata函數更新界面的。畢竟小程序的框架剛推出，應該後續會有很大不一樣吧。
5. 結束狀態：頁面被回收或者銷燬、應用被系統回收、銷燬時觸發。

應用的生命週期對頁面生命週期的影響

 

• 小程序初始化完成後，頁面首次加載觸發onLoad，只會觸發一次。
• 當小程序進入到後臺，先執行頁面onHide方法再執行應用onHide方法。
• 當小程序從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。

6、啓動方式

小程序啓動會有兩種狀況，一種是「冷啓動」，一種是「熱啓動」。 假如用戶已經打開過某小程序，而後在必定時間內再次打開該小程序，此時無需從新啓動，只需將後臺態的小程序切換到前臺，這個過程就是熱啓動；冷啓動指的是用戶首次打開或小程序被微信主動銷燬後再次打開的狀況，此時小程序須要從新加載啓動。

更新機制

小程序冷啓動時若是發現有新版本，將會異步下載新版本的代碼包，並同時用客戶端本地的包進行啓動，即新版本的小程序須要等下一次冷啓動纔會應用上。 若是須要立刻應用最新版本，可使用 wx.getUpdateManager API 進行處理。

運行機制

• 小程序沒有重啓的概念
• 當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過必定時間後（目前是5分鐘）會被微信主動銷燬
• 當短期內（5s）連續收到兩次以上收到系統內存告警，會進行小程序的銷燬