前言：

最近开发vue与app交互，总结了一下开发心得。我是一名Android开发者，vue开发这块也稍有涉足，在android或者IOS中展示h5可以减少工作量，也能满足用户体验性。下面主要以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代码

四、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();        }    }

以上就是遇到的问题和总结，希望对你有帮助。

来源地址：https://blog.csdn.net/u012941592/article/details/131880265