URL Scheme到底应该怎么跳转

什么是 URL Scheme#

在现代 URL 协议中，除了在浏览器里常见的http协议，还有一类 URL 叫URL Scheme，形如这样的一些链接：

alipayqr://platformapi/startapp?saId=10000007 打开支付宝扫一扫
weixin://scanqrcode 打开微信扫一扫

常见的 URL Scheme 你可以在网上搜到，这里我找到一份常见 iOS App URL Scheme

它们的 “协议头” 是由 App 自己定义的。这些 URL 在得到正确的处理后就会携带 URL 内容打开并传递给对应的 App，常见的打开方法有：浏览器以及手机上自带的扫一扫功能。

URL Scheme是URL吗？当然是，它也有和 http url 差不多的特性，比如支持GET参数。通过这种方式，能够实现将参数携带给目标 App 去处理。

在浏览器中访问 URL Scheme 就可以打开

在浏览器中访问 URL Scheme 就可以打开

那有什么用？#

利用它，可以实现在不同 App 之前跳转。虽然现在网页技术很成熟了，但是Native应用不能直接搬到浏览器里运行，有些必须使用到的 API 实在是没有提供支持（例如网页上读取 NFC 信息），再或者运营多一个平台成本太高，划不来。

所以很多别人分享给你的 App 链接，打开后第一件事情就是让你：在 “App” 中打开此页？ 如果你不这么做，你可能得到一个压根不能用的网页版本：

今天这个 App 你必须给我打开！！

由于国家出手整治，现在强制使用 App 的情况少了很多。搞个障眼法限制一下功能而已，一张图有三个地方在暗示你打开 App。

整治前呢？流氓到你搜索图片，强制让你用 App 才能看结果..（不点名了，用过的都有数）

这么坏？那有这个东西干什么？那肯定是有需求才被制造出来的。比如在网页里买东西付款的时候，快捷登陆网页的时候；网页并没有办法取得你手机里 App 存储的信息，而你也不希望在网页上又重复输入一遍那总是忘记的密码，甚至盘问你所有的安全信息吧？

所以这个东西只能是有利有弊，在国家出手后，我认为这个利会慢慢持平的。

交互中怎么跳转比较好？#

那如果这个URL Scheme我需要用，怎么才能让我在网页里实现不了的功能引导用户打开 App 去使用呢？

URL Scheme 跳转的几种方式#

前面介绍过了，URL Scheme其实本质上还是URL，那么正常打开链接的方法都能用：

a 标签
使用 js 创建 iframe

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);

使用 js 跳转

window.location.href = url;

不过前面也提到了，URL Scheme是需要 App 主动注册的，App 都没装怎么办？那打开就会像这样：

怎么判断是否成功跳转#

题外话，还有一种Universal Link，能够让系统和浏览器主动帮你完成判断对应 App 是否打开的事情。不过，仅限在Apple 设备上

由于访问 url 是单向的，并不
会给予程序任何反馈，所以我们只能从一些其他现象来判断是否成功打开：

来源各种场景唤起 App 骚操作

常用的是定时器法，原理就是跳转 App 后，浏览器中的 JS 线程有可能会被暂停，这个时候 “时间就不走了”，而没有安装 App 则有可能留在原来的网页不动，从而判断并没有成功打开 URL Scheme，进而进行后续的逻辑。

不过代码看起来实在是复杂，兼容性做的很足，能不能简化一下？


var work = false;
window.location.href = "URL Scheme"
window.onblur=function(){work = true;}
window.setTimeout(function(){
  if(!work){
    打开失败的逻辑，比如：
    window.location.href = "下一步的链接"
  }
},1000)

这个是我试着写出来的，不过正如上面的文章所说，需要考虑不同机型的唤起速度，我这里固定1 秒，体验上来说不会很久页面才会有进一步的动作。

不过你可能也发现了，同样是判断页面有没有失去焦点，但是如果 URL Scheme 是无效的，在 Safari 浏览器中也会弹个窗，那这样子处理反而会导致没有安装 App 的用户也不能得到正确的反馈。

当然这个事情因不同平台而已，就我实际测试，相当一部分的 App 内置浏览器 / 安卓自带浏览器，在遇到不认识的 URL Scheme 时是不会有任何反馈的。

那么本着宁可错杀一千不放过一个，在实际业务里应该这么用：

window.location.href = "URL Scheme"
window.setTimeout(function(){
  打开失败的逻辑，比如：
  window.location.href = "下一步的链接"
},1000)

还需要等待，是为了让能够跳转的用户视觉上看起来没那么割裂（弹窗的底下还有东西在加载）

支持 Universal Link 大力发展！

拒绝流氓行为强制跳转 App 使用基本功能！