今天抽空也写一下这个教程吧，这里面涉及到就是一个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. Spring基于AOP的事务管理

                                  Spring基于AOP的事务管理 事务 事务是一系列动作,这一系列动作综合在一起组成一个完整的工作单元,如果有任何一个动作执行失败,那么事务 ...

  2. Android数据存储之Android 6.0运行时权限下文件存储的思考

    前言: 在我们做App开发的过程中基本上都会用到文件存储,所以文件存储对于我们来说是相当熟悉了,不过自从Android 6.0发布之后,基于运行时权限机制访问外置sdcard是需要动态申请权限,所以以 ...

  3. SQL Server-聚焦计算列或计算列持久化查询性能（二十二）

    前言 上一节我们详细讲解了计算列以及计算列持久化的问题,本节我们依然如前面讲解来看看二者查询性能问题,简短的内容,深入的理解,Always to review the basics. 持久化计算列比非 ...

  4. UWP开发之Template10实践二：拍照功能你合理使用了吗？（TempState临时目录问题）

    最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVV ...

  5. WebApi基于Token和签名的验证

    最近一段时间在学习WebApi,涉及到验证部分的一些知识觉得自己并不是太懂,所以来博客园看了几篇博文,发现一篇讲的特别好的,读了几遍茅塞顿开(都闪开,我要装逼了),刚开始读有些地方不理解,所以想了很久 ...

  6. dedecms 后台栏目添加图片

    前台调用栏目时需要显示图标,整理一下: 第一步:“系统->SQL命令工具” , 插入sql语句 alter table dede_arctype add typeimg varchar() 第二 ...

  7. 云计算下PAAS的解析一

    云计算下PAAS的解析一       PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...

  8. Android Studio快捷键

      一.android studio 默认快捷键 刚开始接触一款开发软件,想必很想了解它的快捷方式,这会对你的编程起到很好的帮助,提高工作效率,接下来给你介绍下Android Studio一些常用的快 ...

  9. FineReport如何用JDBC连接阿里云ADS数据库

    在使用FineReport连接阿里云的ADS(AnalyticDB)数据库,很多时候在测试连接时就失败了.此时,该如何连接ADS数据库呢? 我们只需要手动将连接ads数据库需要使用到的jar放置到%F ...

  10. 1199 Problem B: 大小关系

    求有限集传递闭包的 Floyd Warshall 算法(矩阵实现) 其实就三重循环.zzuoj 1199 题 链接 http://acm.zzu.edu.cn:8000/problem.php?id= ...