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);
        }
    });
}

总结

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