小程序的技術框架

1、小程序運行機制

1)小程序啓動會有兩種情況,一種是「冷啓動」,一種是「熱啓動」

假如用戶已經打開過某小程序,然後在一定時間內再次打開該小程序,此時無需重新啓動,只需將後臺態的小程序切換到前臺,這個過程就是熱啓動;冷啓動指的是用戶首次打開或小程序被微信主動銷燬後再次打開的情況,此時小程序需要重新加載啓動。

冷啓動 與 熱啓動

冷啓動:首次打開和銷燬後再次打開

熱啓動(沒有重新啓動):已經打開過,5分鐘內再次打開,直接切換到前臺

更新機制

小程序冷啓動時如果發現有新版本,將會異步下載新版本的代碼包並同時用客戶端本地的包進行啓動,即新版本的小程序需要等下一次冷啓動纔會應用上

2)運行機制

  • 小程序沒有重啓的概念
  • 當小程序進入後臺,客戶端會維持一段時間的運行狀態,超過一定時間後(目前是5分鐘)會被微信主動銷燬
  • 置頂的小程序不會被微信主動銷燬
  • 收到系統內存告警也會進行小程序的銷燬

前臺  後臺

前臺:小程序運行的時候

後臺:(點擊離開,或home鍵離開微信)離開但沒有銷燬

小程序的銷燬

小程序進入後臺後,(5分鐘內)沒有立即銷燬,5分鐘後可能會被銷燬,

如果小程序 佔用系統資源過高,持續佔用資源,會被系統銷燬或被微信的客戶端主動的回收

再次打開邏輯

基礎庫 1.4.0 開始支持,低版本需做兼容處理

用戶打開小程序的預期有以下兩類場景:

A. 打開首頁: 場景值有 1001, 1019, 1022, 1023, 1038, 1056

B. 打開小程序指定的某個頁面: 場景值爲除 A 以外的其他

當再次打開一個小程序邏輯如下:

上一次的場景 當前打開的場景 效果
A A 保留原來的狀態
B A 清空原來的頁面棧,打開首頁(相當於執行 wx.reLaunch 到首頁)
A 或 B B 清空原來的頁面棧,打開指定頁面(相當於執行 wx.reLaunch 到指定頁)

運行機制參考鏈接:

https://www.cnblogs.com/baixinL/p/12002257.html

https://www.cnblogs.com/storebook/p/8111652.html#ylbtech

小程序架構

微信小程序的框架包含兩部分View視圖層、App Service邏輯層,View層用來渲染頁面結構,AppService層用來邏輯處理、數據請求、接口調用,它們在兩個進程(兩個Webview)裏運行。 

小程序提供了自己的視圖層描述語言 WXMLWXSS,以及基於 JavaScript 的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,讓開發者能夠專注於數據與邏輯。只需要在邏輯層更改數據,視圖層內容就會相應更新。

視圖層和邏輯層通過系統層的JSBridage進行通信,邏輯層把數據變化通知到視圖層,觸發視圖層頁面更新,視圖層把觸發的事件通知到邏輯層進行業務處理。

小程序架構圖: 
這裏寫圖片描述

小程序啓動時會從CDN下載小程序的完整包,一般是數字命名的,如:_-2082693788_4.wxapkg

框架程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。一個框架程序主體部分由三個文件組成,必須放在項目的根目錄。

一個完整的小程序主要由以下幾部分組成: 
一個入口文件:app.js 
一個全局樣式:app.wxss 
一個全局配置:app.json 
頁面:pages下,每個頁面再按文件夾劃分,每個頁面4個文件 
視圖:wxml,wxss 
邏輯:js,json(頁面配置,不是必須)

注:pages裏面還可以再根據模塊劃分子目錄,孫子目錄,只需要在app.json裏註冊時填寫路徑就行。

文件 作用
app.js 小程序(全局)邏輯
app.json 小程序(全局)公共設置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等
app.wxss 小程序公共(全局)樣式表

一個框架頁面由四個文件組成:

文件類型 作用
js 頁面邏輯
wxml 頁面結構,框架設計的一套標籤語言,結合基礎組件、事件系統,可以構建出頁面的結構。
wxss 是一套樣式語言,用於描述 WXML 的組件樣式。用來決定 WXML 的組件應該怎麼顯示。
json 頁面配置

按照『約定優於配置』的原則,一個框架頁面至少包含js、wxml、wxss三個文件類型,文件名要一樣,例如首頁index.js、index.wxml、index.wxss,並且要放在同一文件夾下。頁面註冊時,文件名不需要寫文件後綴,因爲框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。

小程序技術實現

小程序的UI視圖和邏輯處理是用多個webview實現的,邏輯處理的JS代碼全部加載到一個Webview裏面,稱之爲AppService,整個小程序只有一個,並且整個生命週期常駐內存,而所有的視圖(wxml和wxss)都是單獨的Webview來承載,稱之爲AppView。所以一個小程序打開至少就會有2個webview進程,正式因爲每個視圖都是一個獨立的webview進程,考慮到性能消耗,小程序不允許打開超過5個層級的頁面,當然同是也是爲了體驗更好。
 

小程序生命週期:

分爲兩個部分來理解:應用生命週期(左側藍色部分)和頁面生命週期(右側綠色部分)。

其中應用的生命週期是這樣一個流程:1、用戶首次打開小程序,觸發 onLaunch(全局只觸發一次)。2、小程序初始化完成後,觸發onShow方法,監聽小程序顯示。3、小程序從前臺進入後臺,觸發 onHide方法。4、小程序從後臺進入前臺顯示,觸發 onShow方法。5、小程序後臺運行一定時間,或系統資源佔用過高,會被銷燬。

頁面生命週期是這樣的一個流程:1、小程序註冊完成後,加載頁面,觸發onLoad方法。2、頁面載入後觸發onShow方法,顯示頁面。3、首次顯示頁面,會觸發onReady方法,渲染頁面元素和樣式,一個頁面只會調用一次。4、當小程序後臺運行或跳轉到其他頁面時,觸發onHide方法。5、當小程序有後臺進入到前臺運行或重新進入頁面時,觸發onShow方法。6、當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack(),觸發onUnload。同時,應用生命週期會影響到頁面生命週期。

綜上來看,小程序的技術架構上的清晰明瞭,相比沉重的原生APP開發而已要好理解的多。而近期小程序官方逐步的釋放小程序的一些入口,由此可見小程序也將慢慢的得到微信官方更大的流量支持。萬里虎個人還是非常看好小程序的未來,簡單、高效、方便、快捷的用戶體驗,這些都符合一個好程序的特質。小程序也許會在不久的將來成爲下一個金礦,吸引更多開發者湧入。


參考:

https://www.jianshu.com/p/1c860834799c
https://blog.csdn.net/xiangzhihong8/article/details/66521459

https://www.cnblogs.com/kenshinobiy/p/6724867.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章