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

前言：

迩来开发vue与app交互，总结了一下开发心得。我是一名Android开发者，vue开发这块也稍有涉足，在android或者IOS中展示h5可以减少工作量，也能满足用户体验性。下面主要以Android和Vue方法介绍为主。
上菜了

 

 
一、h5与App交互的两种情势

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

2.app嗲用h5方法

二、Android基本设置

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

复制代码

三、 vue代码

1. <template>
2.   <div class="box">
3.     <button @click="jsAndroid">JS调用Android方法</button>
4.     <button @click="jsIos">JS调用IOS方法</button>
5.     <button @click="jsAI">JS调用Android||IOS方法</button>
6.     <div>
7.       <span>Android||IOS调用h5方法,控制内用显示</span>
8.       <div v-if="isShow">
9.        <img src="https://imgsa.baidu.com/forum/w%3D580/sign=1b2a89cb16950a7b75354ecc3ad0625c/2635349b033b5bb59ec8f2033dd3d539b600bc35.jpg" alt="">
10.     </div>
11.     </div>
12.     <div>
13.       <span>Android||IOS调用h5方法,并传值</span>
14.       <img :src="imgUrl" alt="">
15.     </div>
16.   </div>
17. </template>
18. <script>
19. import { toRefs, reactive, onMounted } from "vue";
21. export default {
22.   // vue3.0 钩子函数写法
23.   setup() {
24.     const obj = reactive({
25.       isShow: false,
26.       content: "接受内容",
27.       imgUrl:'https://pic4.zhimg.com/v2-112e0474e000e98e8fbd22ced185c923_b.gif',
28.     //   这里Android和ios判断固定了，判断方法这里就不写了，网上很多资料
29.       isIOS:false,
30.       isAndroid:true
31.     })
32.     onMounted(()=>{
33.         window.sendImageURL=sendImageURL
34.         window.show=()=>{
35.             obj.isShow=!obj.isShow
36.         }
37.     })
38.     const jsAndroid=()=>{
39.         window.handleMessage.toast('你好，调用成功？')  
40.     }
41.     const jsIos=()=>{
42.         window.webkit.messageHandlers.handleMessage.toast('你好，调用成功？');
43.     }
44.     const jsAI=()=>{
45.         //app端会拿到对应的方法，然后app端做处理
46.         if (obj.isIOS) {
47.                 window.webkit.messageHandlers.handleMessage.toast('1212121');
48.             } else if (obj.isAndroid) {
49.                 window.handleMessage.toast('你好，调用成功？')
50.             }
51.     }
52.     const sendImageURL=(imgUrl)=>{
53.         obj.imgUrl=imgUrl
54.     }
55.     return {
56.       ...toRefs(obj),
57.       jsAndroid,
58.       jsIos,
59.       jsAI,
60.       sendImageURL
61.     };
62.   },
63. };
64. </script>
65. <style lang="scss" scoped>
66. * {
67.   margin: 0px;
68.   padding: 0px;
69. }
70. .box {
71.   display: flex;
72.   flex-direction: column;
73.   button {
74.     margin: 10px;
75.     padding: 18px;
76.     background: gold;
77.     color: #fff;
78.     font-weight: 700;
79.     border: none;
80.   }
81.   img {
82.     width: 188px;
83.     height: 127px;
84.   }
85. }
86. </style>

复制代码

四、App调用h5方法

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

1. onMounted(()=>{
2.         //挂载方法到window上面
3.         window.sendImageURL=sendImageURL
4.         //可以直接定义成匿名函数
5.         window.show=()=>{
6.             obj.isShow=!obj.isShow
7.         }
8.     })
9. const sendImageURL=(imgUrl)=>{
10.         obj.imgUrl=imgUrl
11.     }

复制代码

Android可以通过：  webView.loadUrl("javascript:sendImageURL('" + img + "')");
sendImageURL：方法名
img：需要传递的参数

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

复制代码

IOS类似Android

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

复制代码

五、h5调用app方法

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

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

1. const jsAndroid=()=>{
2.         window.handleMessage.toast('你好，调用成功？')  
3.     }
4.     const jsIos=()=>{
5.         window.webkit.messageHandlers.toast.postMessage('你好，调用成功？');
6.     }
7.     const jsAI=()=>{
8.         //app端会拿到对应的方法，然后app端做处理
9.         if (obj.isIOS) {
10.                 window.webkit.messageHandlers.toast.postMessage('1212121');
11.             } else if (obj.isAndroid) {
12.                 window.handleMessage.toast('你好，调用成功？')
13.             }
14.     }

复制代码

Android代码

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。