今天抽空也写一下这个教程吧，这里面涉及到就是一个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. GitHub实战系列汇总篇

    基础: 1.GitHub实战系列~1.环境部署+创建第一个文件 2015-12-9 http://www.cnblogs.com/dunitian/p/5034624.html 2.GitHub实战系 ...

  2. Matlab数值计算示例： 牛顿插值法、LU分解法、拉格朗日插值法、牛顿插值法

    本文源于一次课题作业,部分自己写的,部分借用了网上的demo 牛顿迭代法(1) x=1:0.01:2; y=x.^3-x.^2+sin(x)-1; plot(x,y,'linewidth',2);gr ...

  3. 基于netty http协议栈的轻量级流程控制组件的实现

    今儿个是冬至,所谓“冬大过年”,公司也应景五点钟就放大伙儿回家吃饺子喝羊肉汤了,而我本着极高的职业素养依然坚持留在公司(实则因为没饺子吃没羊肉汤喝,只能呆公司吃食堂……).趁着这一个多小时的时间,想跟 ...

  4. iOS逆向工程之Hopper中的ARM指令

    虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是 ...

  5. 多线程条件通行工具——AbstractQueuedSynchronizer

    本文原创,转载请注明出处! 参考文章: <"JUC锁"03之 公平锁(一)> <"JUC锁"03之 公平锁(二)> AbstractOw ...

  6. .Net Core上也可以使用的二维码组件

    我Fork了QRCoder,并且兼容了.Net Core,图形库用的是ZKWeb.System.Drawing Github: https://github.com/zkweb-framework/Q ...

  7. error C4430：missing type specifier 解决错误

    错误    3    error C4430: missing type specifier - int assumed. Note: C++ does not support default-int ...

  8. Visual Studio 2013 添加一般应用程序(.ashx)文件到SharePoint项目

    默认,在用vs2013开发SharePoint项目时,vs没有提供一般应用程序(.ashx)的项目模板,本文解决此问题. 以管理员身份启动vs2013,创建一个"SharePoint 201 ...

  9. 【SAP业务模式】之ICS（五）：定价配置

    本篇博文讲述ICS业务中的定价配置. 1.定义销售订单类型 目录:SPRO-销售与分销-销售-销售凭证-销售凭证抬头-定义销售凭证类型 事务代码:VOV8 2.定义销售订单类型 目录:SPRO-销售与 ...

  10. GIT笔记命令行（1）

    Git简单易用,只要输入git就可以列出他的所有参数 C:\Users\spu>git usage: git [--version] [--help] [-C <path>] [-c ...