使用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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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实现的中文分词类完整实例
2017/02/06 PHP
jQuery 技巧小结
2010/04/02 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
用 python 进行微信好友信息分析
2020/11/28 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
百货商场楼层班组长竞聘书
2014/03/31 职场文书
四年级评语大全
2014/04/21 职场文书
体育节口号
2014/06/19 职场文书
市场部岗位职责
2015/02/12 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
餐馆开业致辞
2015/08/01 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL