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实现广告栏上下滚动效果
Nov 26 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python批量修改xml属性的实现方式
2020/03/05 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
丧事主持词大全
2014/04/02 职场文书
教研处工作方案
2014/05/26 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
小学庆六一主持词
2015/06/30 职场文书
2015中秋祝酒词
2015/08/12 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis