最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JS中bridge的原理與封裝

 更新時間:2022年06月28日 09:33:25   作者:Weastsea  
這篇文章主要介紹了JS中bridge的原理與封裝,文章圍繞主題的相關資料展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下

一、hybird背景介紹

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

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

  • 跳轉原生頁面
  • 獲取原生數(shù)據(jù)
  • 調用原生功能
  • 其他

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

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

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

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

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

前端執(zhí)行調用方式:

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

2、JavaScript調用Native-攔截URLSCHEME

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

前端的一個調用方式:

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

例如:

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

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

目前不建議只使用攔截URLScheme解析參數(shù)的形式,主要存在幾個問題:

  • 連續(xù)調用location.href會出現(xiàn)消息丟失,因為WebView限制了連續(xù)跳轉,會過濾掉后續(xù)的請求。
  • URL會有長度限制,一旦過長就會出現(xiàn)信息丟失因此,類似WebViewJavaScriptBridge,JsBridge這類庫,就結合了注入API的形式一起使用

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

  • iOS: WebViewJavascriptBridge
  • Android: JsBridge

五、我司使用的方案

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

  • 調用app的方法,并返回promise的結果
  • 根據(jù)當前的事件,注冊成功回調,失敗回調,掛載到window上
  • 針對安卓和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
            }
        })
    }

注冊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的原理與封裝的文章就介紹到這了,更多相關JS bridge內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • axios 處理 302 狀態(tài)碼的解決方法

    axios 處理 302 狀態(tài)碼的解決方法

    這篇文章主要介紹了axios 處理 302 狀態(tài)碼的解決方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • Bootstrap自定義文件上傳下載樣式

    Bootstrap自定義文件上傳下載樣式

    這篇文章主要教大家如何使用Bootstrap自定義文件上傳下載樣式,感興趣的小伙伴們可以參考一下
    2016-05-05
  • js帶縮略圖的圖片輪播效果代碼分享

    js帶縮略圖的圖片輪播效果代碼分享

    這篇文章主要介紹了js帶縮略圖的圖片輪播效果,圖片輪播效果特別適合做產(chǎn)品展示,感興趣的小伙伴可以參考下。
    2015-09-09
  • 微信小程序項目實踐之九宮格實現(xiàn)及item跳轉功能

    微信小程序項目實踐之九宮格實現(xiàn)及item跳轉功能

    這篇文章主要介紹了微信小程序項目實踐之九宮格實現(xiàn)及item跳轉功能,需要的朋友可以參考下
    2018-07-07
  • java必學必會之static關鍵字

    java必學必會之static關鍵字

    java必學必會之static關鍵字,static關鍵字是很多朋友在編寫代碼和閱讀代碼時碰到的比較難以理解的一個關鍵字,下面結合大家一起學習static關鍵字
    2015-12-12
  • JS+HTML5實現(xiàn)獲取手機驗證碼倒計時按鈕

    JS+HTML5實現(xiàn)獲取手機驗證碼倒計時按鈕

    這篇文章主要介紹了基于JS+HTML5實現(xiàn)獲取手機驗證碼倒計時按鈕,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • JavaScript解析任意形式的json樹型結構展示

    JavaScript解析任意形式的json樹型結構展示

    這篇文章主要介紹了JavaScript解析任意形式的json樹型結構展示的相關資料,需要的朋友可以參考下
    2017-07-07
  • JS target與currentTarget區(qū)別說明

    JS target與currentTarget區(qū)別說明

    target在事件流的目標階段;currentTarget在事件流的捕獲,目標及冒泡階段。只有當事件流處在目標階段的時候,兩個的指向才是一樣的,而當處于捕獲和冒泡階段的時候,target指向被單擊的對象而currentTarget指向當前事件活動的對象(一般為父級)。
    2011-08-08
  • JavaScript 實現(xiàn)同時選取多個時間段的方法

    JavaScript 實現(xiàn)同時選取多個時間段的方法

    這篇文章主要介紹了JavaScript 實現(xiàn)同時選取多個時間段的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • JS中的Date()使用小結

    JS中的Date()使用小結

    Date() 日期對象是一個構造函數(shù)必須使用new來調用創(chuàng)建我們的日期對象,本文給大家介紹JS中的Date()使用小結,感興趣的朋友一起看看吧
    2024-01-01

最新評論

周宁县| 盐源县| 石狮市| 兴安盟| 大余县| 北辰区| 武隆县| 临沭县| 宽甸| 崇信县| 天门市| 乐都县| 茂名市| 云安县| 克什克腾旗| 工布江达县| 平安县| 铜陵市| 利川市| 靖远县| 井冈山市| 兴义市| 温宿县| 阿克陶县| 偃师市| 柞水县| 祁门县| 宜黄县| 嘉定区| 嘉兴市| 东海县| 南漳县| 安达市| 贺兰县| 靖边县| 锡林浩特市| 湘潭县| 溆浦县| 平和县| 探索| 海原县|