一、hybird背景介紹

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

1、借助原生可以實(shí)現(xiàn)以下能力

• 跳轉(zhuǎn)原生頁(yè)面
• 獲取原生數(shù)據(jù)
• 調(diào)用原生功能
• 其他

二、 我們可以看一下純H5和 app應(yīng)用之間的區(qū)別

三、JsBridge 原理以及實(shí)現(xiàn)方式

從詞意就了解到是js和Native與native之溝通的橋梁，實(shí)際上可以說(shuō)是一種通信方式，而這種方式也類(lèi)比于JSONP的交互方式，只是類(lèi)比的對(duì)象放到了js與native身上，Native通過(guò)橋來(lái)調(diào)用js的方法，相反js通過(guò)橋也能調(diào)起native的一些功能。

1、 JavaScript調(diào)用Native-注入API方式

通過(guò)WebView提供的接口，向JavaScript的window中注入對(duì)象或者方法，讓JavaScript調(diào)用時(shí)，直接執(zhí)行相應(yīng)的Native代碼邏輯，達(dá)到JavaScript調(diào)用Native的目的。

前端執(zhí)行調(diào)用方式：

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

2、JavaScript調(diào)用Native-攔截URLSCHEME

行為(應(yīng)用的某個(gè)功能)
         |
scheme://[path][?query]
    |                    |
應(yīng)用標(biāo)識(shí) 功能需要的參數(shù)

前端的一個(gè)調(diào)用方式：

js直接請(qǐng)求定義好的bridge://loaded協(xié)議就能觸發(fā)native端的攔截

例如：

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

3、兩種方式優(yōu)缺點(diǎn)

目前不建議只使用攔截URLScheme解析參數(shù)的形式，主要存在幾個(gè)問(wèn)題：

• 連續(xù)調(diào)用location.href會(huì)出現(xiàn)消息丟失，因?yàn)閃ebView限制了連續(xù)跳轉(zhuǎn)，會(huì)過(guò)濾掉后續(xù)的請(qǐng)求。
• URL會(huì)有長(zhǎng)度限制，一旦過(guò)長(zhǎng)就會(huì)出現(xiàn)信息丟失因此，類(lèi)似WebViewJavaScriptBridge，JsBridge這類(lèi)庫(kù)，就結(jié)合了注入API的形式一起使用

四、 現(xiàn)有開(kāi)源解決方案

• iOS： WebViewJavascriptBridge
• Android： JsBridge

五、我司使用的方案

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

• 調(diào)用app的方法，并返回promise的結(jié)果
• 根據(jù)當(dāng)前的事件，注冊(cè)成功回調(diào)，失敗回調(diào)，掛載到window上
• 針對(duì)安卓和ios， 需要兼容數(shù)據(jù)格式
• 在根據(jù)安卓和ios判斷執(zhí)行不同的方法
• 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
            }
        })
    }

注冊(cè)app 調(diào)用的方法：

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))
        }
    }
},

注銷(xiāo)app調(diào)用的方法：

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

到此這篇關(guān)于JS中bridge的原理與封裝的文章就介紹到這了,更多相關(guān)JS bridge內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論