由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时，界面显示一片空白，容易误导以为在下载呢。按照当前主流习惯，做一个提示用户在浏览器中打开下载的遮罩。网上很多现成的例子，解释的也很详细，但感觉没有直接上手可用的例子，因此，我打算写个示例。
<!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=" 100%; height: 100%;"> <p> <img src="live_weixin.png" alt="微信打开" style=" 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 的来做的，图片也是来源这里