以下内容非原创，遇到这个问题，查到这位大佬的做法，所以记录下来，以便于之后自己查阅。

原文链接：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