H5网页判断是否安装APP并调起APP

通常情况下，如果公司有APP则前端需要做的就是给APP下载做引流，即在一些活动页中做下载引导。

可是在做下载引导的时候我们通常会遇到一个问题就是：

• 如何查看是否安装此APP
• 网页端如何调起此APP

比如：调起某公司的APP只需要链接到 mathwallet://mathwallet.org 即可
可是如果没有安装此APP则点击按钮就没有任何反应了，具体怎么判断是否安装了呢？请看以下代码

<a href="javascript:;">在APP中打开</a>

<script type="text/javascript">
// 判断终端，此处也列了一些判断其他终端的方法
var browser={
  versions:function(){
    var u = navigator.userAgent, app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
      iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
      weixin: u.indexOf('MicroMessenger') > -1, //是否微信
      qq: u.match(/\sQQ/i) == " qq", //是否QQ
    };
  }()
}

// --------------------下面代码才是重点--------------------

$('a').on('click',function(){
  // 微信目前不支持打开非企鹅应用，所以先判断是否在微信中打开此页面
  if(browser.versions.weixin){
    alert('点击右上角选择在浏览器中打开')
  }else{
    // 调起APP
    window.location.href="mathwallet://mathwallet.org"

    // 如果超时证明没有安装此APP则跳到下载页
    window.setTimeout(function() {
      window.location.href="http://mathwallet.xyz"
    }, 1000)
  }
})
</script>

虽然解决了问题，但是此方法有一个不足的地方（BUG）：
无论是否安装APP，引导下载的页面都会跳转到下载页
如果安装了APP则会直接打开APP，因此也不会在意之前的页面会不会跳转（强迫症患者可能会在意）

我的个人博客有空来坐坐

https://www.wangyanan.online