手機端展示集成方案：混合開發
目錄 |
|
混合開發
在上次的《移動端H5組件化開發方案》提出的4種組件化方案中，混合開發（hybrid）方案比較流行，也適合當前項目的現實情況。其實混合開發指使用多種語言，多種接口開發應用，並不是具體的開發方案，混合開發也分很多派系，包括瀏覽器套殼派（Ionic和Uni-app）、原生控件映射派（React Native和Weex）、系統API封裝派（Flutter和QT）等，本文重點介紹基於WebView套殼的混合開發的技術細節。
基於WebView的混合開發
在多種混合開發解決方案之中，基於WebView的方案是最流行的，並且會越來越流行，相關的框架包括Ionic、uni-app，首先總結一下瀏覽器套殼開發流行的幾點原因：
低成本：web語言最流行、使用簡單、用戶多、跨平臺。
性能代價小：和原生相比，跨平臺語言犧牲的性能可忽略。
方便組件化：集成其他廠家的頁面非常方便。
雖然和原生控件相比，瀏覽器套殼的性能並不高，但webview最大的優勢在於低成本：html/JS/css是最通用，易上手，用戶數量最大的UI開發語言，跨平臺性非常強：一套代碼可以部署到多個平臺。和業務邏輯相比，UI界面本身並不佔太多的性能，隨着移動端硬件的更新換代，瀏覽器套殼的性能影響可以忽略不計。
WebView基於開源的chromium瀏覽器引擎，是Android/IOS端原生提供的接口，可以加載Web頁面，像淘寶、支付寶等app都是在外邊弄個原生APP的殼，裏面全是H5頁面，對於這種交互渲染要求不是特別高的項目，基本都是這麼玩的。最重要的是，使用通用語言可以輕鬆地整合其他廠家開發的頁面到你的app中，不用強制所有廠家都使用相同的技術，方便組件化。
父子頁面通訊
主頁和子頁處於不同的進程，進程間通訊方式是通過雙方的事件響應機制傳遞序列化格式的信息。在《前端父子頁面通信解決方案》一文中介紹過，常見的序列化格式包括文本、JSON、結構化克隆對象、二進制格式等，在移動端混合開發中，最常用的是JSON或二進制格式。
無論什麼格式，都要通過官方提供的接口JSbridge來通信，至於通信的規則需要和各個廠家協商一致，原生（java）和H5（js）雙向通信涉及到的關鍵函數如下圖：
UI與接口的協商
想要和負責業務子系統的各個廠家完成組件化協作開發，至少需要協商UI和接口，使所有廠家在這2個地方保持一致：
UI規範：主題樣式、操作習慣，選擇Vue+Vant框架組合。
接口規範：接口字段名稱、類型，以JSON字典爲主體。
UI規範：Vue + Vant
VueJS：https://cn.vuejs.org/
Vant：https://youzan.github.io/vant/
移動端H5前端最流行的框架組合是mvvm漸進式框架VueJS和基於Vue的UI框架Vant。我們將推薦廠家用這2個框架開發子頁面，以統一樣式和操作習慣。Vue作爲最流行的H5框架就不多說了，Vant的一些特性如下：
國產開源，中文文檔完整
輕量級UI框架，可以按需引入
基於Vue/React、微信小程序
支持Typescript、SSR
除了Vue和Vant，H5開發者時常使用的第三方庫包括但不限於：
ESlint：TS/JS代碼格式/語義檢查工具，包括prettier
Webpack：項目打包發佈工具，包括Babel
TypeScript：有類型的TS語言
scss/less：CSS預編譯語言
接口規範
父子頁面之間不僅需要通信，更多的時候需要調用對方的功能，同時要傳相應的參數，所以我們需要定義了一套以JSON爲基礎的通信格式，下面列舉兩個實例：
// js向java申請攝像頭使用權限{"type": "callCamera","deviceId": "Logitech-C1000e","token": "94c2ceef2a334"}// java向js傳繪圖數據{"type": "chartService","data": [1.0, 2.0, 3.0, 4.0],"chartType": "line"}
權限控制
首先權限控制不用廠家做任何事情，全部由我們開發的主頁來鑑權，由我們決定哪個用戶能進入哪個子頁面。如果到時候實在需要子頁面也參與鑑權，就通過JSbridge通信。
<完>
本文分享自微信公衆號 - WebHub（myWebHub）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。