一塊兒脫去小程序的外套和內衣 - 微信小程序架構解析

推薦理由：

微信小程序從一出現就引發不少人的關注，它的公測就掀起了學習小程序開發的浪潮；今天在微信公衆平臺看到一條公告，小程序開始開放我的開發者申請註冊，我的用戶能夠訪問微信公衆平臺，掃碼驗證我的身份後便可完成小程序帳號申請並進行代碼開發；下面我推薦的這篇文章就分析了小程序的架構以及開發經驗；但願對你們有所幫助。

如下爲文章原文：

做者介紹： 渠宏偉，騰訊高級工程師，從事Web前端開發5年，前後負責企鵝電競、騰訊視頻VIP、騰訊OA開發框架、騰訊微信HR助手等項目。對Web前端架構、.NET架構有豐富的經驗。

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

1、小程序介紹

一、小程序特色

二、小程序演示

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

三、小程序爲何那麼快

額外加載一個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）

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保持本地化。

瞭解更多pwa資料： https://developers.google.com...

感謝jas、hulk提供的幫助。
文章出自騰訊雲技術社區

（埋文字鏈https://www.qcloud.com/commun...）

推薦你們關注騰訊雲技術社區微信公衆號：QcloudCommunity