使用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+iview实现分页及查询功能
Nov 17 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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 定义404页面的实现代码
2012/11/19 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
社区包粽子活动方案
2014/01/21 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
消防安全责任书范本
2014/04/15 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
数学教师个人工作总结
2015/02/06 职场文书
初中英语教学随笔
2015/08/15 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python