JS中bridge的原理與封裝實例分析

本篇內容主要講解“JS中bridge的原理與封裝實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS中bridge的原理與封裝實例分析”吧!

一、hybird背景介紹

一般原生app發版周期長，而web版的app 開發速度快，周期短，所以hybird-H5 就是，web頁面嵌入到app 的webview中，把Bridge作為native 與 web 頁面溝通的橋梁。

1、借助原生可以實現以下能力

• 跳轉原生頁面

• 獲取原生數據

• 調用原生功能

• 其他

二、 我們可以看一下純H5和 app應用之間的區別

三、JsBridge 原理以及實現方式

從詞意就了解到是js和Native與native之溝通的橋梁，實際上可以說是一種通信方式，而這種方式也類比于JSONP的交互方式，只是類比的對象放到了js與native身上，Native通過橋來調用js的方法，相反js通過橋也能調起native的一些功能。

1、 JavaScript調用Native-注入API方式

通過WebView提供的接口，向JavaScript的window中注入對象或者方法，讓JavaScript調用時，直接執行相應的Native代碼邏輯，達到JavaScript調用Native的目的。

前端執行調用方式：

ioswindow.jsSendMessage(message);
androidwindow.jsSendMessage.getNativeData()

2、JavaScript調用Native-攔截URLSCHEME

行為(應用的某個功能)
         |
scheme://[path][?query]
    |                    |
應用標識 功能需要的參數

前端的一個調用方式：

js直接請求定義好的bridge://loaded協議就能觸發native端的攔截

例如：

<href="bridge://loaded" rel="external nofollow" >觸發app</a>

3、兩種方式優缺點

目前不建議只使用攔截URLScheme解析參數的形式，主要存在幾個問題：

• 連續調用location.href會出現消息丟失，因為WebView限制了連續跳轉，會過濾掉后續的請求。

• URL會有長度限制，一旦過長就會出現信息丟失因此，類似WebViewJavaScriptBridge，JsBridge這類庫，就結合了注入API的形式一起使用

四、 現有開源解決方案

• iOS： WebViewJavascriptBridge

• Android： JsBridge

五、我司使用的方案

我司主要使用的是注入API方式：

• 調用app的方法，并返回promise的結果

• 根據當前的事件，注冊成功回調，失敗回調，掛載到window上

• 針對安卓和ios， 需要兼容數據格式

• 在根據安卓和ios判斷執行不同的方法

• Android 傳送字符串

• iOS 傳送 json

代碼如下： 核心邏輯如下

 if (isAndroid) {
        data = JSON.stringify(data)
        // 安卓掛載的方法
        window.JSActionBridge.handlerAction(
            event,
            data,
            successName,
            failName
        )
    }
    if (isIOS) {
   // ios掛載的方法
  window.webkit.messageHandlers.JSActionBridge.postMessage({
            method: 'handlerAction',
            data: {
                actionEvent: event,
                paramsJsonValue: data,
                successCallback: successName,
                errorCallback: failName
            }
        })
    }

注冊app 調用的方法：

registerFn (fnName, fn) {
    if (typeof fnName !== 'string') {
        throw TypeError('Illegal fnName: Not an string')
    }
    if (typeof fn !== 'function') {
        throw TypeError('Illegal fn: Not an function')
    }

    window[fnName] = function (data) {
        if (isIOS) {
            fn(data)
        }
        if (isAndroid) {
            data = data || '{}'
            fn(JSON.parse(data))
        }
    }
},

注銷app調用的方法：

unregisterFn (fnName) {
    if (typeof fnName !== 'string') {
        throw TypeError('Illegal fnName: Not an string')
    }
    delete window[fnName]
},

到此，相信大家對“JS中bridge的原理與封裝實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！