Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

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

Jump to bottom

微信扫码提示在浏览器中打开的遮罩代码 #37

Open
dalaolala opened this issue Dec 5, 2021 · 0 comments
Open

微信扫码提示在浏览器中打开的遮罩代码 #37

dalaolala opened this issue Dec 5, 2021 · 0 comments

Comments

@dalaolala
Copy link
Owner

由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，我想到的是做一个提示用户在浏览器中打开下载。 之前写过的两篇文章：微信打开网址添加在浏览器中打开提示 和 微信扫描打开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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dalaolala