用js唤起微信、QQ、微博、Safari中的App

背景

最近在微信、QQ、微博用js唤起App。我之前也做过类似的功能，但是比较粗糙，情况也不完整。而且那是很久以前的事了，很多技术都已经过时了。现在有更好的体验和更好的功能的唤起技术。以前的许多计划现在都变得没有必要了。现在，我将通过这篇文章与您分享一个全面和最新的唤起计划。我希望如此

目标

用户单击打开应用程序或下载按钮(该按钮可能位于下载门户页面和各种共享页面的顶部或底部横幅上)。如果用户已经安装了App，会根据业务跳转到对应的Native页面；如果用户没有安装应用，请跳到应用商店或应用市场下载我们的应用。

一个完整的过程

首先，所有的下载/召回条目都是直接跳转，应该是这样的：

a href=' https://applink-party.mtime.cn/mtlf'下载/a或类似这样：

window . location . href=' https://applink-party.mtime.cn/mtlf'所有的商业判断都是在mtlf中做出的，这有两个好处：

多个服务共享的代码。在一个团队中，每个人的业务可能都有一个横幅下载。没有比定位更简单的方法来调用url了。你可以用万能链接来简单说说万能链接。

iOS9之前唤醒方式和现在安卓一样，都是用方案来唤醒。这个方法有一个小问题，每次唤起都会给出一个提示：是否打开xx应用，让用户在体验上多操作了一步。Universal link会直接跳转而不会停在页面上，前提是在我们项目的根目录下添加一个apple-app-site-association . JSON文件，其内容大致如下：

然后，重新配置iOS的App后台，就可以实现直接唤醒了！

各平台微信、微博、QQ、Safari的招魂方案

经过长时间的实验，我们总结了这个解决方案，在各种情况下唤起成功/失败，接下来我们将一一讲述。

微信

微信是最重要的分享渠道，但我们能做的不多。之前iOS下的微信支持万能链接，但是从2018年1月8日开始，微信就屏蔽了这个！不管微信是基于什么原因，我们只能适应iOS下最便捷的唤醒方式。所以，现在不管是iOS还是Andriod，我们都用同样的方式处理：我们都直接跳到应用宝藏。IOS AppStore会引导你找到AppStore，而Andriod AppStore会直接打开App(前提是你已经下载了)。注意：微信也屏蔽了itunes链接，所以没有办法直接跳转到app store，所以只能和app store搭建这个桥梁。

微博

目前微博还支持万能链接唤醒，我们只需要考虑不下载的情况。

在iOS下，微博不支持打开应用宝的链接，所以我们需要引导用户使用Safari打开，就像这样：

Andriod平台下，使用方案不能调用App，但有特殊情况，也是方案，可以通过成人评论和网易云音乐调用，有空可以自己试试。因此我们可以推断，安卓平台下的微博也有类似微信的白名单，白名单中的人可以通过方案调用，就像微信调用JD.COM，JD.COM在微信中通过方案调用。

所以，无论是iOS还是Andriod，我们的解决方案都是直接引导用户使用本地浏览器打开。

在QQ iOS平台下，QQ依然支持万能链接唤醒。如果没有安装，QQ也支持直接打开itunes链接。与其他应用相比，QQ支持最好。在Andriod平台下，QQ也支持方案招引，但在一些老机型下，QQ会有一定的招引失败概率。具体现象是：第一次打开页面唤起失败，再次打开页面唤起成功。根据这个现象，我们可以推测，在QQ的webview中，会对方案的招魂模式施加一些加载时间限制。经过测试，大约是500 ms，过了这个时间值，招魂就会失败。为什么第二次开篇唤起成功的概率很高？因为第一次加载时文件已经缓存，第二次打开直接加载，所以时间在限制内。旅行队

Safari是一个简单的案例，它支持万能链接，也支持打开itunes，所以直接点，如图处理就可以了。

在iOS9中踩坑，Safari不支持直接跳到itunes等等。在这种情况下，它需要兼容。可以直接跳转到应用宝，看看招魂是否成功。你需要自己计算时间，因为如果招魂成功，setInterval时间会变慢。经过我的测试，这个方法不再使用。你只需要使用document . hidden | | document . webkithidden，在判断是否是Safari浏览器时，一般会判断UA中是否有这个字符串。经过测试，发现安卓的UA中也包含字符串Safari(如下图UA所示)，所以需要加上操作系统关于Scheme唤醒的判断。之前有很多方案，比如：使用iframe，用标签点击，window.location.经过测试，只有点击标签的兼容性最好，代码大概如下：

关于测试

两个平台，这么多案例，要不要一个一个测试？当然，我们需要一个一个的验证，但是在开发过程中，没有必要换一条线。在手机上测试效率太低了，尤其是选择安卓4.4手机，绝对可以磨练你的耐心。为了提高效率，我将我常用的UAs分享给大家，这样你就可以在Chrome模拟器中通过配置进行本地调试。常用的无人机如下：

IOS-微信

Mozilla/5.0(iPhone；CPU iPhone OS 11_2_2喜欢Mac OS X)apple WebKit/604 . 4 . 7(KHTML，喜欢Gecko)Mobile/15c 202 MicroMessenger/6 . 6 . 1 netype/WIFI Language/zh _ CNiOS-QQ

Mozilla/5.0(iPhone；CPU iPhone OS 11_2_2喜欢Mac OS X)Apple WebKit/604 . 4 . 7(KHTML，喜欢Gecko)Mobile/15c 202 QQ/7 . 3 . 5 . 473 v1 _ IPH _ SQ _ 7 . 3 . 5 _ 1 _ APP _ APixel/1125 core/UIWebView Device/Apple(iPhone X)NetType/WiFi qwebview type/1IOS-Weibo

Mozilla/5.0(iPhone；CPU iPhone OS 11_2_2喜欢Mac OS X)apple WebKit/604 . 4 . 7(KHTML，喜欢Gecko)Mobile/15c 202 Weibo(iPhone 10，3 _ _ Weibo _ _ 8 . 1 . 0 _ _ iPhone _ _ OS 11 . 2 . 2)iOS-safari

Mozilla/5.0(iPhone；Cpu iphone OS 11 _ 2 _ 2喜欢MAC OS x)苹果WebKit/604.4.7 (khtml，喜欢gecko)版本/11.0 mobile/15c 202 safari/604 . 1 andr iod-微信

Mozilla/5.0(Linux；Android 4 . 4 . 2；PE-TL20建造/华威PE-TL20；wv)applebwebkit/537.36(KHTML，像Gecko)版本/4.0 Chrome/57 . 0 . 2987 . 132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6 . 6 . 1 . 1220(0x 26060135)netype/WIFI Language/zh _ CNAndriod-QQ

Mozilla/5.0(Linux；Android 4 . 4 . 2；PE-TL20建造/华威PE-TL20；wv)applebwebkit/537.36(KHTML，Like gecko)版本/4.0 chrome/57 . 0 . 2987 . 132 MQ browser/6.2 TBS/043807 mobile safari/537.36 v1 _ and _ sq _ 7 . 3 . 2 _ 762 _ yyb _ dq/7 . 3 . 2 . 3350

Mozilla/5.0(Linux；Android 4 . 4 . 2；PE-TL20 Build/HuaweiPE-TL20)applebwebkit/537.36(KHTML，Like Gecko)版本/4.0 Chrome/30 . 0 . 0 Mobile Safari/537.36 Weibo(Huawei-PE-TL20 _ _ Weibo _ _ 8 . 0 . 2 _ _ Android _ _ Android 4 . 4 . 2)配置完成后，可以像我一样在电脑上切换环境：