Vue和Native（iOS和Android）的交互

方法一、

一、原生调用vue方法

1. VUE

---

created() {
    // Vue的方法给原生调用，则需要把方法挂在Window下面
    window.getDataFromNative = this.getDataFromNative;
},
methods: {
  getDataFromNative(params) {
    // params: 原生调用Vue时传值（params）给Vue
    console.log("得到原生传值结果:" + params);
    var dic = {
        'name': "vicky"
    };
    return dic; //回调给原生，可写可不写
  },
}

2. Native

---

Android

String toVueSting = "vickylizy";
 
webView.loadUrl("javascript:getDataFromNative('"+toVueSting+"')");
or：
webView.evaluateJavascript("javascript:getDataFromNative('" + toVueSting + "')", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String s) {
        //此方法可以得到回调值
    }
});

iOS

NSString *toVueSting = @"vickylizy";
 
  NSString *jsStr = [NSString stringWithFormat:@"getDataFromNative('%@')",toVueSting];
 
  [self->_wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {
 
            NSLog(@"返回---%@",d);//回调值
 
    }];

二、Vue调用原生

1. Vue

---

// vue调用Android方法，且传值给Android （Android方法名为 getDataFormVue）
  $App.getDataFormVue({
      title: this.money, //vue给android传值
  })；  
 
// vue调用iOS方法，且传值给iOS （iOS 方法名为 getDataFormVue）
window.webkit.messageHandlers.getDataFormVue.postMessage({
    title: this.money, //vue给iOS传值
});

2. Native

---

Android
// Vue调用Android方法
webView.addJavascriptInterface(this,"$App");//添加js监听 这样html就能调用客户端

@JavascriptInterface
public void getDataFormVue(String msg) {
     //做原生操作
}

iOS

#pragma mark -WKScriptMessageHandler
 
- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message{
 
    if ([message.name isEqualToString:@"getDataFormVue"]) {
 
        NSLog(@"是什么？---%@",message.body);
 
       //做原生操作

    } 
}
 

方法二、

统一使用WebViewJavascriptBridge：
在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端同事约定好方法名）

//客户端已经注册好一个名为“ObjC Echo”的方法，H5直接进行调用（方法名也为“ObjC Echo”）就行，调用的时候可以传客户端需要的参数
this.$bridge.callhandler('ObjC Echo', params, (data) => {
  // 处理返回数据
})

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

//注册一个方法（方法名是“JS Echo”），客户端进行调用（方法名也是“JS Echo”），responseCallback是回调函数
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
  alert('JS Echo called with:', data)
  responseCallback(data)
})