自从智能手机开始流行，进入移动互联网时代，各个企业开始发布自己的APP，公共流量逐渐流入并固化到APP内部生态圈。而给到Web前端的其中一个重要任务就是引流，也就是从H5页面打开APP。
常用调起APP方式
URL Scheme
URL Scheme是一种由APP自定义的URL格式，用于实现调用APP执行特定操作的方式。 它和http的url很像，格式为myapp://path，下面列举一些常用APP的URL Scheme：
- 微信
- 打开微信（不指定具体功能页面）：
weixin:// - 打开“扫一扫”功能：
weixin://scanqrcode
- 打开微信（不指定具体功能页面）：
- 支付宝
- 余额宝：
alipays://platformapi/startapp?appId=20000032 - 付款码：
alipays://platformapi/startapp?saId=20000056
- 余额宝：
- 淘宝
- 打开购物车页面：
taobao://main.m.taobao.com/cart/index.html
- 打开购物车页面：
调用方式
它的调用方式也很简单，最广泛使用的是通过改变地址栏发出请求，也就是 window.location.href 或者 <a href="">打开APP</a> 这样的形式。但是会存在着如果没有安装该APP的话，会出现一个显示“无法打开页面”的弹窗
还有同样利用地址栏，但是相对间接一些的，就是使用 <iframe src=""></iframe> 去调起APP。它的好处是不会像上面那样在没有安装APP的时候出现弹窗，影响用户体验。缺点是可能存在兼容性问题，部分浏览器或者APP内部的webview可能会屏蔽这种调用方式，导致无效。
另外在古早时期（iPhone 3GS年代）也曾经可以使用 alert('xxx') 去调用。
Universal Link
这个是苹果在iOS 9添加的一种iOS系统特有的调用方式，用户体验更佳更丝滑，对用户无感知，即使没有安装APP也不会有弹窗提示。
下面有两个苹果官方提供的原生APP开发文档和使用手册
Universal links for developers
Allowing apps and websites to link to your content
下图是我总结的前端视角的Universal Link全流程：
由上面的叙述可知，Universal Link实际上传输给APP的内容就是页面地址，因此需要传给客户端的内容都要在地址上得到体现（新接入的话，可能需要进行一定程度的改造），并且地址上的结构、参数等都要和APP开发达成一致。
注意事项：
- 确保配置文件可访问（我们曾经试过由于访问文件404导致整个链路失效）
- 由于是系统层面拦截http请求页面，所以如果已安装用户是不会发出页面请求而直接打开APP，如果该中转页有相关数据埋点上报，就会绕过导致缺失
- 由于此功能关系到用户导流，这个流程理论上应该是在每个客户端版本上线都需要覆盖测试（我们曾经多次遇到客户端代码优化导致该功能失效或者进入APP后解析出错无法跳转到期望的页面）
更加极致的方案
难道还有高手？必须得～
正如上面所说的，如果iOS设备已经安装了APP，页面请求就会被系统拦截而不会发出，意味如果服务器收到请求且UserAgent判断为iOS的话，几乎可以认为是未安装APP的设备。那么，就可以直接在HTTP返回头返回301状态码，并且Location字段返回App Store里APP的下载地址，如https://apps.apple.com/US/app/idxxxxxxxxxx?mt=8。
这样，iOS用户的体验将会变得更加简洁，要么直接打开APP，要么进入App Store下载页。
微信开放跳转按钮（wx-open-launch-app）
目前Android微信基本上都把APP内部webview打开URL Scheme的路径给屏蔽掉了。一般情况下我们判断出微信打开页面的话，给出一个提示页让用户自己手动右上角点击浏览器打开，这样的操作就足以让这个链路的用户损失了不少。而这个方式是针对Android设备在微信场景内更优雅的跳转处理，则大大提高了这个场景下的用户体验。
简单来说，
- 首先公司的服务号需要在微信平台登记备案，并绑定指定APP
- 在微信开放平台完成相关配置
- 同时APP需要接入微信OpenSDK
- H5页面完成接入
- 模版代码加入按钮组件
- JS代码添加相关功能注册和调用
配置成功后，显示按钮：
整个用户体验也是非常丝滑：
- 已安装APP，则显示提示是否允许跳转（目前Android 系统的常规操作）
- 未安装APP，则跳转到 应用宝 内相应的APP下载页
总结
无论上面提到的哪一种方案，都有各自的适用场景和一定程度的缺陷，可以混合搭配根据不同场景不同优先级使用。
另外，有一点特别重要需要说明，无论什么情况下，对于页面代码来说，都是无法明确知晓本设备有没有安装APP。 所以，当业务侧提出诸如用户没有安装的时候就直接走下载、或者URL Scheme的方案能不能不出现弹窗，都是无法实现的。根据我多年和不同产品经理或运营同学合作，几乎每一个都会提出这样的想法或疑问，即需要我们提前和他们拉通好能做到的程度和功能。
