逍遥云天 H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信

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

逍遥云天 H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信

H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信

你可能感兴趣的:(H5)