现在手机微信上扫码比较多,但是微信内置的浏览器相对而言会有拦截,会提醒用户 " “请点击右上角,选择"在浏览器中打开” "打开的字样,但具体怎么实现,之前查过网上给的代码,但基本给的不是很全,但是不知道怎么去实现这个效果,今天在这里给大家说明一下怎么实现,首先要在微信扫的时候出现字样,就得先判断是否是在微信内置浏览器,在进行下一步判断。我们先可以设计一下网页的样式,我参照了一个网页来做的,里面的内容基本和其他差不多,是那种比较简洁那种,直接看代码吧:
html代码:
<div class="template-2 template-wrap">
<div class="t-bg-2"></div>
<div class="container">
<div class="content">
<div class="template-common">
<div class="t-icon">
<img src="这里面可填写相对路径,可填写服务器端路径">
</div>
<div class="t-name">
<div class="tit">这里填写apk的名字</div>
<div class="name-info pc-pwd">
<span>填写apk的版本号</span>
<span>填写apk的大小</span>
</div>
</div>
<div class="template-btn-wrap">
<a href="填写apk的下载链接地址"
link="填写apk的下载链接地址"
class="ms-btn template-btn clearfix pc-pwd down_load">
<span clsss="f1">下载安装</span>
</a>
</div>
<!-- <div class="t-name">
<div class="name-info pc-pwd">
<span>(微信扫码后,请点击右上角选择在浏览器中打开)</span>
<span></span>
</div>
</div> -->这一段可出现,可不出现,看个人习惯
<div class="t-icon1 t-icon-img">
<img src="这里面可填写相对路径,可填写服务器端路径">
</div>
</div>
</div>
</div>
</div>
css代码:
*{margin: 0;padding: 0;}
body,html{width: 100%;}
a{text-decoration: none;}
.t-bg-2{width: 100%;height: 130px;background: #2698ff;}
@media (min-width: 1700px){
.container {
width: 1700px;
}
} // 适应不同的页面
@media (min-width: 1170px){
.container {
padding-left: 0;
padding-right: 0;
}
}//适应不同的页面
.template-2 .content {
margin-top: -90px;
}
.content {
padding-top: 40px;
padding-bottom: 40px;
}
.template-common .t-icon {
background-color: #fff;
width: 170px;
height: 170px;
border-radius: 25px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
display: flex; //弹性和布局,适应手机端页面,同时适应pc端页面
align-items: center;
margin: 0 auto;
}
.template-common .t-icon img {
width: 120px;
height: 120px;
border-radius: 30px;
border: 1px solid #e5e5e5;
margin: 0 auto;
}
.template-common .t-icon1{
width: 150px;
height: 150px;
display: flex;
align-items: center;
margin: 0 auto;
}
.template-common .t-icon1 img{
margin: 0 auto;
width:140px;
height: 140px;
border: 1px solid #e5e5e5;
}
.template-common .t-name {
color: #333;
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
}
.template-common .t-name .tit {
font-size: 20px;
margin-bottom: 5px;
margin-top: 10px;
}
.template-common .t-name .name-info{
margin-bottom: 20px;
margin-top: 10px;
}
.template-common .t-name .name-info span {
margin-right: 10px;
color: #666;
font-size: 13px;
}
.template-common .template-btn-wrap {
text-align: center;
margin-bottom: 20px;
}
.template-common .template-btn {
color: #fff;
background-color: #157df1;
height: 40px;
padding: 0 38px;
line-height: 40px;
font-size: 18px;
display: inline-block;
border-radius: 30px;
}
.fl {
float: left;
_display: inline;
*zoom: 1;
}
img{
max-width: 100%;
height: auto;
}
出现的效果如下:
上面的html,css代码可以做到手机,pc,等页面自适应,都是处于居中的状态,大家可去尝试一下。
接下来就是实现在微信扫描的时候出现一个弹窗,出现"请点击右上角,选择"在浏览器中打开" " 的字样,我所写的是纯jQuery来写的:
代码如下:
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
//引入jQuery版本
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}// 这个实现是否是在微信打开的,如果是返回true,如果不是,返回false
$(function(){
var isWeixin = is_weixin();//调用is_weixin函数;获取到值
var winHeight = typeof window.innerHeight != 'undefined' ?
window.innerHeight : document.documentElement.clientHeight;
var weixinTip = $('<div id="weixinTip"><div class="test"><p>请点击右上角,选择"在浏览器中打开"</p><img src="这里可填写相对路径,可填写绝对路径"/></div></div>');
if(isWeixin){
$("body").append(weixinTip);
}
$("#weixinTip").css({
"position":"fixed",
"left":"0",
"top":"0",
"height":winHeight,
"width":"100%",
"z-index":"1000",
"background-color":"rgba(0,0,0,0.8)",
"filter":"alpha(opacity=80)",
"float":"left"
});
$("#weixinTip div p").css({
"text-align":"right",
"width":"85%",
"margin-top":"10%",
"color":"#fff",
});
$("#weixinTip div").css({
"display":"flex",
"justify-content": "space-around",
"align-items":"center",
"padding-left":"4%",
"padding-right":"4%"
})
$("#weixinTip div img").css({
"text-align":"left",
"width":"7%",
"height":"7%",
"margin-top":"7%",
"padding-left":"4%",
"padding-right":"4%"
})
})
这样基本就可以实现微信扫的时候出现弹窗的问题,基本代码就是如此,有需要可以试试。