模板中: 其中,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;
}