使用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中setup使用(两种用法)
Dec 02 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
phpmyadmin操作流程
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
php中看实例学正则表达式
2006/12/25 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php给图片加文字水印
2015/07/31 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python实现身份证号码解析
2015/09/01 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
《在家里》教后反思
2014/03/01 职场文书
集中采购方案
2014/06/10 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电