使用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开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
详解Vue的options
May 15 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
页面使用密码保护代码
2013/04/10 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
电大自我鉴定范文
2013/10/01 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
团日活动总结模板
2014/06/25 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server