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 的 v-model用法实例
Nov 23 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue elementUI批量上传文件
Apr 26 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
js查错流程归纳
2012/05/04 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python中int与str互转方法
2018/07/02 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python读取Kafka实例
2019/12/23 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python魔术方法专题
2020/06/19 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
css3发光搜索表单分享
2014/04/11 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
运动会通讯稿100字
2014/01/31 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
淘宝客服工作职责
2014/07/11 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2015年中秋节主持词
2015/07/30 职场文书
四则混合运算教学反思
2016/02/23 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL