vue中判断是iOS，安卓，以及微信的方法

模板中： 其中，img是一张图片，在微信中提示打开浏览器下载

<div class="appwh" @click="download"><img src="../../static/images/app1.png" alt=""></div>
<div id="showad" v-show="ShowDark">
	<div class="pop">
		<img class="wxpic" src="../../static/images/liulan.png" alt="">
	</div>
</div>

data中：

data() {
		return {
			ShowDark: false
		}
},

methods中：

download() {
		let ua = navigator.userAgent.toLowerCase();
		//android终端
		let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; //ios终端
		let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
		if (isWeixinBrowser()) {
			this.ShowDark = !this.ShowDark;
			this.$toast('我是微信');
		} else {
			if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
				//ios
				this.$toast('ios');
				window.location = 'http://www.baidu.com'

			} else if (/(Android)/i.test(navigator.userAgent)) {
				//android
				this.$toast('安卓');
				window.location = 'http://www.taobao.com'
			}
		}

		function isWeixinBrowser() {
			return (/micromessenger/.test(ua)) ? true : false;
		}
	},

style中：

// 蒙版遮罩层
#showad {
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		background-size: 100% 100%;
		z-index: 999999;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	#showad .pop {
		position: absolute;
		left: 0;
		right: 0.6rem;
		margin: 0 auto;
		font-size: 0.35rem;
		top: 0.5rem;
		text-align: right;
	}
	#showad .pop .wxpic {
		width: 3.25rem;
		height: 2.66rem;
	}