今天抽空也写一下这个教程吧，这里面涉及到就是一个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 u = navigator.userAgent;
                ) { //安卓手机
                    //                    alert("安卓手机");
                    window.location.href = "http://www.yadacloud.com/app/cloud.apk";
                } ) { //苹果手机
                    //                    alert("苹果手机");
                    window.location.href = "https://itunes.apple.com/us/app/ya-da-yun/id1072053485?l=zh&ls=1&mt=8";
                } ) { //winphone手机
                    alert("WindowsPhone暂未推出。");
                    // window.location.href = "mobile/index.html";
                ) { //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">
            * {
                ;
                ;
            }
            
            a {
                text-decoration: none;
            }
            
            img {
                max-width: 100%;
                height: auto;
            }
            
            .weixin-tip {
                display: none;
                position: fixed;
                ;
                ;
                ;
                background: rgba(0, 0, 0, 0.8);
                filter: alpha(opacity=80);
                height: 100%;
                width: 100%;
                ;
            }
            
            .weixin-tip p {
                text-align: center;
                margin-top: 10%;
                 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

附件列表

微信扫描下载提示以及js判断用户手机系统的更多相关文章

  1. JS判断用户手机是IOS还是Android

    $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(' ...

  2. js判断用户是客户端还是移动端

    js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种   1.第一种: function IsPC() { ...

  3. js判断是手机还是电脑访问网站

    js判断是手机还是电脑访问网站                               <script type="text/javascript"> <!- ...

  4. js判断用户的浏览器设备是移动端还是pc端

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  5. js判断用户是在PC端或移动端访问

    js如何判断用户是在PC端和还是移动端访问.  最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...

  6. js判断用户是否正在滚动滚动条，滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

  7. [开发笔记]-js判断用户的浏览设备是移动设备还是PC

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  8. 用JS判断用户使用的是手机端还是pc端访问

    最近项目中用到一个应用,当访问同一个网站地址的时候,例如:www.xxx.com的时候,如果当前客户端是pc则跳转到专注于pc的部分,如果当前客户机是手机,则跳转到专注于手机的部分,秉承一贯的习惯,b ...

  9. js判断用户是否离开当前页面

    简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...

随机推荐

  1. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  2. Windows server 2012 添加中文语言包(英文转为中文)（离线）

    Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...

  3. 对Castle Windsor的Resolve方法的解析时new对象的探讨

    依赖注入框架Castle Windsor从容器里解析一个实例时(也就是调用Resolve方法),是通过调用待解析对象的构造函数new一个对象并返回,那么问题是:它是调用哪个构造函数呢? 无参的构造函数 ...

  4. 探索ASP.NET MVC5系列之~~~5.缓存篇（页面缓存+二级缓存）

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  5. 使用Git Bash远程添加分支和简单部署你的静态页面

    新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...

  6. npm源切换

    版权声明:欢迎转载,请附加转载来源:一路博客(http://www.16boke.com)   目录(?)[+] 安装 使用 列出可选的源 切换 增加源 删除源 测试速度 许可 项目主页   我们介绍 ...

  7. (转)从0开始搭建SQL Server AlwaysOn 第二篇（配置故障转移集群）

    原文地址:  http://www.cnblogs.com/lyhabc/p/4682028.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集 ...

  8. BZOJ 1391: [Ceoi2008]order [最小割]

    1391: [Ceoi2008]order Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1509  Solved: 460[Submit][Statu ...

  9. .NET跨平台：在CentOS上编译dnx并运行ASP.NET 5示例程序

    在之前的博文中我们在 Ubuntu 上成功编译出了 dnx ,并且用它成功运行了 ASP.NET 5 示例程序.在这篇博文中我们将 Ubuntu 换成 CentOS. 目前 dnx 的编译需要用到 m ...

  10. DotNet Run 命令介绍

    前言 本篇主要介绍 asp.net core 中,使用 dotnet tools 运行 dotnet run 之后的系统执行过程. 如果你觉得对你有帮助的话,不妨点个[推荐]. 目录 dotnet r ...