VUE与Android和IOS原生传值

一.Android向Vue传数据

1.Android端传数据

android5.0之前的可以用下面的方式：

webView.loadUrl("javascript:getDataFromNative('" + mParam + "')");

android5.0之后的可以用下面的方式：

webView.evaluateJavascript("javascript:getDataFromNative('" +mId +"')", new ValueCallback() {

@Override

    public void onReceiveValue(String s) {

//此方法可以得到回调值

        ZJToastUtil.showShort(s);

    }

});

以上两种方法要在webView加载完成后调用，如下在onPageFinished后调用才有效：

webView.setWebViewClient(new WebViewClient() {      

                  @Override           

 public void onPageFinished(WebView view, String url) {      

          super.onPageFinished(view, url);                webView.loadUrl("javascript:getDataFromNative('" + mParam + "')");                webView.evaluateJavascript("javascript:getDataFromNative('" + mId + "')", new ValueCallback() {           

         @Override                  

  public void onReceiveValue(String s) {                        //此方法可以得到回调值                         }                });            }        });    }

2.IOS端传数据

也要在网页加载完调用才生效

NSString *toVueSting = @"vickylizy";

NSString *jsStr = [NSString stringWithFormat:@"getDataFromNative('%@')",toVueSting];

[self->_wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {

NSLog(@"返回---%@",d);//回调值

}];

3.Vue端接收数据

created() {

    //Vue的方法给原生调用，则需要把方法挂在Window下面

    window.getDataFromNative = this.getDataFromNative;

  },

 methods: {

    getDataFromNative(params) {

      //params: 原生调用Vue时传值（params）给Vue

      console.log("得到原生传值结果:" + params);

      // alert(params);

      //  var dic = {

      //     'name': "vicky"

      // };

      // return dic; //回调给原生，可写可不

    },

}

二.Vue向Android 端传数据

1.Vue端传值

clickFunc(item) {

      // alert(item.contracttitle);

      const u = navigator.userAgent;

      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

      if (isiOS) {

        //vue调用iOS方法，且传值给iOS （iOS 方法名为 onItemClick）

        window.webkit.messageHandlers.onItemClick.postMessage(

          item.contracttitle

        );

      } else {

        //vue调用Android方法，且传值给Android （Android方法名为 onItemClick）

        $App.onItemClick(

         "要传的数据"  vue给android传值

        );

      }

    },

2.Android端接收数据

//Vue调用Android方法

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

@JavascriptInterface

public void onItemClick(String msg) {

    Intent intent = new Intent(this, ProjectDetailActivity.class);

    intent.putExtra(ProjectDetailActivity.PROJECT_NAME, msg);

    startActivity(intent);

}

 3.IOS端接收数据

#pragma mark -WKScriptMessageHandler

- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message{

if ([message.name isEqualToString:@"onItemClick"]) {

NSLog(@"是什么？---%@",message.body);

//做原生操作

}

}

原文链接：https://www.jianshu.com/p/055d4f1d8928