H5 打开 APP 或者下载 APP

需求

H5 页面上有一个按钮，点击按钮，如果手机安装了 APP，就打开 APP，如果没有安装 APP，就进行下载，iOS 打开 Apple Store 进行下载，安卓直接下载。

概念

Deep linking

深度链接的意思是指链接到网站特定页面而不是网站首页，对于 APP，就是进入 APP 特定的页面而不是仅仅启动 APP。

目前网上对于 Deep link 的解释有些混乱，一般有些跟 URL scheme 混淆，认为是同一个概念，有些跟唤起 APP 的实现混为一谈，认为是唤起 APP 的一种技术。我暂时先简单这么理解。

URL Scheme

这又是一个有点误解的词，首先看下 Uniform Resource Identifier 的定义。

ini 复制代码

URI = scheme ":" ["//" authority] path ["?" query] ["#" fragment]

严格来说 scheme 就是 // 前面的部分，比如 http。

再看下 List of URI schemes，所谓 URI scheme 就是 URI。很多 mobile deep link 算是非正式的 URI scheme。

Universal Link

Universal Links（通用链接），支持 iOS9 及以上版本 ，是苹果提供给开发者的一项新技术。

APP Link

在 2015 年的 Google I/O 大会上，Android M 宣布的一个新特性：App Links。

URL Scheme

上面已经介绍了概念，还要详细介绍一下 URL Scheme 在打开 APP 方面的应用。

URL Scheme 是一种页面跳转协议，是一种用来定位 APP 的独特标识。根据它可以唤醒系统中对应的 APP。

例如 weixin:// 是微信 APP 的协议名，当我们在浏览器访问这个地址时就可以唤醒微信 APP，并且携带所需参数，这个参数就可以用于跳转指定页面。

常用APP的 URL Scheme

APP	微信	支付宝	淘宝	微博	QQ	知乎	短信
URL Scheme	weixin://	alipay://	taobao://	sinaweibo://	mqq://	zhihu://	sms://

需要注意：

当要被唤起的 APP 没有安装时，打开这个链接就会出错。在国内非常杂乱的手机浏览器中，出错的现象会很多。
目前没有办法区分多个 APP 都注册了相同 Scheme 的情况。
有 URL Scheme 劫持风险，比如有一个 APP 也向系统注册了 zhihu:// 这个 scheme ，唤起流量可能就会被劫持到这个 APP 里；
Android 端微信 APP 无法直接通过 Scheme 唤起 APP，可以通过引导或微信开放标签来解决。
只能通过 hidden、blur 等事件监听到是否安装了APP。

iOS 注册 URL Scheme

配置 info.plist 文件

具体参考：juejin.cn/post/684490...

安卓注册 URL Scheme

在 AndroidManifest.xml 中对标签增加设置 Scheme：

xml 复制代码

<activity
    android:name=".GoodsDetailActivity"
    android:theme="@style/AppTheme">
    <!--要想在别的App上能成功调起App，必须添加intent过滤器-->
    <intent-filter>
        <!--协议部分，随便设置-->
        <data android:scheme="xl" android:host="goods" android:path="/goodsDetail" android:port="8888"/>
        <!--下面这几行也必须得设置-->
        <category android:name="android.intent.category.DEFAULT"/>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.BROWSABLE"/>
    </intent-filter>
</activity>

H5 打开 APP 原理

一般是唤起 APP，如果不能唤起就去下载 APP，然而浏览器无法知道唤起 APP 是否成功。所以是需要一些处理的，对于 iOS Universal Link 方式来说，可以实现唤端失败直接打开页面，但是 URL Scheme 并不能失败后跳转页面。一般是设置一个定时器，超过一定时间就进行下载的操作，如果唤端成功，页面会隐藏，清除定时器。

代码示例

js 复制代码

let timer = null;  
const openApp = () => {  
  // 呼起APP  
  window.location.href = 'APP Scheme 地址';  
  
  // 3s之后跳转到APP下载页  
  if (timer) clearTimeout(timer);  
  timer = setTimeout(() => {  
      window.location.href = 'APP下载页面地址';  
  }, 3000);  
  
  // 跳转app之后禁止再跳转中间页  
  document.addEventListener('visibilitychange', () => {  
    clearTimeout(timer);  
  });  
};

