使用vue判断当前环境是安卓还是IOS


Posted in Vue.js onApril 12, 2022

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>
Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
vue数据字典取键值项目的字典问题
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
vue选项卡切换的实现案例
分享一个vue实现的记事本功能案例
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
vue打包时去掉所有的console.log
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
thinkphp分页实现效果
2016/10/13 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
详解Vue取消eslint语法限制
2018/08/04 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
家长对老师的评语
2014/04/18 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
学前班语言教学计划
2015/01/20 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js
DQL数据查询语句使用示例
2022/12/24 MySQL