前言：
最近开发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代码
<template>
<div class="box">
<button @click="jsAndroid">JS调用Android方法</button>
<button @click="jsIos">JS调用IOS方法</button>
<button @click="jsAI">JS调用Android||IOS方法</button>
<div>
<span>Android||IOS调用h5方法,控制内用显示</span>
<div v-if="isShow">
<img src="https://imgsa.baidu.com/forum/w%3D580/sign=1b2a89cb16950a7b75354ecc3ad0625c/2635349b033b5bb59ec8f2033dd3d539b600bc35.jpg" alt="">
</div>
</div>
<div>
<span>Android||IOS调用h5方法,并传值</span>
<img :src="imgUrl" alt="">
</div>
</div>
</template>
<script>
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
};
},
};
</script>
<style lang="scss" scoped>
* {
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;
}
}
</style>四、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();
}
}以上就是遇到的问题和总结，希望对你有帮助。