淺談JSBridge

時間 2020-04-22

標籤淺談 jsbridge 简体版

原文原文鏈接

1 JSBridge在Hybrid開發中的做用

JSBridge是鏈接Native(客戶端)和JavaScript前端的橋樑，經過JSBridge 兩端的代碼才能夠通訊。前端

簡單的說，JSBridge 一方面給js提供了調用native的方法，而反過來，它也承接了native調用js事件隊列的封裝。JSBridge構建了js和native之間的通訊，並且是雙向的。android

注：scheme協議：能夠簡單理解爲自定義的url 形式如：[scheme:][//domain][path][?query][#fragment] 舉個栗子：jsbridge://openPage?url=https://www.baidu.com/ios

2 js調用native的方法

2.1 native經過攔截約定好的scheme協議去執行一些native的方法

約定固定格式的scheme協議，例如：[customscheme:][//methodName][?params={data, callback}]web

customscheme：自定義須要攔截的scheme
methodName：須要調用的native的方法
params：傳遞給native的參數 和 回調函數名
複製代碼

Native在監聽到這種地址以後，就不會加載內容，而是執行相應的某段邏輯。c#

發起這樣一個網絡請求有兩種方式：1. 經過localtion.href；2. 經過iframe方式；經過location.href有個問題，就是若是咱們連續屢次修改window.location.href的值，在Native層只能接收到最後一次請求，前面的請求都會被忽略掉。網絡

因此更穩妥的方式是經過iframe, 簡單的例子以下：app

var url = 'jsbridge://doAction?title=分享標題&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';  
var iframe = document.createElement('iframe');  
iframe.style.width = '1px';  
iframe.style.height = '1px';  
iframe.style.display = 'none';  
iframe.src = url;  
document.body.appendChild(iframe);
// 100毫秒後移除
setTimeout(function() {  
    iframe.remove();
}, 100);
複製代碼

而後Webview就能夠攔截這個請求，而且解析出相應的方法和參數。dom

2.2 經過在webview中掛載到全局對象上的對象方法來調用native的方法

舉個栗子：window.JSBridge.openPage("https://www.baidu.com") native注入到webview全局對象爲JSBridge，經過全局對象JSBridge 能夠調用掛載在其上的方法，來觸發調用native的方法。異步

注：也就是說，在native的開發中，開發者能夠給webview注入全局變量並掛載在window對象上，這樣前端js就能夠經過window上全局對象方法來調用一些native的方法。編輯器

前端須要去了解這個全局對象，是在webview初始化時候注入的，仍是在頁面加載完以後注入的，也就是同步注入仍是異步注入的問題若是是異步注入的，則須要前端的代碼中，添加對象的ready監聽機制

2.3 android webview還會攔截 js調用的alert、confirm、prompt方法

經過在js裏使用這三個方法也能進行js對native的通訊,通常是prompt，前端不咋用

3 native調用js的方法

3.1 IOS

ios能夠經過webview的evaluateJavaScript:completionHandler方法，該方法返回js腳本的執行結果。

// Swift
webview.stringByEvaluatingJavaScriptFromString("Math.random()")  
能夠看到它就是調用了window下的一個對象（執行了Math.random()方法），因此若是咱們要讓native來調用js寫的方法，就要讓這個方法在window下能訪問到。
複製代碼

3.2 Android

android能夠經過webview的loadUrl()去調用js代碼，也可使用evaluateJavascript()來調用js代碼

android中evaluateJavascript的使用比loadUrl更高效也更簡潔，惟一很差的是須要android 4.4以上的版本支持

4 JSBridge如何引用

4.1 由 Native 端進行注入

注入方式和 Native 調用 JavaScript 相似，直接執行橋的所有代碼。

它的優勢在於：橋的版本很容易與 Native 保持一致，Native 端不用對不一樣版本的 JSBridge 進行兼容；與此同時，它的缺點是：注入時機不肯定，須要實現注入失敗後重試的機制，保證注入的成功率，同時 JavaScript 端在調用接口時，須要優先判斷 JSBridge 是否已經注入成功。