H5唤起APP的解决方案：手机浏览器跳转app内指定页面（URL Scheme使用）

一、URL Scheme介绍

1、什么是 URL Scheme？URL Scheme的作用

对于Android，Scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。

对于iOS，我们都知道苹果手机中的APP都有一个沙盒，APP就是一个信息孤岛，相互是不可以进行通信的，但是苹果还是给出了一个可以在app之间跳转的方法：URL Scheme。iOS的APP可以注册自己的URL Scheme，URL Scheme是为方便app之间互相调用而设计的，我们可以通过系统的OpenURL来打开该app，并可以传递一些参数。

URL Scheme必须能唯一标识一个APP，如果你设置的URL Scheme与别的APP的URL Scheme冲突时，你的APP不一定会被启动起来。因为当你的APP在安装的时候，系统里面已经注册了你的URL Scheme。一般情况下，是会调用先安装的app，但是iOS的系统app的URL Scheme肯定是最高的，所以我们定义URL Scheme的时候，尽量避开系统app已经定义过的URL Scheme。

简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。每个app的URL Scheme都是不一样的，如果存在一样的URL Scheme，那么系统就会响应先安装那个app的URL Scheme，因为后安装的app的URL Scheme被覆盖掉了，是不能被调用的。

2、URL Scheme应用场景：

客户端应用可以向操作系统注册一个 URL scheme，该 scheme 用于从浏览器或其他应用中启动本应用。通过指定的 URL 字段，可以让应用在被调起后直接打开某些特定页面，比如商品详情页、活动详情页等等。也可以执行某些指定动作，如完成支付等。也可以在应用内通过 html 页来直接调用显示 app 内的某个页面。综上URL Scheme使用场景大致分以下几种：

（1）服务器下发跳转路径，客户端根据服务器下发跳转路径跳转相应的页面

（2）H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面

（3）APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面

（4）APP根据URL跳转到另外一个APP指定页面

3、URL Scheme协议格式：

客户端自定义的 URL 作为从一个应用调用另一个的基础，遵循 RFC 1808 (Relative Uniform Resource Locators) 标准。这跟我们常见的网页内容 URL 格式一样。

一个普通的 URL 分为几个部分：scheme、host、relativePath、query。

比如：http://www.baidu.com/s?rsv_bp=1&rsv_spt=1&wd=NSurl&inputT=2709，这个URL中，scheme 为 http，host 为www.baidu.com，relativePath 为 /s，query 为 rsv_bp=1&rsv_spt=1&wd=NSurl&inputT=2709。

一个应用中使用的 URL 例子（该 URL 会调起车辆详情页）：uumobile://mobile/carDetail?car_id=123456，其中 scheme 为 uumobile，host 为mobile，relativePath 为 /carDetail，query 为 car_id=123456。

     行为(应用的某个功能页面)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

二、H5唤起APP的解决方案

了解了scheme我们就知道了如何唤起我们的app，并跳转到指定页面，如何注册scheme请看这篇博客：Android平台、iOS平台设置UrlSchemes，实现被第三方应用调用

接下来我们需要做的就是在用户浏览网页时，如何能判断该用户是否安装了该应用。如果安装了该应用，就直接打开该应用；如果没有安装该应用，就下载该应用。

基本大部分解决方案的原理都是如此：先打开scheme协议来唤起app，如果超时了（比如超时2s）那么就跳转到app下载页。

方案原理大致如此，就是需要做一些优化，比如微信浏览器、打开了scheme唤起了app，此时也就是在document隐藏时，需要清除延时跳转下载页的定时器以防出现下载等等

也有方案插件，这里推荐2款：

第一款：callapp-lib，周下载700多

第二款：web-launch-app，周下载100多

直接按文档引用即可。

这篇博客详细介绍了一些方案，并附开源库callapp-lib，写的很不错，可以了解下：H5唤起APP指南(附开源唤端库)