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)

})

搜索微信公众号

 “前端小伟的变成历史”

回复 想要你的技术资料（例如：JavaScript） 就会通通免费给你送上

会持续更新各种编程技术视频