由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时，界面显示一片空白，容易误导以为在下载呢。按照当前主流习惯，做一个提示用户在浏览器中打开下载的遮罩。网上很多现成的例子，解释的也很详细，但感觉没有直接上手可用的例子，因此，我打算写个示例。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>下载示例</title>

<style type="text/css">

#weixin-tip {

    position: fixed;

    left: 0;

    top: 0;

    background: rgba(0, 0, 0, 0.8);

    filter: alpha(opacity = 80);

    width: 100%;

    height: 100%;

    z-index: 100;

}

#weixin-tip p {

    text-align: center;

    margin-top: 10%;

    padding: 0 5%;

}

</style>

</head>

<body>

    <div id="weixin_tip" style="width: 100%; height: 100%;">

        <p>

            <img src="live_weixin.png" alt="微信打开" style="width: 100%; height: 100%;" />

        </p>

    </div>

</body>

<script type="text/javascript">

    function is_weixin() {

        var ua = navigator.userAgent.toLowerCase();

        if (ua.match(/MicroMessenger/i) == "micromessenger") {

            return true;

        } else {

            return false;

        }

    }

    // 微信内置浏览器打开，只是显示遮罩层，其他浏览器进行连接跳转

    if (is_weixin()) {

        document.getElementById("weixin_tip").style.display="block";

    } else {

        document.getElementById("weixin_tip").style.display="none";

        window.location.href = "这里修改为自己的下载地址";

    }

</script>

</html>

记得替换一下下载地址和图片路径就直接可以用了。

图片可以从 https://github.com/kujian/weixinTip?utm_source=caibaojian.com 这里下载

注意：我是参考了 http://caibaojian.com/weixin-tip.html 的来做的，图片也是来源这里

微信扫码下载APK遮罩提示示例的更多相关文章

  1. 微信扫码下载APP

    前段时间开发过程中,要实现一个扫描二维码下载APP的功能,但是苹果系统中,微信不可以直接跳转苹果商店,需要先下载应用宝,显然太麻烦... 这样我们可以做个中间页,用中间页面生成二维码链接,在中间页代码 ...

  2. PHP PC端微信扫码支付【模式二】详细教程-附带源码（转）

    博主写这破玩意儿的时候花了大概快两天时间才整体的弄懂逻辑,考虑了一下~还是把所有代码都放出来给大家~抱着开源大无私的精神!谁叫我擅长拍黄片呢?同时也感谢我刚入行时候那些无私帮过我的程序员们! 首先还是 ...

  3. Android （微信扫码登录） 获取微信二维码+扫码登录

    话不多说  直接上菜! 一.因为是微信扫码登录,所有要在微信开放平台  微信开放平台 (qq.com) 进行注册----- 如下 1.资源中心 里面也有详细的官方讲解,里面也有demo  可以下载 2 ...

  4. 微信开放平台开发——网页微信扫码登录（OAuth2.0）

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  5. Net MVC微信扫码支付

    微信扫码支付+Asp.Net MVC 这里的扫码支付指的是PC网站上面使用微信支付,也就是官方的模式二,网站是Asp.net MVC,整理如下. 一.准备工作 使用的微信API中的统一下单方法,关键的 ...

  6. C# MVC微信扫码支付

    项目需求:学校学生网上缴费项目,刚来公司实习网上百度了各种资料,感谢很多大神避免了很多大坑. 本次扫码支付为:电脑生成二维码,手机微信扫码进行付款.建议开发前下载官方demo熟悉及后续有用到里面代码: ...

  7. 第三方登录：微信扫码登录（OAuth2.0）

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  8. ThinkPHP5微信扫码支付

    1.把微信官网下载的demo放在根目录/vendor/目录下,这里我的是/vendor/wxpay_pc目录 2.把cert里面的文件替换成自己项目的证书(登陆微信商户平台,账户中心,API安全下载) ...

  9. 微信扫码支付springboot版本

    发布时间:2018-11-06   技术:springboot+freemarker   概述 该项目是一个采用springboot构建的web项目,主要实现了微信扫码支付功能.包含最基本的创建订单, ...

随机推荐

  1. org.osgi.framework.BundleException: Exception in org.eclipse.core.resources.ResourcesPlugin.start()

    http://freestyle21.cn 不知什么时候,启动eclipse的时候就一直不行,说是an error ..我查了下log 报错:org.osgi.framework.BundleExce ...

  2. 接龙游戏（codevs 1051）

    1051 接龙游戏  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 给出了N个单词,已经按长度排好了序 ...

  3. 桐桐的糖果计划(vijos 1325)

    背景 桐桐是一个快乐的小朋友,他生活中有许多许多好玩的事,让我们一起来看看吧…… 描述 桐桐很喜欢吃棒棒糖.他家处在一大堆糖果店的附近. 但是,他们家的区域经常出现塞车.塞人等情况,这导致他不得不等到 ...

  4. ehcache、memcache、redis三大缓存比较

    最近项目组有用到这三个缓存,去各自的官方看了下,觉得还真的各有千秋!今天特意归纳下各个缓存的优缺点,仅供参考!  Ehcache 在Java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS ...

  5. vagrant的学习 之 基础学习

    vagrant的学习 之 基础学习 本文根据慕课网的视频教程练习,感谢慕课网! 慕课的参考文档地址:https://github.com/apanly/mooc/tree/master/vagrant ...

  6. POJ 3281_Dining

    题意: FJ准备了F种食物和D种饮料,每头牛都有喜欢的食物和饮料,并且每头牛都只能分配一种食物和饮料.问如何分配使得同时得到喜欢的食物和饮料的牛数量最多. 分析: 首先想到将牛与其对应的食物和饮料匹配 ...

  7. C++ fill 和memset

    以下内容来自www.cplusplus.com--------------------------------------------------- FILL: template <class ...

  8. java设计模式——单例设计模式

    /*设计模式:对问题行之有效的解决方式.其实它是一种思想. 1,单例设计模式.    解决的问题:就是可以保证一个类在内存中的对象唯一性. 必须对于多个程序使用同一个配置信息对象时,就需要保证该对象的 ...

  9. hadoop(1)入门

    hadoop入门(一)   一.概述 1.什么是hadoop hadoop不仅是一个用于存储分布式文件系统,还是设计用来在有通用计算设备组成的大型集群上执行的分布式应用的基础框架. hadoop框架最 ...

  10. Ubuntu 16.04 GNOME无法使用拼音输入法问题

    说明:添加好之后重启!不然会出现输入错乱的问题. 参考: http://forum.ubuntu.org.cn/viewtopic.php?t=477765