JSBridge橋接原理-有解無憂

一、前言

如今的互聯網時代也稱移動互聯網時代，基本上每個人每天都會花費大量時間在移動設備上，早期的移動端應用大都使用原生開發（android，ios），而現在的移動開發技術選型上基本都是混合開發（Hybrid），混合開發是一種開發模式，指使用多種開發模型開發App，通常會涉及到兩大類技術：原生Native、Web H5

原生技術主要指iOS（Objective C）、Android（Java），原生開發效率較低，開發完成需要重新打包整個App，發布依賴用戶的更新，性能較高功能覆寫率更高,發布流程較為復雜
Web H5主要由HTML、CSS、JavaScript組成，Web可以更好的實作發布更新，跨平臺也更加優秀，但性能較低，功能實作也受限

混合開發的意義就在于吸取兩者的優點，而且隨著手機硬體的升級迭代、系統（Android 5.0+、ISO 9.0+）對于Web特性的較好支持，H5的劣勢被逐漸縮小

原生、Web相互通信都離不開JSBridge，

二、JSBridge做了些什么？

在Hybrid模式下，H5會經常需要使用Native的功能，比如打開二維碼掃描、呼叫原生頁面、獲取用戶資訊等，同時Native也需要向Web端發送推送、更新狀態等，而JavaScript是運行在單獨的JS Context中（Webview容器、JSCore等），與原生有運行環境的隔離，所以需要有一種機制實作Native端和Web端的雙向通信，這就是JSBridge：以JavaScript引擎或Webview容器作為媒介，通過協定協議進行通信，實作Native端和Web端雙向通信的一種機制，

通過JSBridge，Web端可以呼叫Native端的Java介面，同樣Native端也可以通過JSBridge呼叫Web端的JavaScript介面，實作彼此的相互呼叫，

三、什么是WebView？

首先了解下webView，webView是移動端(原生)提供的運行JavaScript的環境，它是一種嵌入式瀏覽器，原生應用可以用它來展示網路內容，可與頁面JavaScript互動，實作混合開發，其中Android和iOS又有些不同：

Android的WebView采用的是低版本和高版本使用了不同的webkit內核，4.4后直接使用了Chrome，

iOS中UIWebView算是自IOS2就有，但性能較差，特性支持較差，WKWebView是iOS8之后的升級版，性能更強特性支持也較好，

WebView控制元件除了能加載指定的url外，還可以對URL請求、JavaScript的對話框、加載進度、頁面互動進行強大的處理，之后會提到攔截請求、執行JS腳本都依賴于此，

四、JSBridge的實作原理

Web端和Native可以類比于Client/Server模式，Web端呼叫原生介面時就如同Client向Server端發送一個請求類似，JSBridge在此充當類似于HTTP協議的角色，實作JSBridge主要是兩點：

將Native端原生介面封裝成JavaScript介面
將Web端JavaScript介面封裝成原生介面

4.1 Native->Web

首先來說Native端呼叫Web端，這個比較簡單，JavaScript作為解釋性語言，最大的一個特性就是可以隨時隨地地通過解釋器執行一段JS代碼，所以可以將拼接的JavaScript代碼字串，傳入JS決議器執行就可以，JS決議器在這里就是webView，

4.2 Web->Native

Web呼叫Native端主要有兩種方式

4.2.1 攔截Webview請求的URL Schema
URL Schema是類URL的一種請求格式，格式如下：

<protocol>://<host>/<path>?<qeury>#fragment

我們可以自定義JSBridge通信的URL Schema，比如：jsbridge://showToast?text=hello
Native加載WebView之后，Web發送的所有請求都會經過WebView組件，所以Native可以重寫WebView里的方法，攔截Web發起的請求，我們對請求的格式進行判斷：
如果符合我們自定義的URL Schema，對URL進行決議，拿到相關操作、操作，進而呼叫原生Native的方法
如果不符合我們自定義的URL Schema，我們直接轉發，請求真正的服務

Web發送URL請求的方法有這么幾種：

a標簽
location.href
使用iframe.src
發送ajax請求
這些方法，a標簽需要用戶操作，location.href可能會引起頁面的跳轉丟失呼叫，發送ajax請求Android沒有相應的攔截方法，所以使用iframe.src是經常會使用的方案

