话不多说直接上代码!
JavaScript
// 判断是否为微信浏览器
function isWeixinBrowser() {
let ua = navigator.userAgent.toLowerCase();
return /micromessenger/.test(ua) ? true : false;
}
下面有两个vue实例:
1.仅微信访问
用于仅限微信访问的网站提醒,例如基于微信公众号的开发
判断是否为微信浏览器,不是微信浏览器则提醒 “仅限微信浏览器访问,请在微信客户端打开链接”
html:
<div class="isNotweixin" v-if="isnotweixin">
<div class="isNotweixin-box">
<img src="../../static/img/w01.png" alt="">
<span>仅限微信浏览器访问,请在微信客户端打开链接</span>
</div>
</div>
javascript:
export default {
data() {
return {
isnotweixin:false
}
},
mounted() {
// 如果不是微信浏览器
if (!this.isWeixinBrowser()) {
this.isnotweixin = true;
}
},
methods: {
// 判断是否为微信浏览器
isWeixinBrowser() {
let ua = navigator.userAgent.toLowerCase();
return /micromessenger/.test(ua) ? true : false;
}
}
}
css(sass)
<style lang="scss" scoped>
.isNotweixin {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999;
.isNotweixin-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 188rpx;
height: 188rpx;
margin-top: 200rpx;
margin-bottom: 100rpx;
}
span {
padding: 30rpx;
font-weight: 400;
font-size: 32rpx;
}
}
}
</style>
使用的图片
最终效果
2.在其他浏览器打开
用于非微信浏览器访问网站,例如不想依托于微信的网站开发
判断是否为微信浏览器,如果是提醒:“使用其他浏览器打开”
html:
<div class="isweixin" v-if="isweixin">
<div class="isweixin-box">
<img src="../../static/img/isweixin.jpg" alt="">
<span>微信不支持直接打开,请点击右上角选择“在浏览器中打开”访问本网站</span>
</div>
</div>
javascript:
export default {
data() {
return {
isweixin: false
}
},
mounted() {
// 如果是微信浏览器
if (this.isWeixinBrowser()) {
this.isweixin= true;
}
},
methods: {
// 判断是否为微信浏览器
isWeixinBrowser() {
let ua = navigator.userAgent.toLowerCase();
return /micromessenger/.test(ua) ? true : false;
}
}
}
css(sass)
<style lang="scss" scoped>
.isweixin {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 999;
.isweixin-box {
display: flex;
flex-direction: column;
img {
float: right;
width: 750rpx;
height: 486rpx;
}
span {
float: right;
background: #333;
color: #fff;
padding: 40rpx;
}
}
}
</style>
使用到的图片
最终效果