背景

隨著Web技術的發展和移動互聯網的發展，Hybrid技術已經成為一種前端開發的主流技術方案。那什么是Hybrid App呢？

Hybrid App（混合模式移動應用）是指介于web-app、native-app這兩者之間的app，兼具" Native App良好用戶交互體驗的優勢 "和" Web App跨平臺開發的優勢 "。

總的來說，就是既具有APP的體驗和性能，又具有Web靈活的開發模式和跨平臺開發能力。

現有的技術方案

1、H5 + JSBridge，通過JSBridge完成H5和Native的通信，賦予H5一定的端能力。是一種基于WebView UI的解決方案。

2、React-Native，進一步通過JSbridge將js解析為虛擬DOM傳遞到Native，并使用原生進行渲染。

3、小程序解決方案，采用雙線程的渲染機制，將渲染層WebView和邏輯層JavaScriptCore形成獨立的模塊，通過Native進行通信（setData），邏輯層的網絡請求也會由Native進行轉發。在UI方面，采用的是WebView和原生相結合的方式。

技術原理

本文將從jsbridge的原理、實現、雙向通信、接入方式和H5的嵌入方式進行詳細闡述。

jsbridge的原理

客戶端能對WebView中請求進行攔截，都有相應的API：

Android:

// 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;  }}