Native/Webview bridge for Hybrid

Native/Webview bridge for Hybrid

安裝

npm i --save webview-bridge

特色

• 支持自定義app URL scheme
• 支持多種處理方式（所有涵蓋）
• 支持Promise處理回調

使用

import Bridge from 'hybride-webview-bridge'; // 若是客戶端沒有使用URL scheme，則不須要傳遞參數 const WebViewBridge = new Bridge('mqq://'); WebViewBridge.call(); // 將會喚起手機版qq軟件 /**  * 調用原生方法  * @param {String} method 方法名  * @param {Object} params 參數  * @return {Promise} 當收到原生方法執行的返回結果時resolve  */ // WebViewBridge.call(method, params); // for instance WebViewBridge.call('getUserInfo').then(res => { // handle response info }); // for instance WebViewBridge.call('getLocation', { CacheMode: 0 }).then(res => { // handle response info }); 

要求（原理）

一、若是ios開發在ios8及以上系統使用postMessage，請支持js變量window.webkit.messageHandlers.WebViewBridge，內部實現以下：

window.webkit.messageHandlers.WebViewBridge.postMessage(JSON.stringify({ method: 'getLocation', params: { CacheMode: 0, }, }));

二、客戶端注入全局對象 WebViewBridge，並實現call方法，js用法以下：

window.WebViewBridge.call('getLocation', JSON.stringify({ CacheMode: 0, }));

若是沒有實現call方法，則js內部會調用被注入WebViewBridge對象方法，如：

window.WebViewBridge.getLocation(JSON.stringify({ CacheMode: 0, }));

三、若是不支持postMessage發送消息，也沒有注入全局js對象，最一種就是使用URL scheme了，客戶端url攔截處理，這種方式須要使用setTimeout延時處理，避免後者覆蓋前者（同時調用屢次）協議地址相似以下：

const msg = decodeURIComponent(JSON.stringify({ method: 'getLocation', params: { CacheMode: 0, }, })); const URLScheme = `qq://${msg}`;

callback 回調

當調用 WebViewBridge.call('getUserInfo')成功，要求客戶端調用前端 WebViewBridgeCallback 方法進行響應，源碼以下：

/**
 * 調用原生客戶端方法後執行的回調函數  * @param {String} method 方法名  * @param {Object|String} res 回調響應信息  */ window.WebViewBridgeCallback = (method, res) => { if (typeof res === 'String') { res = JSON.parse(res); } window.WebViewBridge.receiveResponse(method, res); };

知識點擴充

android

安卓經過addJavaScriptInterface方法注入Java對象到js上下文對象window中，因爲4.2如下版本中，該方法有漏洞， 解決該漏洞的方法有兩種，第一種經過URL scheme解決，第二種經過以下方案解決：

webview.loadUrl("javascript:if(window.WebViewBridge === undefined) { window.WebViewBridge = { call: function(jsonString) { window.prompt(jsonString); }}};");

在webview中經過loadUrl定義一個window.WebViewBridge及call通用方法，方法體內執行了window.prompt，而後在WebChromeClient類中處理onJsPrompt，設置攔截規則，onJsPrompt返回true，將不處理dialog；

推薦文章：安卓Webview

ios

ios8系統及以上版本能夠經過注入 window.webkit.messageHandlers.XXX.postMessage方法，咱們可使用這個方法直接向 Native 層傳值，很是方便。 推薦文章：postMessage技術 ios官方webkit網站

ios7開始，還可使用javascriptcore注入Java對象到js上下文對象window中 最後一種 ios也支持URL scheme

推薦文章：WKWebview相關

 

我的微信公衆號：