H5跳转APP 并切换到后台问题解决

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 总的来说都是治标不治本