移动端：浏览器调起APP需求开发总结之前的逻辑是用户将活动分享到微信之后，其他点开分享的人在微信中完成余下操作，现在需要

最近接到一个需求，需要在手机浏览器中调起APP

之前的逻辑是用户将活动分享到微信之后，其他点开分享的人在微信中完成余下操作，现在需要做一个从微信到APP的引流。这个需求的原理很简单，重定向到APP的自定义链接即可，自定义链接直接找APP的同事们要就行，需要什么参数就按照他们制定的规则传就可以。

在实现的过程中遇到了很多问题，总结如下：

如果没有合作，微信内置浏览器是不能直接调起APP的，查了很多资料，都说微信内置浏览器屏蔽了自定义链接，如果某APP跟微信有合作的话就可以直接调起；

浏览器无法获取该手机有没有安装某APP，也无法获取浏览器有没有成功调起APP

有的手机调起APP会弹窗，询问“是否在某APP中打开链接”，而有的手机不会，甚至同一手机的不同浏览器都不一样

针对IOS手机，在用户没有安装APP时需要跳转到App Store，这个跳转有的手机会弹，而有的是直接跳转

第一个问题是这个需求还没成型的时候我自己考虑到的，好在产品经理之前也做过调研，第一个问题在一开始提需求的时候就没有过多的纠结，所以刚开始制定的流程就是：

用户在微信打开链接 -> 判断登录 -> 登录后弹出引导图，让用户在浏览器打开此网页 -> 在浏览器内跳转或下载APP

这个流程是我简化过的，真正的流程和交互效果我自己研究了很久(捂脸)。

接下来说一下上面2、3、4问题的解决办法：

问题2：既然无法知道用户有没有安装APP，那就调起和下载都做：

window.location.href = '...'; // 自定义协议以及参数
setTimeout(() => {
    ...
    // 调起下载的代码
 }, 1000);

这样在用户的角度就是有APP就直接跳转了，一秒之后的下载也就不用管了，而没下载APP的用户会在一秒延迟之后弹出下载，用这样的方式来弥补这个问题。

但是这样有的手机会有不太好的交互效果：

假设用户装了APP，调起APP时会先弹出“是否在APP中打开链接”，如果用户没有点，那么这个页面又会弹出“是否下载apk文件”，两个弹窗会重叠，这就是问题3，而在iPhone上弹窗倒是不会重叠，但是会有的机型会跳转APP，然后突然又跳转到App Store的情况，这就是问题4

针对问题3和问题4，我跟产品经理商量出的最好的解决办法就是，把调起APP的逻辑和下载的逻辑分开：在页面中调起APP，一秒延迟之后跳转到下载页，在下载页点击下载时直接下载或去App Store，那么代码就变成了：

window.location.href = '...'; // 自定义协议以及参数
setTimeout(() => {
    ...
    // 跳转下载页
 }, 1000);

下载页的click事件：

const u = navigator.userAgent.toLowerCase(); // 获取浏览器对象
const isApple = /(iphone|ipad|ipod|ios)/i.test(u); // 判断是否是IOS系统
const isAndroid = /android/i.test(u); // 判断是否是安卓系统
if (isApple) {
    window.location.href = '...'; // IOS下载链接
} else if (isAndroid) {
    window.location.href = '...'; // 安卓下载链接
}