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

| 導語   微信小程序的公測掀起了學習小程序開發的浪潮，天生跨平臺，即用即走、媲美原生體驗、完善的文檔、高效的開發框架，小程序給開發者帶來了不少驚喜。經過這篇文章和你們一塊兒分析小程序的架構，分享開發經驗。

1、小程序介紹

一、小程序特色

二、小程序演示

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

三、小程序爲何那麼快

  

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

四、小程序入口

掃碼進入小程序

搜索小程序

小程序發送到桌面(Android)

發送給朋友

2、小程序架構

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

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

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

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

3、View (頁面視圖)

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

將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。

一、View - WXML

WXML（WeiXin Markup Language）

支持數據綁定

支持邏輯算術、運算

支持模板、引用

支持添加事件（bindtap）

wxml編譯器：wcc  把wxml文件 轉爲 js   執行方式：wcc index.wxml  

二、View - WXSS

WXSS(WeiXin Style Sheets)

支持大部分CSS特性

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

使用@import語句能夠導入外聯樣式表

不支持多層選擇器-避免被組件內結構破壞

wxss編譯器：wcsc 把wxss文件轉化爲 js 執行方式： wcsc index.wxss

三、View – WXSS Selectors

WXSS目前支持以下選擇器：

四、View - Component

小程序提供了一系列組件用於開發業務功能，按照功能與HTML5的標籤進行對好比下：

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

使用Polymer框架實現Web Component

五、View - Native Component

目前Native實現的組件有 <canvas/> <video/> <map/> <textarea/>

Native組件層在WebView層之上

4、App Service(邏輯層)

邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋

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

三、提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。

四、每一個頁面有獨立的做用域，並提供模塊化能力。

五、數據綁定、事件分發、生命週期管理、路由管理

運行環境

IOS - JSCore

Android - X5 JS解析器

DevTool - nwjs Chrome 內核

一、App Service - Binding

數據綁定使用 Mustache 語法（雙大括號）將變量包起來，動態數據均來自對應 Page 的 data，能夠經過setData方法修改數據。

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

二、App Service - Life Cylce

三、App Service - API

API經過JSBridge和Native 進行通訊

四、App Service - Router

navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用navigateBack能夠返回到原頁面。頁面路徑只能是五層

redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages()) 獲取當前的頁面棧，決定須要返回幾層。

5、小程序開發經驗

一、小程序存在的問題

小程序仍然使用WebView渲染，並不是原生渲染

須要獨立開發，不能在非微信環境運行 。

開發者不能夠擴展新組件。

服務端接口返回的頭沒法執行，好比：Set-Cookie。

依賴瀏覽器環境的js庫不能使用，由於是JSCore執行的，沒有window、document對象。

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

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

WXSS不支持級聯選擇器。

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

小程序不能和公衆號重名，因而小程序的名字就成了：自選股+、滴滴出行DiDi 。

二、小程序能夠借鑑的優勢

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

View層和邏輯層分離，經過數據驅動，不直接操做DOM。

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

所有使用https，確保傳輸中安全。

使用離線能力 。

前端組件化開發。

加入rpx單位，隔離設備尺寸，方便開發。

三、脫離微信的「小程序」：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