作者什么來(lái)頭
渠宏偉，騰訊前端開(kāi)發(fā)高級(jí)工程師。
小程序特點(diǎn)
類(lèi)Web，不是HTML5
即用即走，隨手可得
擁有離線能力
基于微信跨平臺(tái)
媲美原生操作體驗(yàn)
為什么那么快
Page Frame
Native預(yù)先加載一個(gè)WebView
當(dāng)打開(kāi)指定頁(yè)面時(shí)，無(wú)需加載額外資源直接渲染
返回顯示歷史View
退出小程序，View狀態(tài)不銷(xiāo)毀
小程序入口
掃碼進(jìn)入
搜索（模糊）
發(fā)現(xiàn)>小程序
小程序發(fā)送到桌面（Android）
小程序架構(gòu)
交互通過(guò)系統(tǒng)層的JSBridge進(jìn)行，當(dāng)用戶(hù)進(jìn)行操作觸發(fā)了事件，通過(guò)JSBridge通知邏輯層，邏輯層執(zhí)行對(duì)應(yīng)邏輯并把數(shù)據(jù)通過(guò)JSBridge傳遞給視圖層，視圖層執(zhí)行相應(yīng)的操作。
小程序初始化時(shí)，先從微信的CDN下載小程序的完整的包，然后在微信內(nèi)部進(jìn)行解包初始化。
小程序視圖層
WXML(WeiXin Markup Language)
支持?jǐn)?shù)據(jù)綁定
支持邏輯算術(shù)、運(yùn)算
支持模板、引用
支持添加事件
WXML先被編譯成JS文件，引入數(shù)據(jù)后會(huì)初始完成虛擬DOM，最終把虛擬DOM構(gòu)建成DOM樹(shù)，在WebView中渲染。
WXSS（WeiXin Style Sheets）
支持大部分CSS特性
添加尺寸單位rpx，可根據(jù)屏幕寬度自適應(yīng)
使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表
不支持多層選擇器，避免被組件內(nèi)結(jié)構(gòu)破壞
WXSS被編譯成JS運(yùn)行。常用選擇器、組件，略過(guò)。
小程序的組件基于Web Component標(biāo)準(zhǔn)，使用Polymer框架實(shí)現(xiàn)Web Component。Polymer框架是Google提出的，但在使用過(guò)程中發(fā)現(xiàn)其性能較低，所以微信自研了一套。
Native組件層在WebView層之上。
小程序邏輯層
邏輯層講數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。
App()小程序的入口；Page()頁(yè)面的入口
提供豐富的API，如微信用戶(hù)數(shù)據(jù)，掃一掃，支付等微信特有能力
每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力
數(shù)據(jù)綁定，事件分發(fā)，生命周期管理，路由管理
運(yùn)行環(huán)境：iOS-JSCore、Android-X5 JS解析器、DevTool-nwjs Chrome內(nèi)核
邏輯層生命周期
用戶(hù)從微信打開(kāi)一個(gè)小程序的執(zhí)行過(guò)程：
Native執(zhí)行一個(gè)拉起的操作，告訴App Service層
App Service層執(zhí)行拉起，同時(shí)通知View層進(jìn)行初始化
接下來(lái)要打開(kāi)頁(yè)面，通過(guò)路由通知App Service層
App Service層創(chuàng)建一個(gè)Page，然后通知Web層初始化，同時(shí)通知View層渲染并發(fā)送初始化數(shù)據(jù)
App Service層的Page會(huì)進(jìn)行onLoad、onShow事件的執(zhí)行，渲染完成onReady
當(dāng)用戶(hù)進(jìn)行操作時(shí)，就出發(fā)一次用戶(hù)事件，用戶(hù)事件會(huì)通知到App
Service層并在此層執(zhí)行，然后通知View層進(jìn)行局部渲染，這樣就完成了一次交互。
New View是在Web View初始化完成之后建立的，用于等待用戶(hù)執(zhí)行下一個(gè)界面時(shí)使用，減少Web View創(chuàng)建的花銷(xiāo)，用戶(hù)不需要等待了。App Service層的New Page也是同理。
小程序可以借鑒的優(yōu)點(diǎn)
提前新建Web View，準(zhǔn)備新頁(yè)面渲染
View層和邏輯層分離，通過(guò)數(shù)據(jù)驅(qū)動(dòng)，不直接操作DOM
使用Virtual DOM，進(jìn)行局部更新
全部使用https，確保傳輸過(guò)程中安全
前端組件化開(kāi)發(fā)
加入rpx單位，隔離設(shè)備尺寸，方便開(kāi)發(fā)
小程序存在的問(wèn)題
小程序仍然使用WebView渲染，并非原生渲染
需要獨(dú)立開(kāi)發(fā)，不能再非微信環(huán)境運(yùn)行
開(kāi)發(fā)者不可以擴(kuò)展新組件
服務(wù)端口返回的頭無(wú)法執(zhí)行，如Set-Cookie
以來(lái)瀏覽器環(huán)境的js庫(kù)不能使用，因?yàn)槭荍SCore執(zhí)行的，沒(méi)有window、document對(duì)象
WXSS中無(wú)法使用本地（圖片、字體等）
WXSS轉(zhuǎn)化成js而不是css,為了兼容rpx
WXSS不支持級(jí)聯(lián)選擇器
小程序無(wú)法打開(kāi)頁(yè)面，無(wú)法拉起APP
脫離微信的“小程序”：PWA漸進(jìn)式應(yīng)用
優(yōu)點(diǎn)：
漸進(jìn)增強(qiáng)：支持的新特性的瀏覽器獲得更好的體驗(yàn)，不支持的保持原來(lái)的體驗(yàn)
離線訪問(wèn)：通過(guò)Service Workers可以再離線或者網(wǎng)速差的環(huán)境下工作
類(lèi)原生應(yīng)用：使用app shell model做到原生應(yīng)用般的體驗(yàn)
可安裝：允許用戶(hù)保留對(duì)他們有用的應(yīng)用在主屏幕上，不需要通過(guò)應(yīng)用商店
容易分享：通過(guò)URL可以輕松分享應(yīng)用
持續(xù)更新：受益于service worker的更新進(jìn)行，應(yīng)用能夠始終保持更新
安全：可通過(guò)https來(lái)提供服務(wù)來(lái)防止網(wǎng)絡(luò)窺探，保證內(nèi)容不被篡改
可搜索：得益于W3C manifests元數(shù)據(jù)和service worker的等級(jí)，讓搜索引擎能夠找到wen應(yīng)用
再次訪問(wèn)：通過(guò)消息推送等特性讓用戶(hù)再次訪問(wèn)變得容易
