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 25 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
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
PHP生成HTML静态页面实例代码
2008/08/31 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
python距离测量的方法
2018/03/06 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
拓展培训心得体会
2014/01/04 职场文书
物业总经理岗位职责
2014/02/28 职场文书
工作经验交流材料
2014/12/30 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
OpenCV-Python实现轮廓的特征值
2021/06/09 Python