vue如何判断安卓还是IOS

 更新时间:2022年04月12日 17:05:07   作者:周小盗  
这篇文章主要介绍了vue如何判断安卓还是IOS,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue判断安卓还是IOS

最近工作上遇到这样一个需求

vue写的页面,需要同时跟安卓和ios进行交互;

  • 若是安卓,执行代码:android.finishActivity();
  • 若是IOS,执行代码:
try { 
 window.webkit.messageHandlers.finishActivity.postMessage(""); 
 }catch(error) { 
 console.log('WKWebView post message');
}

所以我们需要进行一个判断

是安卓还是IOS:因为是做的单独的APP所以没有考虑微信的问题

finishActivity() {
        let ua = navigator.userAgent.toLowerCase();
        //android终端
        let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; 
        //ios终端
        let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        
          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            //ios
            console.log(" 我是ios")
            //这里是和IOS商量好的写法,调用IOS的finishActivity方法
            try { 
              window.webkit.messageHandlers.finishActivity.postMessage(""); 
            }catch(error) { 
                console.log('WKWebView post message');
              }
          } else(/(Android)/i.test(navigator.userAgent)) {
            //android
            console.log("我是android")
            //这里是和安卓商量好的写法,调用安卓的finishActivity方法
            android.finishActivity();            
          }       
  }

然后就可以一个页面同时给安卓和IOS进行交互啦! 

H5端判断安卓跟ios显示不同的背景图

html:

<div :class="`${isApple==true ? 'index-cont-phone' : 'index-cont'}`" ></div>

css:

    .index-cont{
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow-x:hidden;
        background: url("https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/interaction_h5/main_bg3.png") no-repeat;
        background-size: contain;
        margin: 0;
        padding-bottom: 199%;
        // position: fixed;
    }
    .index-cont-phone{
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow-x:hidden;
        background: url("https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/interaction_h5/main_bg4.png") no-repeat;
        background-size: contain;
        margin: 0;
        padding-bottom: 199%;
        // position: fixed;
    }

js:

<script>
export default {
    name: "index",
    data() {
        return {
            isApple:true,
                }
            },
     },
     methods: {
       // 判断是安卓还是ios
        appDown() {
            var u = navigator.userAgent;
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if(isiOS){
                this.isApple = true
            }else if(isAndroid){
                this.isApple = false
            }
       },
   mounted() {
          // 调用判断ios与安卓方法
        this.appDown();
    },
 }
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 使用Bootstrap + Vue.js实现添加删除数据示例

    使用Bootstrap + Vue.js实现添加删除数据示例

    本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • 在vue中获取微信支付code及code被占用问题的解决方法

    在vue中获取微信支付code及code被占用问题的解决方法

    这篇文章主要介绍了在vue中获取微信支付code及code被占用问题的解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue点击自增和求和的实例代码

    vue点击自增和求和的实例代码

    今天小编就为大家分享一篇vue点击自增和求和的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • element-ui upload组件上传文件类型限制问题小结

    element-ui upload组件上传文件类型限制问题小结

    最近我遇到这样的问题,接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了,下面小编给大家介绍element-ui upload组件上传文件类型限制问题小结,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue el-table实现右键菜单功能

    Vue el-table实现右键菜单功能

    这篇文章主要为大家详细介绍了Vue el-table实现右键菜单功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue2.0用 watch 观察 prop 变化(不触发)

    Vue2.0用 watch 观察 prop 变化(不触发)

    本篇文章主要介绍了Vue2.0用 watch 观察 prop 变化(不触发),非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • vue3使用mitt.js实现各种组件间的通信

    vue3使用mitt.js实现各种组件间的通信

    在vue工程中,除开vue自带的什么父子间,祖孙间通信,还有一个非常方便的通信方式,类似Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js,可以实现各个组件间的通信,所以本文给大家介绍了vue3使用mitt.js实现组件通信,需要的朋友可以参考下
    2024-05-05
  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue DevTools调试工具的使用

    Vue DevTools调试工具的使用

    本篇文章主要介绍了Vue DevTools调试工具的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • el-tree文字显示不全的解决办法

    el-tree文字显示不全的解决办法

    本文主要介绍了el-tree文字显示不全的解决办法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论