jsbridge實作及原理_JSBridge 介紹及實作原理

JSBridge 介紹

JSBridge是一座用JavaScript搭建起來的橋，一端是web，一端是native。我們搭建這座橋的目的也很簡單，讓native可以調用web的js代碼，讓web可以 “調用” 原生的代碼。

實作原理

Android實作：

我們來想想如何實作上面的功能。難點有這麼幾個：

1、如何建立一個webview？如何在webview中加載網頁？

2、web如何調用android？

對于第一點，不是本文的重點，你可以參考這個連結來自行解決。

對于第二點，我們繼續分析。

web和android，就像是一個中國人和一個美國人。想要不同語言之間的人進行有效溝通的話，必須要滿足以下兩個基本要素。

你在聽我說話 => 你在監聽我的動作 =>javascript的某個行為會被java捕獲到。我們手上有一本中英雙譯字典 => 我們之間有協定規範 => 對于傳輸的資訊，javascript和java要用規定好的方式來編碼和解碼

先來看動作監聽。javascript的哪些操作會被java捕獲到？整個web頁面都是運作在java提供的webview執行個體當中。javascript執行以下四種行為會被webview監聽到，箭頭後面是對應觸發的Java方法。

1、window.alert => onJSAlert

2、window.confirm => onJSConfirm

3、window.prompt => onJsPrompt

4、window.location => shouldOverrideUrlLoading

好，動作監聽我們解決了。接下來是要制定通信協定。說到通信協定，我們首先想到的是http協定，沒錯，我們可以仿照http協定制定我們自己的協定。比如http協定是這樣子的： http://www.baidu.com?param 。 我們制定的協定是這樣子： ywjs://toast?message

其中ywjs是scheme，代表我們用的是某種自定義的協定。toast是方法名，也就是我希望調用的是系統的toast方法。toast方法所需要的參數，也就是彈出的提示字元串。

相關文章介紹：

IOS實作：

IOS實作與Android第4種方式相同。Javascript調用Native，并沒有現成的API可以直接拿來用，而是需要間接地通過一些方法來實作。UIWebView有個特性：在UIWebView内發起的所有網絡請求，都可以通過delegate函數在Native層得到通知。這樣，我們就可以在UIWebView内發起一個自定義的網絡請求，通常是這樣的格式：jsbridge://methodName?param1=value1&param2=value2

于是在UIWebView的delegate函數中，我們隻要發現是jsbridge://開頭的位址，就不進行内容的加載，轉而執行相應的調用邏輯。

首先通過iframe發起一個網絡請求，這個請求的作用是喚起Native APP的分享元件，将網頁分享到朋友圈或分享給其他好友。JS端的核心代碼如下所示：

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);

setTimeout(function() {

iframe.remove();

}, 100);

相關文章介紹：