zoukankan      html  css  js  c++  java
  • 微信扫描下载提示以及js判断用户手机系统

            今天抽空也写一下这个教程吧,这里面涉及到就是一个APP的页面下载。公司有这个需求,让做一个页面,就是二维码扫描下载。一开始我做的版本是只能是通过浏览器来下载的,但是实际应用中,很多用户,只知道微信有个扫一扫,但是微信扫一扫也很抠门,扫到了网址,他不会自动打开浏览器来浏览,而是通过他自身的浏览器来浏览,但是他自身的浏览器又不能自动下载或者跳转一些操作,所以,用户体验非常不友好。后来网上找了一些相关的文章,在:http://caibaojian.com/weixin-tip.html  发现了这个提示插件,我综合整理了一下代码,目前应用情况是:
    1、通过UC等浏览器扫描二维码浏览时,会根据获取到的用户手机系统(Android或者IOS)来跳转或者下载不同的文件;
    2、如果是通过微信扫一扫,将会打开下面这个图片的样式,然后再根据提示打开浏览器,完成相应的操作。
     

        效果图和代码如下,图片见附件:

     
        浏览地址(你们可以打开这个网址,扫描上面的二维码来体验一下):http://www.yadacloud.com/login.html 
        上面这个网址,通过jQuery的二维码插件,转换成下面这个二维码:
        扫描这个二维码就会发生下面的事情了。
        效果图:

    <!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title>云平台APP下载</title>
            <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <script language="javascript">
                window.onload function() {
                    var navigator.userAgent;
                    if (u.indexOf('Android'> -|| u.indexOf('Linux'> -1) { //安卓手机
                        //                    alert("安卓手机");
                        window.location.href "http://www.yadacloud.com/app/cloud.apk";
                    } else if (u.indexOf('iPhone'> -1) { //苹果手机
                        //                    alert("苹果手机");
                        window.location.href "https://itunes.apple.com/us/app/ya-da-yun/id1072053485?l=zh&ls=1&mt=8";
                    } else if (u.indexOf('Windows Phone'> -1) { //winphone手机
                        alert("WindowsPhone暂未推出。");
                        // window.location.href = "mobile/index.html";
                    else if (u.indexOf('Windows NT'> -1) { //Windows电脑
                        alert("请用手机浏览器访问。");
                        //                    window.location.href = "https://itunes.apple.com/us/app/ya-da-yun/id1072053485?l=zh&ls=1&mt=8";
                    }
                    //                var vU=JSON.stringify(u);
                    //                alert(vU);
                }
                $(window).on("load"function() {
                    var winHeight $(window).height();
     
                    function is_weixin() {
                        var ua navigator.userAgent.toLowerCase();
                        if (ua.match(/MicroMessenger/i== "micromessenger") {
                            return true;
                        } else {
                            return false;
                        }
                    }
                    var isWeixin is_weixin();
                    if (isWeixin) {
                        $(".weixin-tip").css("height", winHeight);
                        $(".weixin-tip").show();
                    }
                })
            </script>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                
                a {
                    text-decoration: none;
                }
                
                img {
                    max-width: 100%;
                    height: auto;
                }
                
                .weixin-tip {
                    display: none;
                    position: fixed;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.8);
                    filter: alpha(opacity=80);
                    height: 100%;
                    width: 100%;
                    z-index: 100;
                }
                
                .weixin-tip p {
                    text-align: center;
                    margin-top: 10%;
                    padding: 0 5%;
                }
            </style>
        </head>
     
        <body>
            <div class="weixin-tip">
                <p>
                    <img src="img/live_weixin.png" alt="微信打开" />
                </p>
            </div>
        </body>
     
    </html>  
     
     
    好了,本次教程到此结束,转载请保留原作者地址以及姓名;
     
    我新建一个QQ群,如果有问题,可以在群里提。如果合适,也会根据大家提的比较多的问题,来写篇博文,帮助更多的人,群号:275523437
    点击链接加入群【.Net,MVC,EasyUI,MUI,Html,JS】:http://jq.qq.com/?_wv=1027&k=2A0RbLd
     
    (如果有私活,或者一起合作的,也可以私信找我呀,嘿嘿);
     
     
    作者:南宫萧尘  
    E-mail:314791147@qq.com
    日期:2016-04-03

    附件列表

  • 相关阅读:
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Python eval() 函数
    Python repr() 函数
  • 原文地址:https://www.cnblogs.com/nangong/p/31f1d79be8b6e91c2f20a51dde8ba271.html
Copyright © 2011-2022 走看看