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