理解微信小程序技術架構

時間 2019-11-07

原文原文鏈接

總體技術架構

視圖層和邏輯層分離，經過數據驅動，事件交互，不直接操做DOM

視圖層負責渲染頁面結構，邏輯層負責邏輯處理、數據請求、接口調用等

視圖層與邏輯層經過數據和事件進行通訊，邏輯層提供數據給視圖層，視圖層經過綁定/捕獲事件發起交互讓邏輯層處理

視圖使用WebView渲染，JS由JSCore(IOS)/X5(Android)/nwjs(DevTool)渲染解析

JSBridge下架起上層開發與Native（系統層）的橋樑，使得小程序可經過API使用原生的功能，且部分組件爲原生組件實現，從而有良好體驗
附：瀏覽器內核瞭解

組件

wxml爲微信開發的一種標記語言，只能使用其指定的組件（view, text, navigator, image, button等，詳見文檔<組件>）。php

View - Component

小程序的組件基於Web Component標準
使用Polymer框架實現Web Component

View - Native Component

目前Native實現的組件有 <canvas/> <video/> <map/> <textarea/>
Native組件層在WebView層之上

wxss樣式表

支持大部分CSS特性
不支持多層選擇器-避免被組件內結構破壞
style：style 接收動態的樣式，在運行時會進行解析，請儘可能避免將靜態的樣式寫進 style 中，以避免影響渲染速度。html
```
<view style="color:{{color}};" />
```
拓展：vue
尺寸單位：添加尺寸單位rpx，可根據屏幕寬度自適應
樣式導入：使用@import語句能夠導入外聯樣式表

生命週期

微信小程序生命週期分「應用生命週期」和「頁面生命週期」。
應用生命週期含onLaunch, onShow, onHide狀態，onLaunch, onShow可獲取打開小程序時的相關參數path, query, scene， shareTicket， referrerInfo，註冊爲App({})，一個小程序只有一個App({})。
頁面生命週期含onLoad, onShow, onHide, onReady, onUnload，onLoad可獲取其餘頁面打開當前頁面時所所調用的query參數，註冊爲Page({})，每一個頁面有且必須有一個Page({})。java

不清楚的地方多多重複查看文檔說明：註冊程序，註冊頁面git

頁面棧：頁面導航

getCurrentPages(): 獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。
Tip：不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤。github

頁面深度最多爲5層，也就是頁面棧裏最多隻能有5個頁面，超過的話調用導航就會失效，所以，要選用合適的導航方式，及時釋放頁面。web

navigate：A -> B 其頁面棧依次爲：A - AB
redirect: A -> B 其頁面棧依次爲：A - Bcanvas

不一樣導航方式致頁面棧的變化圖解可查看這篇文章：小程序基礎篇之頁面路由小程序

數據通訊機制

數據單向綁定：使用 Mustache 語法（雙大括號）將變量包起來，動態數據均來自對應 Page 的 data，能夠經過setData({})方法修改數據。segmentfault
```
<view>{{ message }}</view>
```
事件綁定：寫法同組件的屬性，以 key、value 的形式，key 以bind或catch開頭，而後跟上事件的類型，如bindtap, catchtouchstart，value 是一個字符串，須要在對應的 Page 中定義同名的函數，函數參數則經過在組件上加data-域。
```
<view data-param=」value」 bindtap=」showModal」></view>
```

詳細的說明仍是查閱文檔：註冊頁面：着重看變量和事件部分，視圖層-WXML-數據綁定，視圖層-WXML-事件

提醒一下，熟悉vuejs的朋友應該很容易上手，略讀一遍文檔就基本明白了，但要留意下數據不是雙向綁定的，改變變量值須要經過setData({})，事件傳參是經過data域，遍歷及條件語句中，變量/語句仍需帶{{ }}等，總之多看文檔，避免踩這種用法有誤的坑。

小程序的能力與限制

新能力

小程序自上線以來，逐步開放了不少新功能，可查看微信歷史公告
 微信小程序新能力全解讀！ | 知曉程序公衆號20170803

小程序跳轉小程序

限制

只能在微信內使用
沒有window、document對象
不能跳轉外部連接
小程序裏圖片不存在長按圖片出現分享/識別二維碼等選項，這個功能只有經過微信瀏覽器查看的web頁面纔有；但可經過調用預覽圖片API，在預覽圖片模式下，點擊右上角操做，選項中有發送給朋友/掃描二維碼等選項。小程序間及與公衆號間的跳轉功能