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>

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

相关文章

  • vue3 ts组合式API异常onMounted is called when there is no active component解决

    vue3 ts组合式API异常onMounted is called when&

    这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • element 结合vue 在表单验证时有值却提示错误的解决办法

    element 结合vue 在表单验证时有值却提示错误的解决办法

    这篇文章主要介绍了element 结合vue 在表单验证下,有值却提示错误的解决办法,需要的朋友可以参考下
    2018-01-01
  • 详解vue-template-admin三级路由无法缓存的解决方案

    详解vue-template-admin三级路由无法缓存的解决方案

    这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • webpack项目调试以及独立打包配置文件的方法

    webpack项目调试以及独立打包配置文件的方法

    下面小编就为大家分享一篇webpack项目调试以及独立打包配置文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 简单的vue-resourse获取json并应用到模板示例

    简单的vue-resourse获取json并应用到模板示例

    本篇文章主要介绍了简单的vue-resourse获取json并应用到模板示例,非常具有实用价值,需要的朋友可以参考下。
    2017-02-02
  • vue3的二维码组件vue3-next-qrcode

    vue3的二维码组件vue3-next-qrcode

    这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue中vue-cli项目报错sockjs.js报错问题

    vue中vue-cli项目报错sockjs.js报错问题

    这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题,具有很好的参考价值,希望对大家有所帮助。
    2022-12-12
  • vue实现tab栏切换效果

    vue实现tab栏切换效果

    这篇文章主要为大家详细介绍了vue实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue-cli配置flexible过程详解

    vue-cli配置flexible过程详解

    这篇文章主要介绍了vue-cli配置flexible过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • vue实现移动端悬浮窗效果

    vue实现移动端悬浮窗效果

    这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果,vuejs实现div拖拽移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12

最新评论