小程序啟動加載實(shí)現(xiàn)原理

運(yùn)行機(jī)制

小程序啟動會有兩種情況，一種是「冷啟動」，一種是「熱啟動」。 假如用戶已經(jīng)打開過某小程序，然后在一定時間內(nèi)再次打開該小程序，此時無需重新啟動，只需將后臺態(tài)的小程序切換到前臺，這個過程就是熱啟動；冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動。

更新機(jī)制

小程序冷啟動時如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進(jìn)行啟動，即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。 如果需要馬上應(yīng)用最新版本，可以使用wx.getUpdateManager API 進(jìn)行處理。

運(yùn)行機(jī)制

• 小程序沒有重啟的概念
• 當(dāng)小程序進(jìn)入后臺，客戶端會維持一段時間的運(yùn)行狀態(tài)，超過一定時間后（目前是5分鐘）會被微信主動銷毀
• 當(dāng)短時間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會進(jìn)行小程序的銷毀

四、View (頁面視圖)

視圖層由 WXML 與 WXSS 編寫，由組件來進(jìn)行展示。

將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時將視圖層的事件發(fā)送給邏輯層。

1、View - WXML

wxml編譯器：wcc 把wxml文件 轉(zhuǎn)為 js 執(zhí)行方式：wcc index.wxml

2、View - WXSS

• WXSS(WeiXin Style Sheets)
• wxss編譯器：wcsc 把wxss文件轉(zhuǎn)化為 js 執(zhí)行方式： wcsc index.wxss

3、View - Component

• 小程序的組件基于Web Component標(biāo)準(zhǔn)

• 使用Polymer框架實(shí)現(xiàn)Web Component

4、View - Native Component

• 目前Native實(shí)現(xiàn)的組件有 <canvas/> <video/> <map/> <textarea/>
• Native組件層在WebView層之上

五、WebView預(yù)加載

每次小程序進(jìn)入除了當(dāng)前頁面,Native預(yù)先額外加載一個WebView

當(dāng)打開指定頁面時，用默認(rèn)數(shù)據(jù)直接渲染，請求數(shù)據(jù)回來時局部更新

返回顯示歷史View

退出小程序，View狀態(tài)不銷毀

六、App Service(邏輯層)

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋

1、App( ) 小程序的入口；Page( ) 頁面的入口

3、提供豐富的 API，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。

4、每個頁面有獨(dú)立的作用域，并提供模塊化能力。

5、數(shù)據(jù)綁定、事件分發(fā)、生命周期管理、路由管理

運(yùn)行環(huán)境

IOS - JSCore

Android - X5 JS解析器

DevTool - nwjs Chrome 內(nèi)核

1、App Service - Binding

• 數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來，動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data，可以通過setData方法修改數(shù)據(jù)。
• 事件綁定的寫法同組件的屬性，以 key、value 的形式，key 以bind或catch開頭，然后跟上事件的類型，如bindtap, catchtouchstart，value 是一個字符串，需要在對應(yīng)的 Page 中定義同名的函數(shù)。

2、App Service - Life Cylce

3、App Service - API

API通過WeixinJSBridge和Native 進(jìn)行通信

4、App Service - Router

• navigateTo(OBJECT)

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用navigateBack可以返回到原頁面。頁面路徑只能是五層

• redirectTo(OBJECT)

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。

• navigateBack(OBJECT)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面?？赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁面棧，決定需要返回幾層。