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

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

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

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

标注&＃xff1a;感谢王铁手童靴帮忙指出问题。

双方协议

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

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

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

判断客户端

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

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

现在就大功告成啦&＃xff01;~

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

区分手机系统

获取浏览器的报文&＃xff0c;查看navigator.userAgent里面的参数。比较详细的判断如下&＃xff1a;&＃xff08;这个是我在网上查找的&＃xff0c;大家觉得少可以补充&＃xff09;

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

如下是我自己的判断&＃xff1a;

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

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

代码整合

总结

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

我的代码如下&＃xff1a;

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

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