微信小程序架構解析
| 導語 微信小程序的公測掀起了學習小程序開發的浪潮，天生跨平臺，即用即走、媲美原生體驗、完善的文檔、高效的開發框架，小程序給開發者帶來了很多驚喜。通過這篇文章和大家一起分析小程序的架構，分享開發經驗。
一、小程序介紹
1、小程序特點
2、小程序演示
視頻地址： https://v.qq.com/x/page/w0353d7co6y.html
3、小程序為什么那么快
Page Frame Native預先額外加載一個WebView當打開指定頁面時，用默認數據直接渲染，請求數據回來時局部更新返回顯示歷史View
退出小程序，View狀態不銷毀
4、小程序入口
掃碼進入小程序
搜索小程序
小程序發送到桌面(Android)
發送給朋友
二、小程序架構
微信小程序的框架包含兩部分View視圖層、App Service邏輯層，View層用來渲染頁面結構，AppService層用來邏輯處理、數據請求、接口調用，它們在兩個線程里運行。
視圖層使用WebView渲染，邏輯層使用JSCore運行。
視圖層和邏輯層通過系統層的JSBridage進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。
小程序啟動時會從CDN下載小程序的完整包
三、View (頁面視圖)
視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。
將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。
1、View - WXML
WXML（WeiXin Markup Language）
支持數據綁定
支持邏輯算術、運算
支持模板、引用
支持添加事件（bindtap）
wxml編譯器：wcc 把wxml文件 轉為 js 執行方式：wcc index.wxml
2、View - WXSS
WXSS(WeiXin Style Sheets)
支持大部分CSS特性
添加尺寸單位rpx，可根據屏幕寬度自適應
使用@import語句可以導入外聯樣式表
不支持多層選擇器-避免被組件內結構破壞
wxss編譯器：wcsc 把wxss文件轉化為 js 執行方式： wcsc index.wxss
3、View – WXSS Selectors
WXSS目前支持如下選擇器：
4、View - Component
小程序提供了一系列組件用于開發業務功能，按照功能與HTML5的標簽進行對比如下：
小程序的組件基于Web Component標準
使用Polymer框架實現Web Component
5、View - Native Component
目前Native實現的組件有 <canvas/> <video/> <map/> <textarea/>
Native組件層在WebView層之上
四、App Service(邏輯層)
邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋
1、App( ) 小程序的入口；Page( ) 頁面的入口
3、提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。
4、每個頁面有獨立的作用域，并提供模塊化能力。
5、數據綁定、事件分發、生命周期管理、路由管理
運行環境
IOS - JSCore
Android - X5 JS解析器
DevTool - nwjs Chrome 內核
1、App Service - Binding
數據綁定使用 Mustache 語法（雙大括號）將變量包起來，動態數據均來自對應 Page 的 data，可以通過setData方法修改數據。
事件綁定的寫法同組件的屬性，以 key、value 的形式，key 以bind或catch開頭，然后跟上事件的類型，如bindtap, catchtouchstart，value 是一個字符串，需要在對應的 Page 中定義同名的函數。
2、App Service - Life Cylce
3、App Service - API
API通過JSBridge和Native 進行通信
4、App Service - Router
navigateTo(OBJECT)
保留當前頁面，跳轉到應用內的某個頁面，使用navigateBack可以返回到原頁面。頁面路徑只能是五層
redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。
navigateBack(OBJECT)
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。
五、小程序開發經驗
1、小程序存在的問題
小程序仍然使用WebView渲染，并非原生渲染
需要獨立開發，不能在非微信環境運行 。
開發者不可以擴展新組件。
服務端接口返回的頭無法執行，比如：Set-Cookie。
依賴瀏覽器環境的js庫不能使用，因為是JSCore執行的，沒有window、document對象。
WXSS中無法使用本地（圖片、字體等）。
WXSS轉化成js 而不是css，為了兼容rpx。
WXSS不支持級聯選擇器。
小程序無法打開頁面，無法拉起APP。
小程序不能和公眾號重名，于是小程序的名字就成了：自選股+、滴滴出行DiDi 。
2、小程序可以借鑒的優點
提前新建WebView，準備新頁面渲染。
View層和邏輯層分離，通過數據驅動，不直接操作DOM。
使用Virtual DOM，進行局部更新。
全部使用https，確保傳輸中安全。
使用離線能力 。
前端組件化開發。
加入rpx單位，隔離設備尺寸，方便開發。
3、脫離微信的“小程序”：PWA 漸進式應用
PWA 全稱是 Progressive Web Apps ，譯成中文就是漸進式應用，是 Google 在 2015 年 6 月 15 日提出的概念。
Progressive Web Apps 是結合了 web 和 原生應用中最好功能的一種體驗。對于首次訪問的用戶它是非常有利的, 用戶可以直接在瀏覽器中進行訪問，不需要安裝應用。隨著時間的推移當用戶漸漸地和應用建立了聯系，它將變得越來越強大。它能夠快速地加載，即使在弱網絡環境下，能夠推送相關消息, 也可以像原生應用那樣添加至主屏，能夠有全屏瀏覽的體驗。
PWA具有如下特點：
漸進增強 - 支持的新特性的瀏覽器獲得更好的體驗，不支持的保持原來的體驗。
離線訪問 - 通過 service workers 可以在離線或者網速差的環境下工作。
類原生應用 - 使用app shell model做到原生應用般的體驗。
可安裝 - 允許用戶保留對他們有用的應用在主屏幕上，不需要通過應用商店。
容易分享 - 通過 URL 可以輕松分享應用。
持續更新 - 受益于 service worker 的更新進程，應用能夠始終保持更新。
安全 - 通過 HTTPS 來提供服務來防止網絡窺探，保證內容不被篡改。
可搜索 - 得益于 W3C manifests 元數據和 service worker 的登記，讓搜索引擎能夠找到 web 應用。
再次訪問 - 通過消息推送等特性讓用戶再次訪問變得容易。
Web App Manifest使Web更像Native
Web App Manifest以JSON的格式定義Web應用的相關配置（應用名稱、圖標或圖像連接、啟動URL、自定義特性、啟動默認配置、全屏設置等）。
Service Workers增強Web能力
通過Service Works實現資源離線緩存和更新
App Shell 提升顯示效率
App Shell（應用外殼）是應用的用戶界面所需的最基本的 HTML、CSS 和 JavaScript，首次加載后立刻被緩存下來，不需要每次使用時都被下載，而是只異步加載需要的數據，以達到UI保持本地化。
來自：http://mp.weixin.qq.com/s/KxqdX16MH8AX7ZYv8CQNIw