Vue和ios、android交互通信

1）原生调用Vue方法

Vue代码

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

ios调用代码

NSString *toVueSting = @"vickylizy";

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

android调用代码

String toVueSting = "vickylizy";
 
webView.loadUrl("javascript:getDataFromNative('"+toVueSting+"')");

or：

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

---

2）Vue调用原生方法

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传值
});

ios代码

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

    }

}

android代码

//Vue调用Android方法
webView.addJavascriptInterface(this,"$App");//添加js监听 这样html就能调用客户端
 
@JavascriptInterface
public void getDataFormVue(String msg) {
     //做原生操作
}