JQ写法
原理是:首先跳转APP链接 利用定时器 延迟触发跳转下载地址链接
缺点是:不能直观的知道是否打开了APP,万一用户点击了取消跳转APP或者点击后长时间无操作 定时器还是会触发(如我写的代码3秒后触发下载地址链接)
难点是唤起APP后 又切换回去网页浏览器 定时器还是继续触发从而会跳到下载页面
//监听页面是否被切换到后台
document.addEventListener("visibilitychange", () => {
if(document.hidden) {
clearTimeout(timeout)
}
else {
clearTimeout(timeout)
}
});
var timeout = ''
//按钮点击事件
$('#open-app-details').click(function (param) {
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
alert('点击右上角,选择"在浏览器"中打开')
return false
}
var webUrl = window.location.host
if (isAndroid) {
//这个是安卓操作系统
window.location.href = '' //跳转APP地址 如weixin://
timeout = setTimeout(function(){
$.sDialog({
skin:"red",
content:'请先下载APP',
okBtn:true,
cancelBtn:true,
okFn:function() {
window.location.href= '' //androidAPP下载地址
},
});
},3000)
}
if (isIOS) {
window.location.href = '' //跳转APP地址 如weixin://
timeout = setTimeout(function(){
$.sDialog({
skin:"red",
content:'请先下载APP',
okBtn:true,
cancelBtn:true,
okFn:function() {
window.location.href= '' //iosAPP下载地址
},
});
},3000)
}
})
总结:参考了很多资料 都是利用定时器机制 来判断是否跳转了APP 总的来说都是治标不治本