使用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 18 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue详细的入门笔记
May 10 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue3种table表格选项个数的控制方法
Apr 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
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP培训要多少钱
2017/06/06 PHP
Nginx实现反向代理
2017/09/20 Servers
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
前端微信支付js代码
2016/07/25 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python中协程用法代码详解
2018/02/10 Python
Python切片操作深入详解
2018/07/27 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
优良学风班总结材料
2014/02/08 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python