vue插件集合12:vue中判断是iOS,安卓,以及微信的方法

19 篇文章 1 订阅
11 篇文章 0 订阅

模板中: 其中,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;
	}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值