使用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 相关文章推荐
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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中mysql模块部分功能的简单封装
2011/09/30 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Javascript算符的优先级介绍
2013/03/20 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
实例解析angularjs的filter过滤器
2016/12/14 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
python中二维阵列的变换实例
2014/10/09 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
PyMongo安装使用笔记
2015/04/27 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python中有帮助函数吗
2020/06/19 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
会计助理的岗位职责
2013/11/29 职场文书
客户接待方案
2014/02/26 职场文书
苏州园林导游词
2015/02/03 职场文书
护士求职简历自我评价
2015/03/10 职场文书
摩登时代观后感
2015/06/03 职场文书