判断移动端是否安装某个app

最近在项目中遇到一个需求：

从app内部分享出去的网页顶部有一个“打开”按钮，用户点击后：
1、若用户客户端安装我们的app，直接跳转到我们的app;
2、若用户没有安装，跳转到应用宝提示用户下载；

我们需要知道的是：

我们并不能通过浏览器来判断用户手机是否安装某个app；
但是我们可以通过JS设置一个定时器试着唤醒手机端的某个app的本地协议（url scheme）如果能解析这个协议那么就能直接打开app，如果唤醒超时则跳转到应用宝下载页；
微信内置浏览器已禁止使用外部url scheme直接跳转至其他app；

让我们简单了解一下什么是url scheme？

url scheme：
1、简单来说就是一个让app相互之间跳转的协议。
2、每一个app的url scheme是不一样的，例如微信的scheme协议：weixin://。
3、如果两个app拥有相同的url scheme，那么后安装的app会把之前安装的app的url scheme覆盖掉；
4、一般url scheme是有服务端的同事提供，我们只要复制上去就可以了；
5、我们的app需要使用支付宝的三方支付功能、app需要使用微信分享好的文章，那么此时就可以通过URL Scheme来传递这些数据到支付宝app或者微信app系统会通过这些app的url scheme来调起这些app，完成你所需要做的跨app的功能

参考代码（开头提到的需求）：
思路：

我们需要考虑微信端和非微信端的调起情况；
可以新建一个iframe，iframe的src指向app的scheme协议，然后把iframe操作在DOM上。
(可以网上自行查找常用的url scheme进行demo)

//跳转方法
 function deeplink() {
           //微信端打开
            if (/MicroMessenger/i.test(navigator.userAgent)) {
                window.location.href =
                    "应用宝跳转链接（同事提供）";
            } else {
          //非微信端打开
                window.location.href =
                    "app的url scheme协议（同事提供）";
                var ifr = document.createElement("iframe");
                ifr.src = "app的url scheme协议（同事提供）";
                ifr.style.display = "none";
                document.body.appendChild(ifr);
                window.setTimeout(function () {
                    document.body.removeChild(ifr);
                    if (!document.hidden) {
                        window.location.href =
                            "应用宝跳转链接（同事提供）";
                    }
                }, 2000)
            }
        }
//调用方法
var open_btn = document.getElementById("open_btn");
open_btn.onclick = function () {
            deeplink();
        };

补充需求：
有些项目还需要给分享之后的链接拼接一个动态的time时间戳：

可先获取当前的时间戳var time = new Date().getTime();
然后拼接到app协议的后边：如：abc://xxxxxxx"+'&time='+time;

项目踩坑记录，会不断完善，如果有错误的地方，可以指出，共同进步。

判断移动端是否安装某个app

猜你喜欢