移动端判断用户是否安装客户端

wwolf 发布于2019-08-29 11:12 / 1614人阅读

摘要：用手机浏览器，就可以打开微信客户端，前提是你需要安装微信客户端。因为既可以判断用户是否安装客户端，也可以停留在当前页面。

因为看到很多人在问关于页面怎么查询用户安装了什么软件，并且调用它，我有可能说的也不是很正确，希望读者多多指教。

如下是我自己在项目中的解决方案和思路。

ios无法用这段判断，至于原因，还没有查明，安卓可以用。（查找到一种解决ios无法调开客户端的方案，但是有点治标不治本，希望大牛可以指导一下。我已经在最下面追加上了。）

标注：感谢王铁手童靴帮忙指出问题。

双方协议

这个需要提前跟客户端开发人员商定协议名称，用URI Scheme作为页面与客户端的通讯协议（这个很重要）。这里的URI Scheme前缀不是一般的http://，而是由客户端开发者定义的，一般在写程序的时候就会设置的了。然后剩下的部分就像普通的 URL 地址一样，需要大家来约定 URI Scheme 具体如何，例如参数是什么等等。

好比微信客户端的是以 weixin:// 为前缀：打开微信客户端。用手机浏览器，就可以打开微信客户端，前提是你需要安装微信客户端。

现在已经可以调用到客户端了，但是咱们好像拉了一个问题，如果用户没有需要调开的客户端怎么办，总不能让用户傻傻的在当前页面等待，那么咱们就需要做一个判断，来判断用户是否有此软件。

判断客户端

现在大体的思路有了，咱们现在需要明确的是，怎么做到判断是否有软件并且怎么下载。

这里我是通过一个隐藏的iframe做到的。因为iframe既可以判断用户是否安装客户端，也可以停留在当前页面。
具体代码如下：

document.getElementById("openApp").onclick = function(e) {
        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
        // 否则打开a标签的href链接
        var ifrSrc = "weixin://";
        if (!ifrSrc) {
            return;
        }
        var ifr = document.createElement("iframe");
        ifr.src = ifrSrc;
        ifr.style.display = "none";
        document.body.appendChild(ifr);
        setTimeout(function() {
            document.body.removeChild(ifr);
        }, 1000);

    };
    if (document.all) {
        document.getElementById("openApp").click();
    }
    // 其它浏览器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById("openApp").dispatchEvent(e);
    }

现在就大功告成啦！~

不对还有一个问题，如果是在微信端打开的页面怎么办呢？微信禁止除应用宝以外的下载链接，如果是这样的话咱们还需要一个引导图，来引导用户怎么在微信端打开浏览器，并且针对这个问题又延伸出另外一个问题，就是安卓版和苹果版界面不一样，真坑，这样又要区分系统，好吧，接着搞。

区分手机系统

获取浏览器的报文，查看navigator.userAgent里面的参数。比较详细的判断如下：（这个是我在网上查找的，大家觉得少可以补充）

原文链接：http://caibaojian.com/browser-ios-or-android.html
trident: u.indexOf("Trident") > -1, //IE内核 
presto: u.indexOf("Presto") > -1, //opera内核 
webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核 
gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1,//火狐内核 
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
android: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, //android终端 
iPhone: u.indexOf("iPhone") > -1 , //是否为iPhone或者QQHD浏览器 
iPad: u.indexOf("iPad") > -1, //是否iPad 
webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部 
weixin: u.indexOf("MicroMessenger") > -1, //是否微信 （2015-01-22新增） 
qq: u.match(/sQQ/i) == " qq" //是否QQ

如下是我自己的判断：

var pattern = new RegExp(/iPad|iPod|iPhone/i);
var iosUserAgent = pattern.test(navigator.userAgent);
if(iosUserAgent){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        //你用的是IOS的微信客户端
    }else{
        //你用的是IOS客户端
    }
}else if(navigator.userAgent.match(/Android/i)) {
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        //你用的是安卓的微信客户端
    }else{    
        //你用的是安卓客户端
    }
}
else {
    //其他、widows phone、pc等以外的任何系统，我比较喜欢简单粗暴。
}

这个判断也搞定了，现在需要的就是把代码整合在一起。

