H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信
前言:
h5分享到微信,h5使用微信支付这些功能,都需要先判断是否安装微信客户端,如果已安装就启动微信,如果没有安装微信,就提示用户前去安装。
我们可以通过访问微信提供的URL协议(weixin://)来实现这个功能,代码如下:
示例代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 6 <title>判断手机是否安装微信</title> 7 </head> 8 <body> 9 <a href="javascript:testApp('weixin://')" class="dl-btn" id="download">打开微信</a> 10 <script> 11 function testApp(url) { 12 var timeout, t = 1000, hasApp = true; 13 setTimeout(function () { 14 if (!hasApp) { 15 //没有安装微信 16 var r=confirm("您没有安装微信,请先安装微信!"); 17 if (r==true){ 18 location.href="http://weixin.qq.com/" 19 } 20 }else{ 21 //安装微信 22 } 23 document.body.removeChild(ifr); 24 }, 2000) 25 26 var t1 = Date.now(); 27 var ifr = document.createElement("iframe"); 28 ifr.setAttribute('src', url); 29 ifr.setAttribute('style', 'display:none'); 30 document.body.appendChild(ifr); 31 timeout = setTimeout(function () { 32 var t2 = Date.now(); 33 if (!t1 || t2 - t1 < t + 100) { 34 hasApp = false; 35 } 36 }, t); 37 } 38 //判断访问终端 39 var browser={ 40 versions:function(){ 41 var u = navigator.userAgent, app = navigator.appVersion; 42 return { 43 trident: u.indexOf('Trident') > -1, //IE内核 44 presto: u.indexOf('Presto') > -1, //opera内核 45 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 46 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核 47 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 48 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 49 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 50 iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器 51 iPad: u.indexOf('iPad') > -1, //是否iPad 52 webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部 53 weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增) 54 qq: u.match(/\sQQ/i) == " qq" //是否QQ 55 }; 56 }(), 57 language:(navigator.browserLanguage || navigator.language).toLowerCase() 58 } 59 </script> 60 </body> 61 </html>
扩展:
同样,通过上边的方法,也可以判断是否安装第三方app,前提是第三方app必须提供相应的URL协议,具体参考:H5外部浏览器直接调起App