移动端H5如何唤醒APP？

需求

open in app

1. 点击免费下载按钮，如果本机安装了此应用，那么就唤醒该应用，如果没有安装此应用，那么就跳转下载链接。
2. 其实H5中没有办法去判断本机有没有安装了哪款应用，但是我们可以设置一个超时时间，如果唤醒应用的时长超过了这个时间，那么就判断你没有安装此应用。

html

// href为该应用的协议，可以向客户端开发人员获取, data-download-href为应用的下载地址
免费下载

javascript

// 下载游戏或则打开app
$('.open-btn').on('click', function () {
  if (isWechat()) {
    // 显示在浏览器中打开
  } else {
    let href = "";
    if (isIos()) {
      href = $('.open-btn').attr('data-ios-href');
    } else {
      href = $('.open-btn').attr('data-android-href');
    }
    let clickedAt = +new Date();
    setTimeout(function () {
      // webkitHidden检测页面对于用户的可见性(切换标签或者切换后台就不可见了)
      !window.document.webkitHidden && setTimeout(function () {
        if (+new Date() - clickedAt < 2000) {
          window.location = href;
        }
      }, 500);
    }, 500)
  }
})

再说一点

根据自己的项目情况来修改代码就可以了，可能只有安卓应用没有ios应用，那么自己修改代码就可以啦，提示用户没有ios版的应用

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦

image

微信公众号 「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习