H5场景下唤起APP方法详解（拉端）

本人前端新人一枚，恰巧公司分配做唤起APP方面的工作，自己也研究了一下唤起APP的方式，希望将自己的实践让更多人受益，也希望各位大佬给出建议和指教，话不多说，现在开始。

唤起APP的原理

唤起APP的原理其实和在浏览器中跳转web页面的形式是一样的，都是通过跳转对应的链接从而实现打开APP的页面，web页面跳转的路径是网页url，而唤起APP的路径则是schema路径。

url schema（拉端路径）：在现在比较通用的技术，它一般由协议名、路径、参数组成。这个一般是由native开发提供，我们前端拿到这个schema就可以打开app或app内的某个页面了，简称deeplink，例如：

微信：weixin：// + 路径 + 参数
支付宝：alipay：// + 路径 + 参数
爱奇艺：iqiyi：// + 路径 + 参数
B站：bilibili:// + 路径 + 参数

js 复制代码

window.location.href = url schema   //跳转APP

备注：如果想要看schema路径的话，可以上各大移动端网站，点击唤起APP按钮后就可以在network找到相应的请求链接

下面我们来说不同环境下的拉端方法！！

web页面主要环境

从用户使用数量的角度来说，目前web唤起APP（以后简述都说"拉端"）的场景主要是在分享页面进行引流APP的场景，而主要的web页面环境有三个：

微信
QQ
默认浏览器（safiri以及安卓各大厂商默认浏览器）

我们从限制最大的微信环境开始说起。

微信

首先，微信是拉端限制最多的场景，那么微信端上我们又必须区分IOS系统场景和Android系统场景，在这两个系统下，打开微信浏览器的方式又分为：微信card，扫描二维码以及复制链接直接打开页面三种，所以接下来我们就来说说。

微信官方方法（IOS和Android都可以使用）

微信官方推出的拉端方法，则是微信开放标签 ------ wx-open-launch-app。这是用于页面中提供一个可跳转指定APP的按钮，文档地址：

developers.weixin.qq.com/doc/offiacc...

微信开放标签样例代码

js 复制代码

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

按钮创建

我们要先去创造新的拉端APP的按钮
通过上述的代码把我们生成的微信开放标签覆盖到相应的按钮上
将extinfo属性的值改成deeplink即可

通过上述三个步骤，我们就可以点击按钮进行拉端了。

但是！！！重要的事情说三遍！重要的事情说三遍！重要的事情说三遍！

这个按钮无法用JS代码进行点击操作，必须是人为操作点击按钮才可以（想进入页面直接自动拉端的不能使用此方案）。
只有扫码进入页面或者通过点击微信card的方式进入页面的情况下，才能用微信开放标签的方法，如果是复制链接进入的页面则会拉端失败，errMsg会显示"launch:fail"

js 复制代码

btn.addEventListener('error', function (e) {
    console.log('fail', e.errMsg); //e.errMsg可以监听到失败的原因
  });

微信开放标签的事件监听

微信开放标签的事件主要有三个：ready，launch，error，当然另外也可以自己创建DOM的变量进行click事件的监听，在这里主要说两个：launch和error

（1）launch

launch事件的官方备注：用户点击跳转按钮并对确认弹窗进行操作后触发。

也就是说当点击上图中的取消或者允许按钮后，才能触发launch事件的回调。如果不点击的话，launch事件一直都不会触发。但是！需要注意的一点，就是当你的手机上没有对应APP的时候，就算点击按钮也不会监听到事件？对于这一点本人也持怀疑态度（开发中遇到的情况）

（2）error

官方备注：用户点击跳转按钮后出现错误

顾名思义，当点击微信开放标签报错的时候，就会监听到error事件，举一个最简单的例子：在没有响应APP的情况下，点击微信开放标签，就会监听到error事件

那么error事件的返回值errMsg有两种情况，这边直接复制官方的备注

