Vue和iOS、Android交互

最新推荐文章于 2024-06-18 23:23:06 发布

vickylizy

最新推荐文章于 2024-06-18 23:23:06 发布

阅读量6.8k

点赞数 5

分类专栏： Vue 文章标签： Vue iOS Android 交互

本文链接：https://blog.csdn.net/vickylizy/article/details/85098857

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、原生调用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、原生

安卓

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、原生

安卓

//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);

       //做原生操作

    }

}