微客导航 » 文章资讯 » vue中h5端打开app(判断是安卓还是苹果)

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

2023-07-05 03:25:03 150

1.开发环境vue+vant

2.电脑系统windows10专业版

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

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


OpenAPP

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

openapp(){
varu=navigator.userAgent,
app=navigator.appVersion;
varisAndroid=u.indexOf("Android")>-1||u.indexOf("Linux")>-1;
varisIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);
if(isAndroid){
//alert("我是安卓");
this.android();
}
if(isIOS){
//alert("我是苹果");
}
},

android(){
var_clickTime=newDate().getTime();
window.location.href='zhihu://';/***打开app的协议，有安卓同事提供***/

//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var_count=0,intHandle;
intHandle=setInterval(function(){
_count++;
varelsTime=newDate().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.注意:在这个案例中我是用的知乎的例子:

6.注意

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