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

       //做原生操作

    }

}

 

Logo

前往低代码交流专区

更多推荐