安卓提供了shouldOverrideUrlLoading方法攔截
IOSUIWebView使用shouldStartLoadWithRequest，
IOSWKWebView則使用decidePolicyForNavigationAction
這種方式從早期就存在，兼容性很好，但是由于是基于URL的方式，長度受到限制而且不太直觀，資料格式有限制，而且建立請求有時間耗時，

4.2.2 向Webview中注入JS API
這個方法會通過webView提供的介面，App將Native的相關介面注入到JS的Context（window）的物件中，一般來說這個物件內的方法名與Native相關方法名是相同的，Web端就可以直接在全域window下使用這個全域JS物件，進而呼叫原生端的方法，

Android（4.2+）提供了addJavascriptInterface注入：

// 注入全域JS物件
webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");

class NativeBridge {
  private Context ctx;
  NativeBridge(Context ctx) {
    this.ctx = ctx;
  }

  // 增加JS呼叫介面
  @JavascriptInterface
  public void showNativeDialog(String text) {
    new AlertDialog.Builder(ctx).setMessage(text).create().show();
  }
}

在Web端直接呼叫這個方法即可：

window.NativeBridge.showNativeDialog('hello');

4.3 帶回呼的呼叫

上面已經說到了Native、Web間雙向通信的兩種方法，但站在一端而言還是一個單向通信的程序，比如站在Web的角度：Web呼叫Native的方法，Native直接相關操作但無法將結果回傳給Web，但實際使用中會經常需要將操作的結果回傳，也就是JS回呼，

所以在對端操作并回傳結果，有輸入有輸出才是完整的呼叫，那如何實作呢？

其實基于之前的單向通信就可以實作，我們在一端呼叫的時候在引數中加一個callbackId標記對應的回呼，對端接收到呼叫請求后，進行實際操作，如果帶有callbackId，對端再進行一次呼叫，將結果、callbackId回傳回來，這端根據callbackId匹配相應的回呼，將結果傳入執行就可以了，

五、開源的JSBridge

實作一個完整的JSBridge是比較復雜的，需要考慮一些低端機型的兼容問題、同步異步呼叫問題，好在已經有開源的JSBridge供我們直接使用了：

DSBridge，主要通過注入API的形式，DSBridge for Android、DSBridge for IOS
JsBridge，主要通過攔截URL Schema，JsBridge
以DSBridge-Android為例：

// Web端代碼
<body>
  <div>
    <button id="showBtn">獲取Native輸入，以Web彈窗展現</button>
  </div>
</body>
// 引入SDK
<script src="https://unpkg.com/dsbridge@3.1.3/dist/dsbridge.js"></script>
<script>
  const showBtn = document.querySelector('#showBtn');
  showBtn.addEventListener('click', e => {
    // 注意，這里代碼不同：SDK在全域注冊了dsBridge，通過call呼叫Native方法
    dsBridge.call('getNativeEditTextValue', '', value => {
      window.alert('Native輸入值' + value);
    })
  });
</script>

// Android代碼
// 使用dwebView替換原生webView
dwebView.addJavascriptObject(new JsApi(), null);

class JSApi {
  private Context ctx;
  public JSApi (Context ctx) {
    this.ctx = ctx;
  }

  @JavascriptInterface
  public void getNativeEditTextValue(Object msg, CompletionHandler<String> handler) {
    String value = ((MainActivity)ctx).editText.getText().toString();
    // 通過handler將value傳給Web端，實作回呼的JSB呼叫
    handler.completed(value);
  }
}

Hybrid開發是目前移動端開發的主流技術選項，其中Native和Web端的雙向通信就離不開JSBridge
其中Native呼叫Web端是直接在JS的Context直接執行JS代碼，Web端呼叫Native端有兩種方法，一種是基于URL Schema的攔截操作，另一種是向JS的Context（window）注入Api，其中注入Api是目前最好的選擇，完整的呼叫是雙向通信，需要一個回呼函式，技術實作上就是使用了兩次單向通信

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/277372.html

標籤：其他

上一篇：EasyClick 原生UI連載十六

下一篇：【Android專案實戰 | 從零開始寫app (七) 】優化主頁導航欄，禁用主頁頁面滑動切換效果