以下内容非原创，遇到这个问题，查到这位大佬的做法，所以记录下来，以便于之后自己查阅。
原文链接：https://blog.csdn.net/qq_22182989/article/details/125674826
遇到的问题：
在做vue项目时，需求是要在微信环境内。
微信h5页面要求前端控制退出时关闭页面功能。
如果是在微信外其他浏览器的话。可以直接使用Window.close即可关闭网页。
但是在微信环境却无法直接使用这个方法。
众所周知，微信小程序的js中不能使用window对象以及document对象。
什么原因呢？
难道他们真的不存在吗？事实并非如此。
这个问题稍后讨论。我会再写一篇文章专门说明这个问题。
今天暂时先解决问题：
解决办法：
温馨提示：有些同学照着一模一样的代码复制粘贴的。但是在微信开发者工具里面模拟微信环境操作。但是还是报错了：
因为必须要在真机环境才能成功！
WeixinJSBridge.call("closeWindow")
完整代码：
<script>
import {mapGetters} from 'vuex';
export default {
data() {
return {
showNative: false,
browserType: '', // 浏览器环境类型，wxpay：微信环境，alipay：支付宝环境
}
},
computed: {
...mapGetters(['userInfo'])
},
methods: {
logout() {
console.log(window);
console.log(this)
if (this.browserType === "wxpay") {
this.$toast('即将关闭页面！');
this.closeWindow()
} else {
this.$store.dispatch('user/logout')
}
},
/**
* 如果是微信环境。退出就关闭窗口
*/
closeWindow() {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
WeixinJSBridge.call("closeWindow")
parent.WeixinJSBridge.call('closeWindow')
},
false
);
} else if (document.attachEvent) {
document.attachEvent(
"onWeixinJSBridgeReady", function () {
//这个可以关闭ios系统的手机
WeixinJSBridge.call("closeWindow");
}
);
}
// 必须加最后这一句，否则关闭不了
WeixinJSBridge.call("closeWindow")
},
// 判断浏览器类型
checkBrowser() {
const browser = navigator.userAgent.toLowerCase();
if (browser.match(/Alipay/i) == "alipay") {
// 支付宝环境
return "alipay";
} else if (browser.match(/MicroMessenger/i) == "micromessenger") {
// 微信内置浏览器
return "wxpay";
}
// 其他h5环境
return "";
},
},
mounted() {
// 判断环境
// 获取浏览器类型，微信浏览器，支付宝浏览器，普通手机浏览器
this.browserType = this.checkBrowser();
},
created() {
}
}
</script>
什么是WeixinJSBridge？
WeixinJSBridge不同于jssdk，不需要鉴权，是微信内置浏览器自带的接口。
大致有以下几个有用的知识点（各功能具体方法请看原文）：
分享给好友
分享到朋友圈
分享到微博
隐藏下方工具栏
隐藏微信右上角分享按钮（并非隐藏三个点，而是里面的菜单）
关闭浏览器回到公众号对话窗口
Vue中只需要定义好方法，在页面初始化中调用即可。
注意：（WeixinJSBridge只能在微信环境内打开的网页有效）
————————————————
版权声明：本文为CSDN博主「南北极之间」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_22182989/article/details/125674826