"launch:fail" ：当前场景不支持跳转，或Android上该应用未安装，或iOS上用户在弹窗上点击确认但该应⽤未安装
"launch:fail_check fail" ：校验App跳转权限失败，请确认是否正确绑定AppID

具体是哪种错误就需要根据情况分析。

关于微信官方的方法，我们说了这么多，但是我们发现在微信情景下，有两种情况我们用微信官方方法是无法办到的

第一种就是进入页面自动拉端

第二种就是复制链接进入页面的情况

在Android的情况下，目前本人是没有找到解决方法，但是在IOS端，是有着起特有的方法的，下面我们就来看一下。

IOS系统场景下特有方法

IOS系统在IOS9以后推出了一种通用链接，叫做"Universal Links"，对于"Universal Links"网上已经有很多介绍了，在这里就不做解释了，如果你的APP支持这种通用链接的话，则可以直接使用Universal Links（简称：ulink）进行拉端，例如：

js 复制代码

window.location.href = Universal Links

在微信更新7.0.7版本以后微信APP允许使用Universal Links进行通信，这是一种苹果系统给予的第三方的通信唤起APP的方法。

如何判定拉端方法？

如果我们想进入一个大厂的微信web页面，点击拉端按钮后如何去判断方法呢，教大家一个最简单的方法。那就是看弹窗样式

左图的样式则是Universal Links的方法，右图的样式则是微信开放标签的方法。

微信环境下的总结

在微信扫码和点击微信card的进入web页面的情况下 ，我们可以用微信开放标签达到拉端的功能，在IOS系统的情况下，复制链接进入web页面的情况下，或者想进入页面后实现自动拉端的功能，可以用Universal Links，当然Android没有这种办法，希望以后可以有解决的办法。

QQ

相较于微信，QQ的环境限制会小一点，但是也比较特殊。为什么特殊呢？因为涉及到了应用宝。

关于应用宝，本人也不太了解，所以只说如何用应用宝去拉端。

应用宝方法

这个方法是QQ独有的方法，其他环境不知道，各位可以自己去尝试。所谓应用宝方法，就是在我们通过location.href跳转到应用宝页面，使用这个方法的前提是你的应用在应用宝注册过！

应用页面链接构成

域名：a.app.qq.com/o/simple.js...

参数：

pkgname：包名
android_schema（苹果系统为ios_schema）：deeplink链接

js 复制代码

window.location.href=//a.app.qq.com/o/simple.jsp?pkgname=XXX&android_schema=XXX

通过这个方法我们可以跳转到应用宝页面，直接进行下载APP或者唤起APP的操作（具体是下载或者拉端是根据手机上有没有APP自动识别的）

IOS特有方法

这个也是本人根据B站分享页的方法试验出来的一套方法

最开始的时候，在QQ环境下，用的是location.href跳转deeplink进行实验，发现没有任何效果，页面也没有任何提示。

后来知道了有应用宝链接了以后，也确实对QQ的拉端功能没有做进一步的研究，直到后来偶然的机会用B站做了一次分享以后，本人发现在IOS环境下B站的分享在点击播放按钮拉端的时候没有进行跳转应用宝页面的操作，而是直接在当前页面出现弹窗进行跳转，所以再一次对QQ的拉端进行了研究。

再一次尝试用location.href还是不行，这一次我将目光转移到iFrame标签，在尝试了以后发现还是不行，页面没有任何反应。

最后，我才想起来我一直遗忘的方法 ------ a标签跳转deeplink拉端

在a标签的src属相上添加我们的deeplink，通过js直接使用click点击也实现QQ上的拉端。当然Android还是不行

默认浏览器

默认浏览器是没有限制的拉端环境。

不用多说，直接location.href直接跳转deeplink即可。

小结

这篇文章是本人的第一篇文章，如果有哪里写错了，或者有写的不全面的地方希望各位大佬在评论区里明示，请多多指教