js调起打开APP浏览器点击打开微信

需求

项目中需要在网页中打开 app 的需求，若手机没有安装 app 则需跳转到下载自定义的下载 APP 页面。这种需求在很多“别人家”的网站都能实现，我们的开发员当然有需求也要折腾一下了。

分析

首先得判断是否是在手机端打开，是手机端才调用打开 app，pc 则直接跳转下载页面。
调用打开 app 其实相当于跳转某个 app 链接，但 js 不能判断是否能进行跳转打开。既然没有直接的方法可以判断，可以判断触发一段时间后监听浏览器是否隐藏，若隐藏了说明已打开调起 APP，若设定时间过去仍没有进入隐藏事件，说明手机没有安装此 APP，则跳转至下载 APP 页面。

实现

监听浏览器挂起的 h5 新事件为：visibilitychange
代码如下：

// 设置 3 秒没打开 app 即跳转下载页
var COUNT = 3;
// 定时器
var TIMER;

$('button').click(function(){bindEvent()
    // 打开微信
    window.location = 'weixin://';
    TIMER = setTimeout(function(){
        // 超时后跳转下载页
        window.location.href = 'download.html';
    },COUNT*1000);
});

// 绑定挂起监听
function bindEvent() {
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    $(document).bind(visibilityChange, function () {if(document[hidden]) {
            // 监听浏览器挂起时（即调起 APP）清除定时
            clearTimeout(TIMER);
        }
    });
}

总结

若考虑用户体验或优化上还需要判断是否在移动端，在调起前显示加载状态，进行计时倒数，打开后解除绑定监听挂起函数等等。有更好的方法大佬请多指教告知。