代码整合

总结

忘了补充一点，也可以做一个判断，判断当前页是否在客户端调开，navigator.userAgent.toLowerCase()判断里面是否有跟客户端开发人员拟定的协议和参数。

我的代码如下：

// 判断是不是客户端  
// weixin只是做一个代表，自己开发的时候，需要把它变成你和客户端开发人员拟定的参数。
function isClient() {
    var isClient = false;
    var ua = navigator.userAgent.toLowerCase();
    if ((ua.indexOf("weixin")) != -1) {
        isClient = true;
    }
    return isClient;
}

最后，希望读者指教，我自己说的也不见得全对，有可能有更加优化的方案，思维的碰撞才能让技术提成。

追加

针对ios不起作用我进行了如下修改。
我修改了html中a标签的链接，从原来的空链接直接修改为客户端在AppStore中的链接地址。
拿百度贴吧举例：https://itunes.apple.com/cn/a...

原来的方法不改变，这样就可以在ios上调开百度贴吧了。

专线服务超融合服务器 asp判断是否手机端 js判断移动端 php判断移动端访问判断是否

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111494.html

移动端判断用户是否安装客户端

摘要：用手机浏览器，就可以打开微信客户端，前提是你需要安装微信客户端。因为既可以判断用户是否安装客户端，也可以停留在当前页面。因为看到很多人在问关于页面怎么查询用户安装了什么软件，并且调用它，我有可能说的也不是很正确，希望读者多多指教。如下是我自己在项目中的解决方案和思路。 ios无法用这段判断，至于原因，还没有查明，安卓可以用。（查找到一种解决ios无法调开客户端的方案，但是有点治标...

K_B_Z 2019-08-05 10:05 评论0 收藏0
移动端判断用户是否安装客户端

摘要：用手机浏览器，就可以打开微信客户端，前提是你需要安装微信客户端。因为既可以判断用户是否安装客户端，也可以停留在当前页面。因为看到很多人在问关于页面怎么查询用户安装了什么软件，并且调用它，我有可能说的也不是很正确，希望读者多多指教。如下是我自己在项目中的解决方案和思路。 ios无法用这段判断，至于原因，还没有查明，安卓可以用。（查找到一种解决ios无法调开客户端的方案，但是有点治标...

EsgynChina 2019-08-01 15:39 评论0 收藏0
移动端判断用户是否安装客户端

摘要：用手机浏览器，就可以打开微信客户端，前提是你需要安装微信客户端。因为既可以判断用户是否安装客户端，也可以停留在当前页面。因为看到很多人在问关于页面怎么查询用户安装了什么软件，并且调用它，我有可能说的也不是很正确，希望读者多多指教。如下是我自己在项目中的解决方案和思路。 ios无法用这段判断，至于原因，还没有查明，安卓可以用。（查找到一种解决ios无法调开客户端的方案，但是有点治标...

FrozenMap 2019-08-20 10:36 评论0 收藏0
基于御安全APK加固的游戏反外挂方案

摘要：就是在这种情况下，御安全加固平台推出了一种方便，高效以及成本低的基于加固的反外挂方法，来保护好手游免受外挂软件的侵扰。御安全加固技术主要功能文件保护。御安全加固后的，一旦发现玩家或者攻击者有加速或者减速游戏的行为，将自动终止运行。一、前言随着移动互联网的兴起，移动游戏市场近几年突然爆发，收入规模快速增长。根据第三方数据统计，国内移动游戏2015年市场规模已达514.6亿。由于...

王晗 2019-06-25 10:49 评论0 收藏0
《阿里聚安全2016年报》

摘要：每天新增近个新移动病毒样本，每秒生成个阿里聚安全移动病毒样本库年新增病毒样本达个，平均每天新增个样本，这相当于每秒生成一个病毒样本。阿里聚安全的人机识别系统，接口调用是亿级别，而误识别的数量只有个位数。《阿里聚安全2016年报》发布，本报告重点聚焦在2016年阿里聚安全所关注的移动安全及数据风控上呈现出来的安全风险，在移动安全方面重点分析了病毒、仿冒、漏洞三部分，帮助用户了解业务安全...

2json 2019-06-21 16:34 评论0 收藏0