VUE与Android和IOS原生传值

Posted 2022-11-02 叉腰大眼仔

一.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