小程序上線以來,一向被稱為“便攜版”的APP,關於兩者之間的區別,無外乎小程序相對輕便、開發成本低,下面讓我們來看一下小程序的“廬山真面目”!
一、app的分類
大致可以分為這3種:
native app(原生app)、web app、hybrid app(混合app),關系如下圖:

二、什么是小程序
小程序是介於web網頁應用和原生應用的一種產物;

小程序的特點:

三、小程序架構

-
視圖層和邏輯層分離,通過數據驅動,事件交互,不直接操作DOM
-
視圖層負責渲染頁面結構,邏輯層負責邏輯處理、數據請求、接口調用等
-
視圖層與邏輯層通過數據和事件進行通信,邏輯層提供數據給視圖層,視圖層通過綁定/捕獲事件發起交互讓邏輯層處理
-
視圖使用
WebView渲染,JS由JSCore(IOS)/X5(Android)/nmjs(DevTool)渲染解析 -
JSBridge下架起上層開發與Native(系統層)的橋梁,使得小程序可通過API使用原生的功能,且部分組件為原生組件實現,從而有良好體驗。實現了對底層API接口的調用,所以在小程序里面開發,開發者不用太多去考慮OS的實現差異的問題,安心在上層的視圖層和邏輯層進行開發即可。
數據通信機制:

分為數據單項綁定、事件綁定。
四、小程序項目結構

約定優於配置(convention over configuration),也稱作按約定編程,是一種軟件設計范式,旨在減少軟件開發人員需做決定的數量,獲得簡單的好處,而又不失靈活性。
五、小程序生命周期
小程序的生命周期分為應用生命周期和頁面生命周期
應用生命周期:
| 屬性 | 類型 | 描述 | 觸發時機 |
|---|---|---|---|
| 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),兩者協同工作,完成小程序頁面生命周期的調用。
視圖線程有四大狀態:
- 初始化狀態:初始化視圖線程所需要的工作,初始化完成后向 “服務線程”發送初始化完成信號,然后進入等待狀態,等待服務線程提供初始化數據。
- 首次渲染狀態:當收到服務線程提供的初始化數據后(json和js中的data數據),渲染小程序界面,渲染完畢后,發送“首次渲染完成信號”給服務線程,並將頁面展示給用戶。
- 持續渲染狀態:此時界面線程繼續一直等待“服務線程”通過this.setdata()函數發送來的界面數據,只要收到就重新局部渲染,也因此只要更新數據並發送信號,界面就自動更新。
- 結束狀態:頁面被回收或者銷毀、應用被系統回收、銷毀時觸發。
服務線程五大狀態:
- 初始化狀態:此階段僅啟動服務線程所需的基本功能,比如信號發送模塊。系統的初始化工作完畢,就調用自定義的onload和onshow,然后等待視圖線程的“視圖線程初始化完成”號。onload是只會首次渲染的時候執行一次,onshow是每次界面切換都會執行,簡單理解,這就是唯一差別。
- 等待激活狀態:接收到“視圖線程初始化完成”信號后,將初始化數據發送給“視圖線程”,等待視圖線程完成初次渲染。
- 激活狀態:收到視圖線程發送來的“首次渲染完成”信號后,就進入激活狀態既程序的正常運行狀態,並調用自定義的onReady()函數。此狀態下就可以通過 this.setData 函數發送界面數據給界面線程進行局部渲染,更新頁面。
- 后台運行狀態:如果界面進入后台,服務線程就進入后台運行狀態,從目前的官方解讀來說,這個狀態挺奇怪的,和激活狀態是相同的,也可以通過setdata函數更新界面的。畢竟小程序的框架剛推出,應該后續會有很大不同吧。
- 結束狀態:頁面被回收或者銷毀、應用被系統回收、銷毀時觸發。
- 小程序初始化完成后,頁面首次加載觸發onLoad,只會觸發一次。
- 當小程序進入到后台,先執行頁面onHide方法再執行應用onHide方法。
- 當小程序從后台進入到前台,先執行應用onShow方法再執行頁面onShow方法。
六、啟動方式
小程序啟動會有兩種情況,一種是「冷啟動」,一種是「熱啟動」。 假如用戶已經打開過某小程序,然后在一定時間內再次打開該小程序,此時無需重新啟動,只需將后台態的小程序切換到前台,這個過程就是熱啟動;冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況,此時小程序需要重新加載啟動。
更新機制
小程序冷啟動時如果發現有新版本,將會異步下載新版本的代碼包,並同時用客戶端本地的包進行啟動,即新版本的小程序需要等下一次冷啟動才會應用上。 如果需要馬上應用最新版本,可以使用 wx.getUpdateManager API 進行處理。
運行機制
- 小程序沒有重啟的概念
- 當小程序進入后台,客戶端會維持一段時間的運行狀態,超過一定時間后(目前是5分鍾)會被微信主動銷毀
- 當短時間內(5s)連續收到兩次以上收到系統內存告警,會進行小程序的銷毀

