We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载。 之前写过的两篇文章:微信打开网址添加在浏览器中打开提示 和 微信扫描打开APP下载链接提示代码优化,尽管已经做得很简单,但发现很多问这类问题的都是小白。 其实原来很简单,就是判断当前是在微信内置浏览器中,然后将默认隐藏的提示层显示出来。 第一步:判断微信的UA。
var ua = navigator.userAgent; var isWeixin = !!/MicroMessenger/i.test(ua);
第二步:引入默认隐藏层。
<a href="http://caibaojian.com/test.apk" id="JdownApp">点击下载APP</a> <a href="http://caibaojian.com/test.apk" id="JdownApp2" class="btn-warn">点击下载APP2</a> <div class="wxtip" id="JweixinTip"> <span class="wxtip-icon"></span> <p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p> </div>
第三步:添加CSS样式
.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;} .wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;} .wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
第四步:点击按钮显示隐藏层,点击隐藏层关闭,总的JS代码如下:
function weixinTip(ele){ var ua = navigator.userAgent; var isWeixin = !!/MicroMessenger/i.test(ua); if(isWeixin){ ele.onclick=function(e){ window.event? window.event.returnValue = false : e.preventDefault(); document.getElementById('JweixinTip').style.display='block'; } document.getElementById('JweixinTip').onclick=function(){ this.style.display='none'; } } } var btn1 = document.getElementById('JdownApp');//下载一 weixinTip(btn1); var btn2 = document.getElementById('JdownApp2'); //下载二 weixinTip(btn2);
完整代码如下:
| -- | -- | <!doctype html> | <html lang="en"> | <head> | <meta charset="UTF-8"> | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | <title>dy2018</title> | | <style type="text/css"> | /*演示用,请勿引入项目中*/ | *{margin:0; padding: 0;} | body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;} | .example{padding: 20px;} | .example p{margin: 20px 0;} | a{display: inline-block; background: #61B3E6; color:#fff; padding: 0 10px; border-radius: 4px; text-align: center; margin: 0 5px; line-height: 22px; font-size: 14px; text-decoration: none;} | a.btn-warn{background: #F0AD4E;} | a:hover{opacity: 0.8;} | /*核心css*/ | .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;} | .wxtip-icon{width: 52px; height: 67px; background: url(http://caibaojian.com/d/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;} | .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;} | </style> | </head> | <body> | <div class="example"> | <p>浏览器中打开,然后点击下载APP。</p> | <a href="#" id="JdownApp">点击下载APP</a> | <a href="#" id="JdownApp2" class="btn-warn">点击下载APP</a> | <div class="wxtip" id="JweixinTip"> | <span class="wxtip-icon"></span> | <p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p> | </div> | </div> | <script type="text/javascript"> | function weixinTip(ele){ | var ua = navigator.userAgent; | var isWeixin = !!/MicroMessenger/i.test(ua); | if(isWeixin){ | ele.onclick=function(e){ | window.event? window.event.returnValue = false : e.preventDefault(); | document.getElementById('JweixinTip').style.display='block'; | } | document.getElementById('JweixinTip').onclick=function(){ | this.style.display='none'; | } | } | } | var btn1 = document.getElementById('JdownApp');//下载一 | weixinTip(btn1); | var btn2 = document.getElementById('JdownApp2'); //下载二 | weixinTip(btn2); | </script> | </body> | </html>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载。 之前写过的两篇文章:微信打开网址添加在浏览器中打开提示 和 微信扫描打开APP下载链接提示代码优化,尽管已经做得很简单,但发现很多问这类问题的都是小白。 其实原来很简单,就是判断当前是在微信内置浏览器中,然后将默认隐藏的提示层显示出来。 第一步:判断微信的UA。
第二步:引入默认隐藏层。
第三步:添加CSS样式
第四步:点击按钮显示隐藏层,点击隐藏层关闭,总的JS代码如下:
完整代码如下:
The text was updated successfully, but these errors were encountered: