Vue和ios、android交互通信

1）原生调用Vue方法

Vue代码

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

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() {    @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就能调用客户端 @JavascriptInterfacepublic void getDataFormVue(String msg) {     //做原生操作}

Vue和ios、android交互通信

Vue和ios、android交互通信

1）原生调用Vue方法

2）Vue调用原生方法

更多相关文章

随机推荐