H5判断是否安装微信及启动微信

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

前言:

h5分享到微信,微信支付这些功能,都需要先判断是否安装微信,已安装就启动微信,没有安装就提示安装。

可以通过微信提供的URL协议(weixin://)来实现这个功能,代码如下:

示例代码:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>判断手机是否安装微信</title>
    </head>
    <body>
    <a href="javascript:testApp('weixin://')" class="dl-btn" id="download">打开微信</a>
    <script>
    function testApp(url) {
          var timeout, t = 1000, hasApp = true;
          setTimeout(function () {
            if (!hasApp) {
                //没有安装微信
                var r=confirm("您没有安装微信,请先安装微信!");
                if (r==true){
                    location.href="http://weixin.qq.com/"
                }
            }else{
                //安装微信
            }
            document.body.removeChild(ifr);
          }, 2000)

          var t1 = Date.now();
          var ifr = document.createElement("iframe");
          ifr.setAttribute('src', url);
          ifr.setAttribute('style', 'display:none');
          document.body.appendChild(ifr);
          timeout = setTimeout(function () {
             var t2 = Date.now();
             if (!t1 || t2 - t1 < t + 100) {
               hasApp = false;
             }
          }, t);
        }
    </script>
    </body>
</html>


扩展:  

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


后记:  

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

评论