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

2019-01-28  本文已影响0人  前端葱叶

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

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

我们需要知道的是:

让我们简单了解一下什么是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的功能

参考代码(开头提到的需求):
思路:


var app_links = "应用宝跳转链接(同事提供)",
    url_scheme = "app的url scheme协议(同事提供)",
// app link
function deeplink() {
    if (/MicroMessenger/i.test(navigator.userAgent)) {
        window.location.href = app_links;
    } else {
        window.location.href = url_scheme;
        var ifr = document.createElement("iframe");
        ifr.src = url_scheme;
        ifr.style.display = "none"
        document.body.appendChild(ifr);
        window.setTimeout(function () {
            document.body.removeChild(ifr);
            if (!document.hidden) {
                window.location.href = app_links;
            }
        }, 2000)
    }
}

//调用方法
//js调用
//var open_btn = //document.getElementById("open_btn");
//open_btn.onclick = function () {
//            deeplink();
  //      };
//jQuery调用
$(document).ready(function () {
    $('#open-btn').on('click', function () {
        deeplink();
    });
})

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

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

上一篇 下一篇

猜你喜欢

热点阅读