vue項目使用WebViewJavascriptBridge

WebViewJavascriptBridge當 H5 頁面與 IOS 端交互比較復雜時，

比如頁面需要獲取 IOS 端傳回的返回值，或者 IOS 端需要調用 js 方法。

可以通過第三方庫來實現，我們項目用的是 WebViewJavascriptBridge。

下面介紹我怎么在 vue 項目中使用 WebViewJavascriptBridge

WebViewJavascriptBridge GitHub 地址創建 src/config/bridge.js 文件，

用於封裝 WebViewJavascriptBridge將以下代碼拷貝到 bridge.js 文件中

function setupWebViewJavascriptBridge (callback) {

  if (window.WebViewJavascriptBridge) {

    return callback(window.WebViewJavascriptBridge)  }

  if (window.WVJBCallbacks) {

    return window.WVJBCallbacks.push(callback)  }

  window.WVJBCallbacks = [callback]

  let WVJBIframe = document.createElement('iframe')

  WVJBIframe.style.display = 'none'

  WVJBIframe.src = 'https://__bridge_loaded__'  document.documentElement.appendChild(WVJBIframe)

  setTimeout(() => {

    document.documentElement.removeChild(WVJBIframe)  }, 0)

}

export default {

    callhandler (name, data, callback) {

            setupWebViewJavascriptBridge(function (bridge) {

                  bridge.callHandler(name, data, callback)    })

            },

    registerhandler (name, callback) {

            setupWebViewJavascriptBridge(function (bridge) {

                      bridge.registerHandler(name, function (data, responseCallback) {

                callback(data, responseCallback)

          })

      })

  }

}

 

在 main.js 中引入該文件

import Bridge from './config/bridge.js'
Vue.prototype.$bridge = Bridge

 

在需要調用客戶端方法的組件中（事先需要與客戶端同事約定好方法名）

this.$bridge.callhandler('ObjC Echo', params, (data) => {

  // 處理返回數據

})

 

當客戶端需要調用 js 函數時,事先注冊約定好的函數即可

this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {

    alert('JS Echo called with:', data)  responseCallback(data)

})