检测手机所在设备 - 是微信，支付宝还是其他

本文链接：https://blog.csdn.net/weixin_45379180/article/details/126965317

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>下载</title>
</head>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
	}

	html,
	body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.box {
		text-align: center;
		width: 100%;
		height: 100%;
		max-height: 100%;
		padding-top: 1px;
	}
</style>

<body>
	<div class="box">
		<div class="marker" v-if="isWeixn">
			<img src="img/instructions.png" alt="">
		</div>
		<div class="box-name">
			<img src="img/UOTTA.png" alt="">
		</div>
		<p class="name-u">uuuuu/p>
		<p class="titel-u">为你而来</p>
		<div class="box-bg"></div>
		<div class="down-button" @click="downApp">下载</div>
		<div class="bg-bottom"></div>
	</div>
</body>

<script type="text/javascript">

	new Vue({
		el: '.box',
		data: {
			isWeixn: false
		},
		methods: {
			downApp() {
				// 1、通过点击判断是否是微信浏览器-来显示遮罩层
				// const openMark = this.isWechatOrZfb()
				const isWechat = this.IsWeixn()
				if (isWechat) {
					this.isWeixn = true
					return false;
				} else { // 2、点击下载的时候判断是ios 直接跳转商店 安卓的话直接下载apk
					const isApple = this.IsAppleStore()
					const httpUrl = isApple ? '苹果' : '安卓'
					alert(httpUrl)
					// window.location.href = httpUrl
				}
			},
			/*--------------------------------- 检测扫码所在环境--------------------------------*/
			// 是否是苹果
			IsAppleStore() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
				var iPad = u.indexOf('iPad') > -1;
				var iPhone = u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
				if (ios || iPad || iPhone) {
					return true;
				}
				else {
					return false;
				}
			},
			// 是否是安卓
			IsAndroidList() {
				var u = navigator.userAgent;
				if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
					return true
				} else {
					return false
				}
			},
			isWechatOrZfb() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger" 
					|| ua.match(/AlipayClient/i) == "AlipayClient") {
					return true;
				} else {
					return false;
				}

			},
			// 是否在微信浏览器
			IsWeixn() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			},
			// 是否在pc端运行
			IsPC() {
				var userAgentInfo = navigator.userAgent;
				var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"];
				var flag = true;
				for (var v = 0; v < Agents.length; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			}

		},
		mounted() { }
	})

</script>

</html>

// 方法2

if (/AlipayClient/.test(window.navigator.userAgent)) {
	//判断是否是支付宝浏览器打开
	console.log('支付宝客户端');
}

if (/MicroMessenger/.test(window.navigator.userAgent)) { 
	console.log('微信浏览器');
}

//判断微信
let ua = window.navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		console.log('微信浏览器');	    
}