探究Hybrid-APP技術原理
author: @TiffanysBearjavascript
隨着Web技術的發展和移動互聯網的發展,Hybrid技術已經成爲一種前端開發的主流技術方案。那什麼是Hybrid App呢?css
Hybrid App(混合模式移動應用)是指介於web-app、native-app這二者之間的app,兼具" Native App良好用戶交互體驗的優點 "和" Web App跨平臺開發的優點 "。html
總的來講,就是既具備APP的體驗和性能,又具備Web靈活的開發模式和跨平臺開發能力。前端
一、H5 + JSBridge,經過JSBridge完成H5和Native的通訊,賦予H5必定的端能力。是一種基於WebView UI的解決方案。java
二、React-Native,進一步經過JSbridge將js解析爲虛擬DOM傳遞到Native,並使用原生進行渲染。android
三、小程序解決方案,採用雙線程的渲染機制,將渲染層WebView和邏輯層JavaScriptCore造成獨立的模塊,經過Native進行通訊(setData),邏輯層的網絡請求也會由Native進行轉發。在UI方面,採用的是WebView和原生相結合的方式。ios
本文將從jsbridge的原理、實現、雙向通訊、接入方式和H5的嵌入方式進行詳細闡述。git
客戶端能對WebView中請求進行攔截,都有相應的API:github
Android:web
// Android: shouldoverrideurlloading public boolean shouldOverrideUrlLoading(WebView view, String url){ //讀取到url後自行進行分析處理 //若是返回false,則WebView處理連接url,若是返回true,表明WebView根據程序來執行url return true; }
IOS:
// IOS: shouldStartLoadWithRequest - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSURL *url = [request URL]; NSString *requestString = [[request URL] absoluteString]; //獲取url scheme後自行進行處理
所以,在頁面中能夠經過iframe加載src的方式觸發相應的捕獲函數,在捕獲函數中能夠對url中的參數進行解析;此外,Android還能夠經過重寫OnJSPrompt方法,對調用Prompt進行攔截,一樣能實現通訊的目的。
示例:
調起ios端:
function iosInvoke(scheme) { var elem = document.createElement('iframe'); var body = document.body || document.getElementsByTagName('body')[0]; elem.style.display = 'none'; elem.src = scheme; body.appendChild(elem); setTimeout(function () { body.removeChild(elem); elem = null; }, 0); }
調起android端:
function androidInvoke(scheme) { var androidJsBridge = window.Bdbox_android_jsbridge; if (androidJsBridge && androidJsBridge.dispatch) { androidJsBridge.dispatch(scheme); } else { var re = window.prompt('BdboxApp:' + JSON.stringify({ obj: 'Bdbox_android_jsbridge', func: 'dispatch', args: [scheme] })); return re; } }
URL Scheme是什麼
因爲蘋果的app都是在沙盒中,相互是不能訪問數據的。可是蘋果仍是給出了一個能夠在app之間跳轉的方法:URL Scheme。簡單的說,URL Scheme就是一個可讓app相互之間能夠跳轉的協議。每一個app的URL Scheme都是不同的,若是存在同樣的URL Scheme,那麼系統就會響應先安裝那個app的URL Scheme,由於後安裝的app的URL Scheme被覆蓋掉了,是不能被調用的。
設置URL Scheme
xxxapp://communication?args=xx
雙向通訊主要是H5和Native的雙向通訊過程以及參數傳遞、回調執行。
H5通知Native的方式主要有:
h5的嵌入方式: