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     </script>
39     </body>
40 </html>

扩展:

同样,通过上边的方法,也可以判断是否安装第三方app,前提是第三方app必须提供相应的URL协议,具体参考:H5外部浏览器直接调起App

后记:

看到有博友评论,贴了一百多行php前端后端的代码,所以也就重新整理了下这篇文章。使用本文方法,关键代码也就那么二十几行,大部分浏览器都是能正常调起微信的,一般来说这已经足够了。实在是不太明白为什么前端用js就能解决的问题还要搞一大堆php前端后端管理后台的东西,作为一个前端开发来说,实现一个功能自然是代码越精简越好,前端能实现的就尽量不要劳烦后端,h5能搞定的,就无需用什么php。

posted on 2017-06-29 16:58 逍遥云天 阅读(...) 评论(...) 编辑 收藏

导航

统计