Vue(h5)与App(android,ios)端交互详解

前言：

最近开发vue与app交互，总结了一下开发心得。我是一名Android开发者，vue开发这块也稍有涉足，在android或者IOS中展示h5index.php/tags-653.html" >可以减少工作量，也能满足用户体验性。下面主要以Android和Vue方法介绍为主。

上菜了

 

 

一、h5与App交互的两种形式

1.h5调用app的原生方法。

2.app嗲用h5方法

二、Android基本配置

 WebSettings webSettings=webView.getSettings();        //设置为可调用js方法        webSettings.setJavaScriptEnabled(true);        webView.setWebViewClient(new WebViewClient());        webView.setWebChromeClient(new WebChromeClient());        //js调用android        webView.addJavascriptInterface(new JsCommunication(), "handleMessage");        //你自己的h5地址        webView.loadUrl("http://192.168.23.6:8080/#/webview");

三、 vue代码

      JS调用Android方法    JS调用IOS方法    JS调用Android||IOS方法          Android||IOS调用h5方法,控制内用显示                               Android||IOS调用h5方法,并传值            import { toRefs, reactive, onMounted } from "vue";export default {  // vue3.0 钩子函数写法  setup() {    const obj = reactive({      isShow: false,      content: "接受内容",      imgUrl:'https://pic4.zhimg.com/v2-112e0474e000e98e8fbd22ced185c923_b.gif',    //   这里Android和ios判断固定了，判断方法这里就不写了，网上很多资料      isIOS:false,      isAndroid:true    })    onMounted(()=>{        window.sendImageURL=sendImageURL        window.show=()=>{            obj.isShow=!obj.isShow        }    })    const jsAndroid=()=>{        window.handleMessage.toast('你好，调用成功？')      }    const jsIos=()=>{        window.webkit.messageHandlers.handleMessage.toast('你好，调用成功？');    }    const jsAI=()=>{        //app端会拿到对应的方法，然后app端做处理        if (obj.isIOS) {                window.webkit.messageHandlers.handleMessage.toast('1212121');            } else if (obj.isAndroid) {                window.handleMessage.toast('你好，调用成功？')             }    }    const sendImageURL=(imgUrl)=>{        obj.imgUrl=imgUrl    }    return {      ...toRefs(obj),      jsAndroid,      jsIos,      jsAI,      sendImageURL    };  },};* {  margin: 0px;  padding: 0px;}.box {  display: flex;  flex-direction: column;  button {    margin: 10px;    padding: 18px;    background: gold;    color: #fff;    font-weight: 700;    border: none;  }  img {    width: 188px;    height: 127px;  }}

四、App调用h5方法

注意，Vue中的方法通常是写在vue实例的methods中的，app无法直接调用，此时在页面的onMounted钩子里将方法挂在window下即可。

Vue代码

 onMounted(()=>{        //挂载方法到window上面        window.sendImageURL=sendImageURL        //可以直接定义成匿名函数        window.show=()=>{            obj.isShow=!obj.isShow        }    }) const sendImageURL=(imgUrl)=>{        obj.imgUrl=imgUrl    }

Android可以通过：  webView.loadUrl("javascript:sendImageURL('" + img + "')");

sendImageURL：方法名

img：需要传递的参数

 btn.setOnClickListener(v->{           //android调用js，无参数无返回值            webView.loadUrl("javascript:show()");        });        btn2.setOnClickListener(v->{            //android调用js，无参数无返回值            webView.loadUrl("javascript:sendImageURL('" + img + "')");        });

IOS类似Android

NSString *img = @"图片地址";NSString *jsStr = [NSString stringWithFormat:@"sendImageURL('%@')",img]; [self->_wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {   NSLog(@"状态---%@",d);//回调值 }];

五、h5调用app方法

 vue方法，注意一定要挂载到window上，不然回报未定义，点掉叉号后虽然调用的时候能成功。

 

handleMessage：app上面定义的接口名称

toast：app上定义的方法名称

const jsAndroid=()=>{        window.handleMessage.toast('你好，调用成功？')      }    const jsIos=()=>{        window.webkit.messageHandlers.toast.postMessage('你好，调用成功？');    }    const jsAI=()=>{        //app端会拿到对应的方法，然后app端做处理        if (obj.isIOS) {                window.webkit.messageHandlers.toast.postMessage('1212121');            } else if (obj.isAndroid) {                window.handleMessage.toast('你好，调用成功？')             }    }

Android代码

 //js调用android webView.addJavascriptInterface(new JsCommunication(), "handleMessage");  public  class JsCommunication {        @JavascriptInterface        public void toast(String json) {            Toast.makeText(MainActivity.this,json,Toast.LENGTH_LONG).show();        }    }