H5 唤醒 APP 实现以及注意点

做为前端开发人员常常会有这样的需求，若是某个用户安装了本身的APP就打开APP首页或则指定页面，若是没有安装APP就跳转到相应下载页面。这样的一个需求也是拉新和裂变必不可少的环节，因此是须要咱们去解决的。今天来看看到底如何实现呢？

跳转APP方式

目前实现该功能的有两种比较好的方式：URL Scheme、meta标签和Universal Links。

URL Scheme

URL Scheme就是一个可让app相互之间能够跳转的对外接口。经过给APP定义一个惟一的URL路径来从外部快速的打开这个指定的APP，每一个app的URL Scheme都是不同的，若是存在同样的URL Scheme，那么系统就会响应先安装那个app的URL Scheme，由于后安装的app的URL Scheme被覆盖掉了，是不能被调用的。URL scheme的格式是：

[scheme]://[host]/[path]?[query]
复制代码

介绍几个经常使用的URL Scheme平台：

• QQ： mqq://
• 微信： weixin://
• 腾讯微博： TencentWeibo://
• 淘宝： taobao://
• 支付宝： alipay://
• 微博： sinaweibo://

同时支持Android和iOS平台

meta标签

在网页上设置meta标签，使用safari打开的时候，就会在顶部显示本身app的导航条。若是没有安装app点击可以跳转到appstore去下载，若是安装了app就能直接经过顶部的meta标签唤醒app了。

iOS独有

Universal Links

Universal Links就是一个通用连接，iOS9以上的用户，能够经过点击这个连接无缝的重定向到一个app应用，而不须要经过safari打开跳转。若是用户没有安装这个app，则会在safari中打开这个连接指向的网页。

iOS独有而且是iOS9.0才出的

各类方式的使用

URL Scheme和Universal Links都是须要配置的，只有配置了才能有做用。

URL Scheme使用

URL Scheme的使用方式不难，最简单的使用方式就是添加一个a标签连接便可：

<a href="weixin://">打开微信</a>
复制代码

这种方式访问是比较简单的，安卓和IOS均可以使用，可是在微信端就不行了，微信端设置了白名单，彻底屏蔽了URL Scheme 用法，除非加入了白名单，像京东就能够直接打开，不然是不可能的。

meta标签使用

meta标签的方式也很简单只须要在网页中添加meta标签便可：

<meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">
复制代码

效果就是在网页的顶部显示一个置顶条。

Universal Links使用

这种方式配置有点麻烦，本人也没有接触过iOS的开发因此就给你们一个官方网站的介绍了

总结

上面的每一种方式都不能完美的解决，要么只有苹果支持，要么会有不少头部APP限制，因此须要本身来作不少其它工做才能适配。

首先咱们要确认采起哪种方式，综合以上介绍惟有第一种URL Scheme的方式应该是算是最优的选择了毕竟两个平台都支持，接下俩就是如何解决在头部APP里面如何打开，其实这个问题一般都是提示用户在外部浏览器中打开，因此这样基本就解决了这个难题，下面就用代码来一步步实现。

实现唤醒APP功能

提示浏览器打开

首先须要实现一个在浏览器打开的小提示以下：

实现判断头部APP的功能

这里就是经过浏览器的User-Agent来判断是否为微信或则其它APP浏览器，代码以下：

/**
 * 判断浏览器是否为头部APP
 */
function isBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}
复制代码

上面的函数判断了几种浏览器，微信、微博、QQ、QQ浏览器。若是点击打开或则下载按钮时就判断是否为头部APP，若是是则提示在浏览器打开不然直接打开本身的APP便可，代码以下：

function openTuer() {
  if (isBlackApp()) {
    // 头部APP让网页显示提示在浏览器中打开
    showTips();
  } else {
    // 不是头部APP就直接打开，这里你们开始能够不用参数，后面写好再来添加便可
    openApp(0, 0);
  }
}
复制代码

唤醒APP的核心方法

上面也提到了openApp这个函数，那么具体是什么样的呢，这里咱们就来看看如何去实现这个函数。这里按照目前本身的项目需求就是打开APP须要两个参数一个是打开APP的某一个页面which，一个是打开某个页面须要的参数arg。因此咱们的openApp函数才须要两个参数。

openApp的实现

openApp这个函数很简单就是调用两个函数以下：

function openApp(which, arg) {
    jumpApp("testApp://which=" + which + "&arg=" + arg);
    noApp();
}
复制代码

第一个函数就是负责打开APP的，第二个负责若是没有打开APP或没有安装APP时跳转的地址处理。

jumpApp的实现

这个函数的实现要注意iOS8以前是可使用iframe来实现的，可是以后的就不行了，被苹果屏蔽了，因此只能经过页面跳转了，具体代码以下：

function jumpApp(t) {
  try {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
      window.location.href = t;
    } else {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "none"), document.body.appendChild(r);
    }
  } catch (e) {
    window.location.href = t;
  }
}
复制代码

noApp的实现

noApp的实现也很简单就是定义一个定时器，若是在某个时间段内没啥反应就跳转到指定的下载页面便可。具体代码以下：

var timer = null;
function noApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  timer = setTimeout(function() {
    return Date.now() - t > 2200
      ? (clearTimeout(timer), !1)
      : !document.webkitHidden && !document.hidden && void (location.href = r);
  }, 2000);
}
复制代码

到此就实现了基本的功能了，实际过程当中可能还有不少问题存在，若有请留言哦。