今天抽空也写一下这个教程吧，这里面涉及到就是一个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. 火焰图分析openresty性能瓶颈

    注:本文操作基于CentOS 系统 准备工作 用wget从https://sourceware.org/systemtap/ftp/releases/下载最新版的systemtap.tar.gz压缩包 ...

  2. Spark RDD 核心总结

    摘要: 1.RDD的五大属性 1.1 partitions(分区) 1.2 partitioner(分区方法) 1.3 dependencies(依赖关系) 1.4 compute(获取分区迭代列表) ...

  3. android studio你可能忽视的细节——启动白屏？drawable和mipmap出现的意义？这里都有！！！

    android studio用了很久了,也不知道各位小伙伴有没有还在用eclipse的,如果还有,楼主真心推荐转到android studio来吧,毕竟亲儿子,你会知道除了启动速度稍微慢些,你找不到一 ...

  4. Node.js入门

    开始之前,安利一本正在看的书<站在两个世界的边缘>,作者程浩,上帝丢给他太多理想,却忘了给他完成理想的时间.OK,有兴趣的可以看一看. node.js如标题一样,我也是刚开始接触,大家一起 ...

  5. JDK安装与配置

    JDK安装与配置 一.下载 JDK是ORACLE提供免费下载使用的,官网地址:https://www.oracle.com/index.html 一般选择Java SE版本即可,企业版的选择Java ...

  6. Android开发学习——动画

    帧动画> 一张张图片不断的切换,形成动画效果* 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长              ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. Configure a bridged network interface for KVM using RHEL 5.4 or later?

    environment Red Hat Enterprise Linux 5.4 or later Red Hat Enterprise Linux 6.0 or later KVM virtual ...

  9. echo命令

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法echo命令的功能是在显示器上显示一段文字,一般起到一个提示的 ...

  10. Windows更新清理工具 (winsxs 清理工具)

    Windows 更新清理工具是一款效果非常显著的Windows7.Windows8操作系统清理优化工具!经常安装系统的朋友相比有所体会,刚刚安装完成的Win7.Win8其实占的空间并不大,去掉页面文件 ...