移动端H5如何唤醒APP?

需求

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

html

// href为该应用的协议,可以向客户端开发人员获取, data-download-href为应用的下载地址
<a href="weixin://" data-android-href="{$data.box.urlapk}" data-ios-href="{$data.box.urlapp}" class='open-btn'>免费下载</a>

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容