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)) {//iosthis.$toast('ios');window.location = 'http://www.baidu.com'} else if (/(Android)/i.test(navigator.userAgent)) {//androidthis.$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;}

更多相关文章

随机推荐