Vue(h5)与App(android,ios)端交互详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue(h5)与App(android,ios)端交互详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：

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

上菜了

vue写h5项目嵌入app,Vue,vue.js,android,ios,webview,交互

一、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上，不然回报未定义，点掉叉号后虽然调用的时候能成功。 vue写h5项目嵌入app,Vue,vue.js,android,ios,webview,交互

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://www.toymoban.com/news/detail-687104.html

到了这里，关于Vue(h5)与App(android,ios)端交互详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！