阅读 3895

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);
}
复制代码

到此就实现了基本的功能了,实际过程中可能还有很多问题存在,如有请留言哦。

关注下面的标签,发现更多相似文章
评论