本文旨在介紹幾種hybrid解決方案的渲染區(qū)別, 對hybrid學(xué)習(xí)做粗略學(xué)習(xí),便于以后技術(shù)選型時能清楚各自的優(yōu)劣,對其原理做大概了解.
參考學(xué)習(xí):
https://juejin.im/post/5b4ff3bee51d4519721b9986
https://zhuanlan.zhihu.com/p/41502551
http://vczero.github.io/react_native/H5-React-Native-Native.html
https://juejin.im/entry/58842a4a128fe10068336681
http://yanni4night.github.io/NWBridge/
https://75team.com/post/ios-webview-and-js.html
hybrid定義
Hybrid App,俗稱混合應(yīng)用,即混合了 Native技術(shù) 與 Web技術(shù) 進(jìn)行開發(fā)的移動應(yīng)用。其實(shí)是在原生的 App 中,使用 WebView 作為容器直接承載 Web頁面。因此,最核心的點(diǎn)就是 Native端 與 H5端 之間的雙向通訊層.
三種Hybrid混合方案分析
現(xiàn)在比較流行的混合方案主要有三種,主要是在UI渲染機(jī)制上的不同:
接下來我們針對第一種方案做稍微詳細(xì)一點(diǎn)點(diǎn)的了解...
基于 WebView 的機(jī)制和開放的 API的三種方案
App中 H5 的接入方式
將 H5 接入 App 中通常有兩種方式:
使用內(nèi)置包H5方法的流程:
H5: 每個代碼包都有一個唯一且遞增的版本號;
Native: 提供包下載且解壓到對應(yīng)目錄的服務(wù),前端可以由下面這個協(xié)議來調(diào)用該功能
服務(wù)端: 提供一個接口,可以獲取線上最新代碼包的版本號和下載地址。
1、前端更新代碼打包后按版本號上傳至指定的服務(wù)器上;
2、每次打開頁面時,H5請求接口獲取線上最新代碼包版本號,并與本地包進(jìn)行版本號比對,當(dāng)線上的版本號 大于 本地包版本號時,發(fā)起包下載協(xié)議:
3、客戶端接受到協(xié)議后,直接去線上地址下載最新的代碼包,并解壓替換到當(dāng)前目錄文件。
擁有這樣的機(jī)制后,H5在開發(fā)后,就可以直接打包將包上傳到對應(yīng)的服務(wù)器上,這樣在 App 中打開頁面后,即可以實(shí)時的熱更新。
總結(jié)
在搜資料的時候看到一段話,覺得很有道理,就摘抄了下來.希望作者不要介意,已經(jīng)忘了是哪篇文章了抱歉了>_<
如果你了解這些東西的本質(zhì)其實(shí)就很清楚了。動態(tài)或者腳本語言要跟本地語言互通要具備如下幾點(diǎn):
1.本地語言有一個runtime機(jī)制來對對象的方法調(diào)用進(jìn)行動態(tài)解析。
2.本地語言一定有一個腳本的解析引擎
3.建立一個腳本語言到本地語言的映射表,KEY是腳本語言認(rèn)識的符號,VALUE是本地語言認(rèn)識的符號。通過這個映射表來構(gòu)建從腳本到本地的調(diào)用。