作者：_拾邑
链接：https://juejin.im/post/5b7efb2ee51d45388b6af96c

前言

前一段时间在做电流App H5页面，需求中落地页占比较大，落地页承担的职责就是引流。引流有两种形式，同时也是我们对唤端的定义：引导已下载用户打开APP，引导未下载用户下载APP。

引导已下载用户打开APP，从数据上说用户停留在APP中的时间更多了，是在提高用户粘性；从体验上说，APP体验是要比H5好的。引导未下载用户下载APP，可以增加我们的用户量。

上面其实分别解释了 什么是唤端以及 为什么要唤端，也就是 3W法则中的 What 和 Why，那么接下来我们就要聊一聊 How 了，也就是 如何唤端。

我们先来看看常见的唤端方式以及他们适用的场景：

唤端媒介

URL Scheme

我们的手机上有许多私密信息，联系方式、照片、银行卡信息...我们不希望这些信息可以被手机应用随意获取到，信息泄露的危害甚大。所以，如何保证个人信息在设备所有者知情并允许的情况下被使用，是智能设备的核心安全问题。

因此，我们急需要一个辅助工具来帮助我们实现应用通信， URL Scheme 就是这个工具。

URL Scheme 是什么

我们来看一下 URL 的组成：

[scheme:][//authority][path][?query][#fragment]

我们拿 https://www.baidu.com来举例，scheme 自然就是 https了。

就像给服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。

常用APP的 URL Scheme

URL Scheme 语法

上面表格中都是最简单的用于打开 APP 的 URL Scheme，下面才是我们常用的 URL Scheme 格式：

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

Intent

安卓的原生谷歌浏览器自从 chrome25 版本开始对于唤端功能做了一些变化，URL Scheme 无法再启动Android应用。 例如，通过 iframe 指向 weixin://，即使用户安装了微信也无法打开。所以，APP需要实现谷歌官方提供的 intent:语法，或者实现让用户通过自定义手势来打开APP，当然这就是题外话了。

Intent 语法

intent:HOST/URI-path // Optional host #Intent; package=[string]; action=[string]; category=[string]; component=[string]; scheme=[string]; end;

如果用户未安装 APP，则会跳转到系统默认商店。当然，如果你想要指定一个唤起失败的跳转地址，添加下面的字符串在 end; 前就可以了:

S.browser_fallback_url=[encoded_full_url]

示例

下面是打开 Zxing 二维码扫描 APP 的 intent。

intent://scan/#Intent; package=com.google.zxing.client.android; scheme=zxing; end;

打开这个 APP ，可以通过如下的方式：

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>

如何调用唤端媒介

通过前面的介绍，我们可以发现，无论是 URL Scheme 还是 Intent 或者 Universal Link ，他们都算是 URL ，只是 URL Scheme 和 Intent 算是特殊的 URL。所以我们可以拿使用 URL 的方法来使用它们。

iframe

<iframe src="sinaweibo://qrcode">

在只有 URL Scheme 的日子里，iframe 是使用最多的了。因为在未安装 app 的情况下，不会去跳转错误页面。但是 iframe 在各个系统以及各个应用中的兼容问题还是挺多的，不能全部使用 URL Scheme。

a 标签

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">扫一扫</a>

使用过程中，对于动态生成的 a 标签，使用 dispatch来模拟触发点击事件，发现很多种 event 传递过去都无效；使用 click()来模拟触发，部分场景下存在这样的情况，第一次点击过后，回到原先页面，再次点击，点击位置和页面所识别位置有不小的偏移，所以 Intent 协议从 a 标签换成了 window.location。

没有完美的方案

透过上面的几个点，我们可以发现，无论是 唤端媒介、 调用唤端媒介还是 判断唤端结果都没有一个十全十美的方法，我们在代码层上能做的只是在确保最常用的场景（比如 微信、微博、手百 等）唤端无误的情况下，最大化的兼容剩余的场景。

好的，我们接下来扯一些代码以外的，让我们的 APP 能够在更多的平台唤起。

微信、微博、手百、QQ浏览器等。

这些应用能阻止唤端是因为它们直接屏蔽掉了 URL Scheme 。接下来可能就有看官疑惑了，微信中是可以打开大众点评的呀，微博里面可以打开优酷呀，那是如何实现的呢？

它们都各自维护着一个白名单，如果你的域名在白名单内，那这个域名下所有的页面发起的 URL Scheme 就都会被允许。就像微信，如果你是腾讯的“家属”，你就可以加入白名单了，微信的白名单一般只包含着“家属”，除此外很难申请到白名单资质。但是微博之类的都是可以联系他们的渠道童鞋进行申请的，只是条件各不相同，比如微博的就是在你的 APP 中添加打开微博的入口，三个月内唤起超过 100w 次，就可以加入白名单了。

腾讯应用宝直接打开 APP 的某个功能

刚刚我们说到，如果你不是微信的家属，那你是很难进入白名单的，所以在安卓中我们一般都是直接打开腾讯应用宝，ios 中 直接打开 App Store。点击腾讯应用宝中的“打开”按钮，可以直接唤起我们的 APP，但是无法打开 APP 中的某个功能（就是无法打开指定页面）。

腾讯应用宝对外开放了一个叫做 APP Link 的申请，只要你申请了 APP Link，就可以通过在打开应用宝的时候在应用宝地址后面添加上 &android_schema={your_scheme}，来打开指定的页面了。

福利

信息量很大！各种问题得自己趟坑验证！内心很崩溃！

不用愁，已经为你准备好了药方，只需照方抓药即可 —— npm 包 callapp-lib

你也可以通过 script 直接加载 cdn 文件：

<script src="https://unpkg.com/callapp-lib"></script>

它能在大部分的环境中成功唤端，而且炒鸡简单啊，拿过去就可以用啊，还支持很多扩展功能啊，快来看看文档吧！

地址：

https://github.com/suanmei/callapp-lib

近期文章：

• View绘制流程深度剖析之-inlate

• Android不再免费，华为自主研发操作系统

• 给大家推荐10个优秀的开源项目

等等，先别走！「码个蛋」又有活动了！参与活动不但可以培养自己的好习惯，还能拿到「码个蛋」IP系列专属奖品，速度要快...

 戳我看详情 

今日问题：

项目中，你是怎么处理H5跳转app的呢？

留言格式：

打卡 x 天，答：xxx。

告诉你一个小技巧：

只需3步，你将不会错过任何一篇文章！