vue使用WebViewJavascriptBridge联调app

2018-04-12

使用的是vue2.0框架，现在在做的项目是 hybrid 开发，H5 页面会嵌入到 IOS或者Android 客户端 app 中，于是就涉及到了 H5 与 APP 交互的问题。在这里记录一下项目中用到的交互方式，重点介绍 WebViewJavascriptBridge。

使用 WebViewJavascriptBridge

当 H5 页面与 IOS 端交互比较复杂时，比如页面需要获取 IOS/Android 端传回的返回值，或者 IOS/Android 端需要调用 js 方法。

可以通过第三方库来实现，我们项目用的是 WebViewJavascriptBridge。下面介绍我怎么在 vue 项目中使用 WebViewJavascriptBridge

WebViewJavascriptBridge GitHub 地址

创建 src/utils/webViewJavascriptBridge.js 文件，用于封装 WebViewJavascriptBridge
将以下代码拷贝到 webViewJavascriptBridge.js 文件中
以下代码可区别ios与Android

/**
     * 函数描述：js调用webview事件
 *
 * jsBridge.callHandler(method, data, callBack(response));
 * @param method {string} 方法名
 * @param data {Object} 参数
 * @return {Object} 回调
 */

/**
 * 函数描述：webView调用JS事件
 *
 * jsBridge.registerHandler(method, callBack(response));
 * @param method {string} 方法名
 * @return {Object} 回调
 */

var JsBridge = {
  init: function(callback) {
    var u = navigator.userAgent
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (!isiOS) {
      if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
      } else {
        document.addEventListener(
          'WebViewJavascriptBridgeReady',
          function() {
            callback(window.WebViewJavascriptBridge)
          },
          false
        )
      }
    } else {
      if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
      }
      if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback)
      }
      window.WVJBCallbacks = [callback]
      var WVJBIframe = document.createElement('iframe')
      WVJBIframe.style.display = 'none'
      WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
      document.documentElement.appendChild(WVJBIframe)
      setTimeout(function() {
        document.documentElement.removeChild(WVJBIframe)
      }, 0)
    }
  },

  first: function() {
    var u = navigator.userAgent
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (!isiOS) {
      var _this = this
      _this.init(function(bridge) {
        bridge.init(function(message, responseCallback) {
          const data = { result: 0 }
          responseCallback(data)
        })
      })
    }
  },

  registerHandler: function(name, fun) {
    var _this = this
    _this.init(function(bridge) {
      bridge.registerHandler(name, fun)
    })
  },

  callHandler: function(name, data, fun) {
    var _this = this
    _this.init(function(bridge) {
      bridge.callHandler(name, data, fun)
    })
  }
}

JsBridge.first()

export default {
  JsBridge
}

引入Bridge

import Bridge from '@/utils/webViewJavascriptBridge.js'
Vue.prototype.$bridge = Bridge.JsBridge

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

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

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

this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
  alert('JS Echo called with:', data)
  responseCallback(data)
})