Universal Link （iOS）

Universal Link 是在 iOS 9 中新增的功能，使用它可以直接通过 https 协议的链接来打开 APP。它相比前一种 URL Scheme 的优点在于它是使用 https 协议，所以如果没有唤端成功，那么就会直接打开这个网页，不再需要判断是否唤起成功了。并且使用 Universal Link，不会再弹出是否打开的弹出，对用户来说，唤端的效率更高了。

在 APP 中注册自己要支持的域名.
在自己域名的根目录下配置一个 apple-app-site-association 文件即可。

特点

相对 URL Scheme，universal links 有一个较大优点是它唤端时没有弹窗提示是否打开，提升用户体验，可以减少一部分用户流失。
无需关心用户是否安装对应的 APP，对于没有安装的用户，点击链接就会直接打开对应的页面，因为它也是 http 协议的路径，这样也能一定程度解决 URL Scheme 无法准确判断唤端失败的问题。
只能够在 iOS 上使用。
只能由用户主动触发。

App Link（安卓）

在 2015 年的 Google I/O 大会上，Android M 宣布了一个新特性：App Links。它可以让用户在点击一个普通 Web 链接的时候可以打开指定 App 的对应页面，前提是这个 App 已经安装并且经过了验证，否则会显示一个打开确认选项的对话框，目前只支持 Android M 以上系统。

App Links 的出现其实也是为了优化用户体验，在使用它唤醒 APP 时会弹出一个对话框提示用户是否打开，缺点就是如果用户勾选了取消之后，可能之后就再也唤醒不了了。

工作方式及流程

配置 AndroidManifest.xml
配置 json 文件

json 复制代码

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "包名",
    "sha256_cert_fingerprints": ["签名"]
  }
}]

将 json 文件上传到指定域名的 .well-known 路径下，文件名定义为 assetlinks.json
验证 App Links ，可使用 AndroidStudio 里的 App Links Assistant 中的 Test App Links 进行测试或者在短信中输入链接点击测试，如果直接唤起 App 没有弹出对话框选择则说明 App Links 验证成功；

总的来说与 Universal Link 的配置和验证很相似，差异不大。

Chrome Intents（安卓）

Chrome Intent 是 Android 设备上 Chrome 浏览器中 URI 方案的深层链接替代品。
如果 APP 已安装，则通过配置的 URI SCHEME 打开 APP。
如果 APP 未安装，配置了 fallback url 的跳转 fallback url，没有配置的则跳转应用市场。

三种唤端媒介

a 标签

html 复制代码

<a href="xxx://xxx"></a>

iframe

js 复制代码

const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'zhihu://'
document.body.appendChild(iframe)

window.location

js 复制代码

window.location = 'zhihu://'

微信 wx-open-launch-app

微信在 2020 年 5 月推出了微信开放标签功能，用于在微信浏览器内直接唤醒 App，也能通过携带参数直接进入 App 相应的页面，只要按照文档规定接入微信 SDK 就可直接使用该功能。

适用环境

微信版本要求为：7.0.12 及以上
系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上

具体要求可以参考官方开放平台：微信官方文档（ developers.weixin.qq.com/doc/oplatfo... ）。

接入流程

登录微信公众平台填写「JS 接口安全域名」
接入如下微信 JS 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js（至少 1.6.0 版本）
通过 config 接口注入权限配置

js 复制代码

wx.config({
  debug: true,   // 调试模式开关
  appId: '',   // 公众号标识
  timestamp: ,   // 时间戳
  nonceStr: '',   // 生成签名随机串
  signature: '',  // 唯一验签
  jsApiList: [],  // JS接口列表
  openTagList: ['open-tag-launch-app']  // 要使用的开放标签列表
});

引用标签，使用组件包裹需要触发事件的组件即可；

html 复制代码

<open-tag-launch-app extinfo="extinfo">
  <button>打开App</button>
</open-tag-launch-app>