Vue与iOS的通信

iOS UIWebView 加载Vue的Html页面（JavaScriptCore）：

• iOS调用Vue方法

1. Vue的方法给原生调用，则需要把方法挂在window下面：

   
   
   image.png

2. 在iOS中这样调用Vue的方法，如下：

   
   
   image.png
   
   

   或者定义JSContext属性，在UIWebViewDelegate的代理方法里：

   
   
   image.png
   
   然后用context来调用js方法：
   
   image.png

• Vue调用iOS方法

1. iOS引入，并声明JSContext类的属性

   
   
   image.png
   
   

   在UIWebViewDelegate的代理方法里面用context属性声明一个方法供js调用：

   
   
   image.png

2. 在Vue中里面直接用window.<方法名>调用iOS的方法：

   
   
   image.png

iOS WKWebView 加载Vue的Html页面（messageHandlers）：

• iOS调用Vue方法

1. Vue的方法给原生调用，则需要把方法挂在window下面：

   
   
   image.png

2. 在iOS中这样调用Vue的方法，如下：

   
   
   image.png

• Vue调用iOS方法

1. 在iOS中定义WKWebViewConfiguration并设置userContentController，遵守WKScriptMessageHandler协议，如下：

   
   
   image.png
   
   

   在WKScriptMessageHandler协议的代理方法里面根据message.name来判断js是否调用并作出相关的处理，message.body即为js传过来的参数：

   
   
   image.png

2. 在Vue中调用iOS的方法，如下：

   
   
   image.png

统一使用WebViewJavascriptBridge：

Github地址
在Vue中引入WebViewJavascriptBridge：

1. 创建 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]
  var WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(function () {
    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)
      })
    })
  }
}

2. 在 main.js 中引入该文件

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

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

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

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

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