最近公司要开发H5端唤醒 APP的功能，这本应该是一个相当标准化的功能，也有一些第三方，但实际上发现还是有一些坑存在，总结了一下主要的方案有：
- Scheme 方案：iOS和安卓中均可配置，采用自定义的 Scheme（如 alanhou://）来完成跳转。在已安装应用的情况下适用于安卓&iOS 默认及非默认浏览器跳转，但在未安装时则无法进行任何操作，并且在微信内无论是否安装均无法进行任何操作。
- App Links 方案：这一方案在 iOS 中称为Universal Links，你会发现在各类技术文章中都会推荐这种方式，但它并不是万金油。
- 首先来说 iOS 端，Universal Links 在已安装应用的情况下可完成在默认浏览器端及微信内唤醒应用的操作，在未安装时也可打开所配置中转页面，进行下载，听起来已经很完美了，但还有一小戳人在苹果手机内会使用Safari 以外的浏览器，又会存在一些不同的行为。
- 再来说说安卓内的App Links，在完成配置后，通过记事本或短信中的链接可直接唤醒已安装的应用，未安装则在浏览器中打开所配置的中转页面，似乎和前面iOS 端没有差别，但当你在浏览器中进行操作时会怀疑是否是自己的配置出现了问题，事实上这却是安卓的尴尬之处，那就是国内厂商的安卓版本中大多进行了这一跳转的拦截，导致这一功能形同鸡肋。那么在微信内的情况如何呢，很遗憾，同样无法使用。
- Chrome Intent 方案：这种是安卓专属，国内采用度好像并不高，本质上与前面方案的配置类似，这里不进行赘述。
- 应用宝：微信内借助于应用宝链接https://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxxx可以实现直接下载应用，并且在某些系统下安卓在安装情况下可直接跳入应用页面
说了那么多，究竟推荐什么方案呢，有一个开源代码其实做了一个较好的示例：H5跳转APP开源项目web-launch-app。总的来说需要针对不同环境进行判断，在使用 Scheme 的场景中由于无法判断 APP 是否安装，一般会通过使用 Scheme 进行唤醒，设置一个超时时间进行跳转应用商店或下载中转页面的操作。
注：前述不论 Scheme 还是 App Links在浏览器中打开的方式都不是指在网址栏中直接输入，而是通过 a 标签点击进入或location.assign()自动唤醒。其中在 iOS 环境下Safari 中访问中转页面时如已安装应用，下拉会出现系统自带的打开应用按钮。比如下图是知乎中转页面https://oia.zhihu.com/下拉后的效果：
注：location.assign()的方式调取 Scheme 形式的链接需要使用 https 协议的链接进行访问，否则可能会受到来自浏览器的限制
H5跳转 iOS相关配置
iOS 的 scheme 配置在Info.plist > URL types > item x（如 item 0） > URL Schemes 下配置
借助于 Universal Links（或称通用链接），H5跳转到 iOS 应用确实简单化了不少，关于 Universal Links如何配置网上已经非常多了，
|
1 2 3 4 5 6 7 8 9 10 11 12 |
# apple-app-site-association { "applinks": { "apps": [], "details": [ { "appID": "团队ID.包ID", "paths": [ "/app/*","/link/*" ] } ] } } |
Nginx 参考配置：
|
1 2 3 4 |
location /apple-app-site-association { default_type application/json; alias /path/to/apple-app-site-association; } |
一些注意的点：
- 使用 Universal Links 需在苹果开发者平台中配置Associated Domains
- 要在微信内使用 Universal Links 需在微信开放平台中创建应用，并在应用的”开发信息”下配置Universal Links链接，如
https://alanhou.org/app/，需以/结果。请不要被这个称谓所迷惑，虽然用的是复数，但时至今日微信实际上只允许配置一个域名，这里的坑是如果你打算更换域名的话，会导致当前线上应用中的微信登录等功能完全不可用。
相关链接：
H5跳转安卓相关配置
安卓中不论是 Scheme还是 App Links 都在AndroidManifest.xml中进行配置，参照配置如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!--Applinks配置--> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="https" android:host="alanhou.org" android:pathPrefix="/app/" /> <data android:scheme="http" /> </intent-filter> <!--Scheme 配置--> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="alanhou" <!--android:host="xxx--> /> </intent-filter> |
服务器端配置文件：
|
1 2 3 4 5 6 7 8 9 10 11 |
# assetlinks.json [{ "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "org.alanhou.app", "sha256_cert_fingerprints": ["96:60...."] } }] # Nginx 配置参见 iOS |
我们前面提到过，不论是App Links 还是 Scheme 在微信内都无法唤起安卓应用，那么如何突破这一限制呢？据说有入驻应用宝并达到某级别的应用可直接进行跳转，这显然不在我们的讨论范围内。微信自己提供了一套解决方案，称之为 Open Tag，也就是使用wx-open-launch-app标签，这一方案不仅适用于安卓，也适用于 iOS，但前面说了 Universal Links 已经解决了我们的烦恼，所以这里就以安卓为例。
使用这一方案需要满足一些条件：
- 同一主体的服务号和开放平台账号
- 开放平台内创建安卓应用并关联服务号
- 通过开放平台 管理中心 > 公众账号下的服务号申请“网页跳转移动应用”接口，限制颇多
- 一个域名仅允许关联一个应用
- 每月仅允许修改3次
- 域名应为服务号添加过的安全域名
完成以上申请后即可使用 Open Tag 了，但实际开发也不会那么顺畅，首先参照官方文档的步骤进行鉴权获取签名等信息再调用wx-open-launch-app标签，传入开放平台中应用的 AppID。
Vue 内可能存在template 标签的兼容性问题，此时应修改为：
|
1 |
<script type="text/wxtag-template"> |
此外如使用weixin-js-sdk的 npm 包进行微信开发，请注意升级至1.6.0或之后的版本，否则会发现 Open Tag 会卡在“即将离开微信，打开xxx”这一步无法使用。这一方案还需要安卓端进行配合，参见安卓接入微信开放平台官方文档，添加依赖、配置AndroidManifest.xml及添加好入口 Activity后即可使用。
此外目前测试下来这一方案存在一个问题，就是仅在启动本地安卓应用后才能进行跳转，还有待进一步测试，但如果是这样的话又有一点鸡肋了。
以上就是最近几天研究测下来的结果，完成这些配置后 H5端与安卓、iOS 端进行参数约定即可实现跳转指定页面的功能了。