[TOC]
### 5.4.1 視圖層組件
內置組件中有部分組件(原生組件)是利用到客戶端原生提供的能力,就會涉及到視圖層與客戶端的交互通信。
這層通信機制在 iOS 和安卓系統的實現方式并不一樣,
* `iOS` 是利用了WKWebView 提供的 messageHandlers 特性,
* `安卓`則是往 WebView 的 window 對象注入一個原生方法,最終會封裝成 WeiXinJSBridge 這樣一個兼容層,主要提供了調用(`invoke`)和監聽(`on`)這兩種方法。
開發者插入一個原生組件,一般而言,開發者只是間接調用的,真正調用是在組件的內部實現。組件運行的時候在被插入到 DOM 樹的生命周期里,就會調用客戶端接口,通知客戶端在哪個位置渲染一塊原生界面。在后續開發者更新組件屬性時,同樣地,也會調用客戶端提供的更新接口來更新原生界面的某些部分。
### 5.4.2 邏輯層接口
邏輯層與客戶端原生通信機制與渲染層類似,不同在于,iOS平臺可以往JavaScripCore框架注入一個全局的原生方法,而安卓方面則是跟渲染層一致的。
同樣地,開發者也是間接地調用到與客戶端原生通信的底層接口。一般我們會對邏輯層接口做層封裝后才暴露給開發者,封裝的細節可能是統一入參、做些參數校驗、兼容各平臺或版本問題等等。
- 微信
- 小程序
- 1. 代碼組成
- 1.1 JSON配置--'*.json'文件
- 1.2 WXML模板--'*.wxml'文件
- 1.3 WXSS樣式--'*.wxss'文件
- 1.4 JavaScript腳本--'*.js'文件
- 2. 客戶端運行
- 2.1 邏輯層和渲染層
- 2.1.1 邏輯層--App Service
- 2.1.2 渲染層/視圖層--View
- 2.1.3 通信模型
- 2.1.4 數據驅動
- 2.1.5 雙線程下的界面渲染
- 2.2 程序與頁面
- 2.3 組件
- 2.4 API
- 2.5 事件
- 2.6 兼容
- 3. 應用設計
- 3.1 Flex布局
- 3.2 界面常見的交互反饋
- 3.3 發起HTTPS網絡通信--wx.request
- 3.4 微信登錄
- 3.5 本地數據緩存
- 3.6 設備能力
- 4. 小程序的協同工作和發布
- 4.1 協同工作
- 4.2 用戶體驗審視
- 4.3 發布
- 4.4 運營
- 5. 底層框架
- 5.1 雙線程模型
- 5.2 組件系統--Exparser框架
- 5.3 原生組件
- 5.4 小程序與客戶端通信原理
- 6. 運行和性能優化
- 6.1 啟動--代碼加載
- 6.2 頁面準備
- 6.3 數據通信
- 6.4 視圖層渲染
- 6.5 原生組件通信
- 7. 小程序基礎庫的更新迭代
- 8. 微信開發者工具
- 騰訊云支持
- wafer
- Wafer2 快速開發 Demo - PHP
- WXAPI
- api列表