微信浏览器打开页面时进行遮罩层提示跳转

微信浏览器打开页面时进行遮罩层提示跳转

需求：根据要求实现了一个多端app下载页面的h5，只是在微信打开时会被微信浏览器拦截，无法进行跳转。故做了一个遮罩层提示，如果当前是微信浏览器打开，就弹出遮罩层，做出提示。

一、首先通过 User Agent获取当前浏览器的状态

User Agent 是客户端向服务器发送的一个包含有关客户端信息的标头。我们可以通过分析 User Agent 来判断当前页面是否在微信中打开。在 JavaScript 中，我们可以通过 navigator.userAgent 属性获取当前页面的 User Agent 信息。当浏览器处于微信浏览器时，返回true，否则返回false

let ua = navigator.userAgent.toLowerCase();  
	if(ua.match(/MicroMessenger/i)=="micromessenger") {  
		return true
	} else {  
		return false
	}  

二、实现遮罩层弹框

这个就没什么好说的了，直接贴代码

<view class="mask">
			<view class="list">
				<image class="top" src="../../static/images/top.png" mode=""></image>
				<view class="step_item">
					<view class="yuan">1</view>
					<view class="font">点击右上角的</view>
					<view class="icon">
						<image src="../../static/images/more.png" mode=""></image>
					</view>
					<view class="font">按钮</view>
				</view>
				<view class="step_item">
					<view class="yuan">2</view>
					<view class="font">选择</view>
					<view class="icon">
						<image src="../../static/images/llq.png" mode=""></image>
					</view>
					<view class="font">在浏览器中打开</view>
				</view>
			</view>
		</view>

.mask {  
		position: fixed;  
		top:0;  
		left:0;  
		z-index:999;  
		width:100%;  
		height:100vh;  
		background:rgba(0,0,0,0.4);  
		.list{
			margin-top: 45%;
			position: relative;
			.top{
				position: absolute;
				right: 100rpx;
				top: -130rpx;
				width: 100rpx;
				height: 100rpx;
			}
			.step_item{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;
				.icon{
					background-color: #3f484d;
					padding: 5rpx 15rpx;
					border-radius: 15rpx;
					margin: 0 10rpx;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
				.yuan{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					background-color: red;
					color: #fff;
					margin-right: 15rpx;
				}
				.font{
					font-weight: 700;
					color: #fff;
				}
			}
		}
	}

三、通过User Agent返回的状态来控制遮罩层的显示与隐藏最终实现效果