需求

在做vue项目的时候，因为app前端项目中的一些页面是用h5做的，造成进行弹窗的时候会出现只在h5区域进行弹窗，有的时候弹窗内容多，就会造成溢出区域不显示；需要原生的效果才可以进行更好的效果展示；
所以就需要h5页面与安卓和iOS进行交互达到适配的效果

解决方法

1、首先解决机型的判断，通过点击按钮，判断当前设备是属于安卓还是iOS

创建一个js文件;命名：androidOrIos.js

// 判断机型 安卓 or ios
export default {
    data() {
        return {}
    },
    methods: {
        // 判断是在手机还是电脑
        isMobile_pc() {
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            return flag;
        },
        // 判断是在安卓还是ios打开
        is_andriod_ios() {
            var u = navigator.userAgent;
            return {
                //移动终端浏览器版本信息
                trident: u.indexOf("Trident") > -1, //IE内核
                presto: u.indexOf("Presto") > -1, //opera内核
                webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
                gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
                mobile:
                    !!u.match(/AppleWebKit.*Mobile/i) ||
                    !!u.match(
                        /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
                    ), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
                iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf("iPad") > -1, //是否iPad
                webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
            };
        },
    },
}

2、在vue中项目引用androidOrIos.js;加入点击判断，不同机型进行不同的操作

1、引入androidOrIos.js使用，自己的文件位置引入

import androidOrIos from ‘./androidOrIos.js’

2、关于iOS的交互调用，其中showPopupIos命名和苹果工程师沟通一致，点击按钮后传入一个对象过去，里面含有标题，内容；由苹果来控制后面的事情

window.webkit.messageHandlers.showPopupIos.postMessage( 传入一个对象 );

3、关于安卓的交互调用，其中showPopupAndroid命名和安卓工程师沟通一致，点击按钮后传入两个字符串过去，第一个字符串为标题，第二个字符串为内容；由安卓来控制后面的事情

AndroidJs.showPopupAndroid(字符串1,字符串2)

备注: 关于安卓也是可以传个对象过去，这个要看每个人的个人习惯，多沟通，多了解, 虚心求教安卓和苹果；只要问题解决了就可以；vue中与安卓和iOS之间传值我就调用了两个方法，其他的什么也没有做，方法名字还是他们提供给我的；具体逻辑我也不是太懂～～～（毕竟我只是个新时代农民搬运工）— 安卓和iOS后面怎么处理的就触及到我的知识盲区了；多和安卓iOS前端沟通，一杯咖啡可能就解决了。😄

相关参考：安卓的相关链接（Android webview 与 js(Vue) 交互）：https://juejin.cn/post/6844903663400402957#heading-5
https://www.jianshu.com/p/345f4d8a5cfa

3、最后贴项目中的部分代码，可以做测试使用

<template>
    <div>
        <button @click="btn">点击我判断，传值</button>
    </div>
</template>

<script>
import androidOrIos from './androidOrIos.js' // 自己的文件位置引入
export default {
    data(){
        return{

        }
    },
    mixins: [androidOrIos],
    methods:{
        //  开始=============================================
      btn() {
        var title = '我是标题'
        var message = '我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容'
        //安卓手机-iOS-pc判断开始
        if (this.isMobile_pc()) {
          if (
            this.is_andriod_ios().iPhone ||
            this.is_andriod_ios().iPad ||
            this.is_andriod_ios().ios
          ) {
            // ios内容
            console.log('ios');
            // 下面是传递值到苹果手机 showPopupIos 该调用方法名与苹果工程师沟通一至
            window.webkit.messageHandlers.showPopupIos.postMessage({
              name: title,
              content: message
            });
          }
          if (this.is_andriod_ios().android) {
            // 安卓内容
            console.log('android');
            // 下面是传递值到安卓手机，showPopupAndroid 该调用方法名与安卓工程师沟通一至
            AndroidJs.showPopupAndroid(title, message)
          }
        } else {
          // pc端内容
          console.log('pc');
          alert('我是pc弹出')
        }
        安卓手机-iOS-pc判断结束
      },
      //  结束=============================================
    }
}
</script>

4、关于浏览器测试机型判断图示

1、pc

2、android

3、iOS