****微信小程序架構解析

WindySky 2017-07-27

展開全文

| 導語微信小程序的公測掀起了學習小程序開發(fā)的浪潮，天生跨平臺,，即用即走,、媲美原生體驗、完善的文檔,、高效的開發(fā)框架,，小程序給開發(fā)者帶來了很多驚喜。通過這篇文章和大家一起分析小程序的架構,，分享開發(fā)經(jīng)驗,。

一、小程序介紹

1,、小程序特點

2,、小程序演示

視頻地址： https://v.qq.com/x/page/w0353d7co6y.html

3、小程序為什么那么快

Page Frame Native預先額外加載一個WebView當打開指定頁面時,，用默認數(shù)據(jù)直接渲染,，請求數(shù)據(jù)回來時局部更新返回顯示歷史View
退出小程序，View狀態(tài)不銷毀

4,、小程序入口

掃碼進入小程序

搜索小程序

小程序發(fā)送到桌面(Android)

發(fā)送給朋友

二,、小程序架構

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

視圖層使用WebView渲染,，邏輯層使用JSCore運行,。

視圖層和邏輯層通過系統(tǒng)層的JSBridage進行通信，邏輯層把數(shù)據(jù)變化通知到視圖層,，觸發(fā)視圖層頁面更新,，視圖層把觸發(fā)的事件通知到邏輯層進行業(yè)務處理。

小程序啟動時會從CDN下載小程序的完整包

三,、View (頁面視圖)

視圖層由 WXML 與 WXSS 編寫,，由組件來進行展示,。

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

1,、View - WXML

WXML（WeiXin Markup Language）

支持數(shù)據(jù)綁定

支持邏輯算術、運算

支持模板,、引用

支持添加事件（bindtap）

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

2,、View - WXSS

WXSS(WeiXin Style Sheets)

支持大部分CSS特性

添加尺寸單位rpx，可根據(jù)屏幕寬度自適應

使用@import語句可以導入外聯(lián)樣式表

不支持多層選擇器-避免被組件內(nèi)結構破壞

wxss編譯器：wcsc 把wxss文件轉化為 js 執(zhí)行方式： wcsc index.wxss

3,、View – WXSS Selectors

WXSS目前支持如下選擇器：

4,、View - Component

小程序提供了一系列組件用于開發(fā)業(yè)務功能，按照功能與HTML5的標簽進行對比如下：

小程序的組件基于Web Component標準

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

5,、View - Native Component

目前Native實現(xiàn)的組件有 <canvas/> <video/> <map/> <textarea/>

Native組件層在WebView層之上

四,、App Service(邏輯層)

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

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

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

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

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

運行環(huán)境

IOS - JSCore

Android - X5 JS解析器

DevTool - nwjs Chrome 內(nèi)核

1、App Service - Binding

數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來,，動態(tài)數(shù)據(jù)均來自對應 Page 的 data,，可以通過setData方法修改數(shù)據(jù)。

事件綁定的寫法同組件的屬性,，以 key,、value 的形式，key 以bind或catch開頭,，然后跟上事件的類型,，如bindtap, catchtouchstart，value 是一個字符串,，需要在對應的 Page 中定義同名的函數(shù),。

2,、App Service - Life Cylce

3、App Service - API

API通過JSBridge和Native 進行通信

4,、App Service - Router

navigateTo(OBJECT)

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

redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內(nèi)的某個頁面,。

navigateBack(OBJECT)

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

五,、小程序開發(fā)經(jīng)驗

1,、小程序存在的問題

小程序仍然使用WebView渲染，并非原生渲染

需要獨立開發(fā),，不能在非微信環(huán)境運行 ,。

開發(fā)者不可以擴展新組件。

服務端接口返回的頭無法執(zhí)行,，比如：Set-Cookie,。

依賴瀏覽器環(huán)境的js庫不能使用，因為是JSCore執(zhí)行的,，沒有window,、document對象。

WXSS中無法使用本地（圖片,、字體等）,。

WXSS轉化成js 而不是css，為了兼容rpx,。

WXSS不支持級聯(lián)選擇器,。

小程序無法打開頁面，無法拉起APP,。

小程序不能和公眾號重名,，于是小程序的名字就成了：自選股+、滴滴出行DiDi ,。

2,、小程序可以借鑒的優(yōu)點

提前新建WebView，準備新頁面渲染,。

View層和邏輯層分離,，通過數(shù)據(jù)驅動,，不直接操作DOM。

使用Virtual DOM,，進行局部更新,。

全部使用https，確保傳輸中安全,。

使用離線能力 ,。

前端組件化開發(fā)。

加入rpx單位,，隔離設備尺寸,，方便開發(fā)。

3,、脫離微信的“小程序”：PWA 漸進式應用

PWA 全稱是 Progressive Web Apps ,，譯成中文就是漸進式應用，是 Google 在 2015 年 6 月 15 日提出的概念,。

Progressive Web Apps 是結合了 web 和原生應用中最好功能的一種體驗,。對于首次訪問的用戶它是非常有利的, 用戶可以直接在瀏覽器中進行訪問，不需要安裝應用,。隨著時間的推移當用戶漸漸地和應用建立了聯(lián)系,，它將變得越來越強大。它能夠快速地加載,，即使在弱網(wǎng)絡環(huán)境下,，能夠推送相關消息, 也可以像原生應用那樣添加至主屏，能夠有全屏瀏覽的體驗,。

PWA具有如下特點：

漸進增強 - 支持的新特性的瀏覽器獲得更好的體驗,，不支持的保持原來的體驗。

離線訪問 - 通過 service workers 可以在離線或者網(wǎng)速差的環(huán)境下工作,。

類原生應用 - 使用app shell model做到原生應用般的體驗,。

可安裝 - 允許用戶保留對他們有用的應用在主屏幕上，不需要通過應用商店,。

容易分享 - 通過 URL 可以輕松分享應用,。

持續(xù)更新 - 受益于 service worker 的更新進程，應用能夠始終保持更新,。

安全 - 通過 HTTPS 來提供服務來防止網(wǎng)絡窺探,，保證內(nèi)容不被篡改。

可搜索 - 得益于 W3C manifests 元數(shù)據(jù)和 service worker 的登記,，讓搜索引擎能夠找到 web 應用,。

再次訪問 - 通過消息推送等特性讓用戶再次訪問變得容易。

Web App Manifest使Web更像Native

Web App Manifest以JSON的格式定義Web應用的相關配置（應用名稱、圖標或圖像連接,、啟動URL,、自定義特性、啟動默認配置,、全屏設置等）,。