众所周知微信内是不能下载应用的，同时在我们一些推广营销的时候也不方便在微信内操作体验，也许你也在某度搜了半天都是营销广告内容甚至付费才能实现到遮罩效果，在这里小编将分享可用的遮罩代码及直接跳转的代码和仿微信下拉的效果供大家测试使用。
直接上干货吧：
<script type="text/javascript">
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
var isWeixin = is_weixin();
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
function loadHtml(){
var div = document.createElement('div');
div.id = 'weixin-tip';
div.innerHTML = '<p><img src="https://ae01.alicdn.com/kf/HTB1_eOuThYaK1RjSZFnq6y80pXav.jpg" width = 100% height = 100%/></p>';
//这里是遮罩图片，可以用自定义半屏(这里的图若是全屏则会遮挡原网站内容，若是半屏则会继续显示原内容)
//这个外链是半屏遮罩效果：https://ae01.alicdn.com/kf/U4d6559c4cd704d4a9756f945ea45dba1o.png
document.body.appendChild(div);
}
function loadStyleText(cssText) {
var style = document.createElement('style');
style.rel = 'stylesheet';
style.type = 'text/css';
try {
style.appendChild(document.createTextNode(cssText));
} catch (e) {
style.styleSheet.cssText = cssText; //ie9以下
}
var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式
head.appendChild(style);
}
var cssText = "#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: 2%; padding:0 5%;}";
if(isWeixin){
loadHtml();
loadStyleText(cssText);
}
</script>代码中已经介绍并解释了遮罩图的效果用法，具体大家可以自行测试。
很多人可能还不会用js方式调用，用js酱紫的视觉上可以减免这么长的代码。
<script type="text/javascript" src="/js/WeChat.js"></script>
其中：/js/WeChat.js 就是文件路径，文件内容就是上方的全部内容。
下面是直接跳转的代码：
<?php
error_reporting(0);
if($_GET['open']==1 && strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger')!==false){
header("Content-Disposition: attachment; filename=\"load.doc\"");
header("Content-Type: application/vnd.ms-word;charset=utf-8");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta name="format-detection" content="telephone=no"/>
<meta content="false" name="twcClient" id="twcClient"/>
<style>
body,html{width:100%;height:100%}
*{margin:0;padding:0}
body{background-color:#fff}
.top-bar-guidance{font-size:15px;color:#fff;height:40%;line-height:1.8;padding-left:20px;padding-top:20px;background:url(//gw.alicdn.com/tfs/TB1eSZaNFXXXXb.XXXXXXXXXXXX-750-234.png) center top/contain no-repeat}
.top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}
.app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}
</style>
</head>
<body>
<div class="top-bar-guidance">
<p>点击右上角<img src="//ae01.alicdn.com/kf/Uf75a9b91d00442958d5a2580e81fa224D.png" class="icon-safari" /> Safari打开</p>
<p>可以继续访问本站哦~</p>
</div>
<a class="app-download-btn" id="BtnClick" href="javascript:;">
点此继续访问
</a>
<script>
var url = 'http://www.yijuv.cn/'; //填写要跳转到的网址
document.querySelector('body').addEventListener('touchmove', function (event) {
event.preventDefault();
});
window.mobileUtil = (function(win, doc) {
var UA = navigator.userAgent,
isAndroid = /android|adr/gi.test(UA),
isIOS = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,
isBlackBerry = /BlackBerry/i.test(UA),
isWindowPhone = /IEMobile/i.test(UA),
isMobile = isAndroid || isIOS || isBlackBerry || isWindowPhone;
return {
isAndroid: isAndroid,
isIOS: isIOS,
isMobile: isMobile,
isWeixin: /MicroMessenger/gi.test(UA),
isQQ: /QQ/gi.test(UA)
};
})(window, document);
if(mobileUtil.isWeixin){
if(mobileUtil.isIOS){
url = "https://t.asczwa.com/taobao?backurl=" + encodeURIComponent(url);
document.getElementById('BtnClick').href=url;
}else if(mobileUtil.isAndroid){
url = '?open=1';
document.getElementById('BtnClick').href=url;
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
document.body.appendChild(iframe);
}
}else{
document.getElementById('BtnClick').href=url;
window.location.replace(url);
}
//setTimeout('WeixinJSBridge.invoke("closeWindow", {}, function(e) {})', 2000);
</script>
</body>
</html>食用方法：自建php文件修改其中域名地址访问即可
预览效果：
经测试安卓小米一切正常，可以自动跳转到默认浏览器，具体请自行测试。
自动跳转后微信内停留的就是上图这个界面。
仿微信下拉效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信下拉效果演示</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
<style>
body {
background: #0099EC;
}
.wechat_from {
position: fixed;
background: #EDEDED;
/*旧版微信颜色background: #303133;*/
top: 0;
left: 0;
right: 0;
/*防止 下拉太长 显示 蓝色背景*/
height: 300px;
color: #7A7B7D;
padding: 10px 0;
font-size: 12px;
}
#wrapper {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
}
#container {
background: #0099EC;
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div>
<br><center>网页由 www.yijuv.cn 提供</center>
</div>
<div id="wrapper">
<div id="container">
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<h2>下拉试试</h2>
<p>您访问的是 www.20sl.cn </p>
<p>下拉显示 由 信封生活网 提供 </p>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</div>
</div>
<script>
var myScroll;
function isPassive() {
var supportsPassiveOption = false;
try {
addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function() {
supportsPassiveOption = true;
}
}));
} catch (e) {}
return supportsPassiveOption;
}
window.onload = function() {
myScroll = new IScroll('#wrapper', { mouseWheel: true });
}
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, isPassive() ? {
capture: false,
passive: false
} : false);
</script>
</body>
</html>效果预览：
https://www.20sl.cn/tset_html/WeChat_drop-down.html
