话不多说直接上代码！

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>

使用到的图片

最终效果

js、vue判断是否为微信内置浏览器相关推荐

利用window.navigator.userAgent判断当前是否微信内置浏览器
<!DOCTYPE HTML> <html lang="en"> <head><meta charset="utf-8" ...
如何判断是否为微信内置浏览器
在微信公众账号开发中,一般会在微站点使用微信用户授权接口,但是我们的网站也需要在非微信环境中正常使用,这就需要判断当前的浏览器是微信内置的浏览器,那么如何判断呢? 判断微信浏览器浏览器中的User A ...
如何判断微信内置浏览器(JS PHP)
进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent Mozilla/5.0 (iPhone; ...
php判断微信内核,JavaScript_如何判断微信内置浏览器(通过User Agent实现)，在进行微信公众账号开发的时 - phpStudy...
如何判断微信内置浏览器(通过User Agent实现) 在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 Use ...
JoshChen判断是否微信内置浏览器访问【转载】
在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信 ...
如何判断微信浏览器php代码,PHP与Javascript判断微信内置浏览器代码
在进行微信公众账号开发的时候,我们经常需要判断是否为微信内置浏览器.本文我们将介绍通过 User Agent 来判断是否为微信内置浏览器. 微信内置浏览器的 User Agent iPhone 上微信 ...
微信useragent java_微信内置浏览器UserAgent的判断
需求分析现在微信火了,很多线上的APP都希望通过分享的URL或直接的URL进行产品宣传(写这篇博文的时候,听说微信下个版本将要屏蔽微信中的URL链接),这些链接都将通过微信内置的浏览器打开.PM希望 ...
如何判断微信内置浏览器
在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信 ...
python 模拟微信浏览器请求_使用Chrome修改user agent模拟微信内置浏览器
很多时候,我们需要模拟微信内置浏览器,今天教大家用chrome简单模拟.如图设置: F12或者右键审查元素进入开发者模式,点击Emulation,然后点击Network,把Spoof user age ...

js、vue判断是否为微信内置浏览器

1.仅微信访问

2.在其他浏览器打开

js、vue判断是否为微信内置浏览器相关推荐

最新文章

热门文章