vue中h5端打开app(判断是安卓还是苹果)


Posted in Vue.js onFebruary 26, 2021

1.开发环境 vue+vant

2.电脑系统 windows10专业版

3.在h5端开发的过程中,我们经常需要点击一个按钮来判断用户使用安装了app(首先判断是安卓还是苹果,然后判断是否安装了app,如果没有安装则跳转到下载页面,如果安装了则打开)。

4.废话不多说,直接上代码:

<div class="xiding-r" @click="openapp">
 Open APP
</div>

5.在methods中添加如下代码:

openapp() {
  var u = navigator.userAgent,
   app = navigator.appVersion;
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isAndroid) {
   // alert("我是安卓");
   this.android();
  }
  if (isIOS) {
   // alert("我是苹果");
  }
  },
android() {
  var _clickTime = new Date().getTime();
  window.location.href = 'zhihu://'; /***打开app的协议,有安卓同事提供***/

  //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
  var _count = 0, intHandle;
  intHandle = setInterval(function () {
   _count++;
   var elsTime = new Date().getTime() - _clickTime;
   if (_count >= 100 || elsTime > 5000) {
   console.log(_count)
   console.log(elsTime)
   clearInterval(intHandle);
   //检查app是否打开
   if (document.hidden || document.webkitHidden) {
    // 打开了
    window.location.href = "zhihu://";
    // alert('打开了');
    window.close();
    // return;
   } else {
    // 没打开
    // alert('没打开');
    window.location.href = "";//下载链接
   }
   }
  }, 20);
  },

5.注意:在这个案例中我是用的知乎的例子:

vue中h5端打开app(判断是安卓还是苹果)

6.注意

使用Custom URL Scheme的好处就是,你可以在其他程序中通过这个url打开应用程序。如果A应用程序注册了一个 url scheme:myApp,那么就在mobile浏览器中就可以通过<a href ="myApp://">打开你的应用程序。请注意,IOS中如果系统注册了 url schemen且安装了那个应用程序,通过上面那种网页的方式就可以打开应用程序(亲测有效)。注意:IOS中不能注册为http://xxx这样的url scheme,而android是可以的。

到此这篇关于vue中h5端打开app(判断是安卓还是苹果)的文章就介绍到这了,更多相关vue中h5端打开app 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
Vue基本指令实例图文讲解
Feb 25 #Vue.js
vue常用高阶函数及综合实例
Feb 25 #Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
You might like
建立动态的WML站点(二)
2006/10/09 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
python3 unicode列表转换为中文的实例
2018/10/26 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
为什么要使用servlet
2016/01/17 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
淘宝店策划方案
2014/06/07 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
优秀大学生自荐信
2015/03/26 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
解决mysql的int型主键自增问题
2021/07/15 MySQL