vue项目使用WebViewJavascriptBridge

WebViewJavascriptBridge当 H5 页面与 IOS 端交互比较复杂时，

比如页面需要获取 IOS 端传回的返回值，或者 IOS 端需要调用 js 方法。

可以通过第三方库来实现，我们项目用的是 WebViewJavascriptBridge。

下面介绍我怎么在 vue 项目中使用 WebViewJavascriptBridge

创建 src/config/bridge.js 文件，

用于封装 WebViewJavascriptBridge将以下代码拷贝到 bridge.js 文件中

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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

在需要调用客户端方法的组件中（事先需要与客户端同事约定好方法名）

?

1 2 3 4 5

this.$bridge.callhandler('ObjC Echo', params, (data) => {     // 处理返回数据   })

　　

当客户端需要调用 js 函数时,事先注册约定好的函数即可

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

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

})