vue项目微信禁止分享功能

Vue微信公众号网页禁用分享功能

因为项目中需要禁止分享功能，所以去百度了一下，但是还是挺多坑的最后拼凑了一个流程。（只介绍全部禁用的）
有很多文章用的是 WeixinJSBridge.call(‘hideOptionMenu’) 但是这个试了一下 会出现 WeixinJSBridge.call已经被禁用，所以找到了下面的方法。

一.npm引入的问题

很多文章写的是引入 weixin-js-sdk 这个，但是引入到main 定义为 wx之后，输出wx你会发现wx为undefined，找了一轮发现，我们需要引入的api并不是它 而是 weixin-jsapi，所以

npm i weixin-jsapi --save

才是我们需要引入的

二.步骤

1.引入之后 直接上步骤

1.在 main.js 文件中引入

import wx from 'weixin-jsapi'

Vue.prototype.$wx = wx

2.在app.vue中的 mounted 直接使用

mounted() {
       this.$wx.hideOptionMenu();
  }

这就搞定了。

// =============== 2021.2.19 更新==============//

一. 上面的方法好像在测试环境中可以，但是部署到线上时，屏蔽功能就会失效(所以使用下面这种方法)。

一.1  给一个检测是否为微信环境的方法，我这里写在utils.js中

// 检测是否是微信环境
  Vue.prototype.$isWeixin = () => {
    var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
  }

一.2 然后在app.vue加载的时候判断

   if(this.$isWeixin()){ // 微信环境下禁用分享
      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        // 通过下面这个API隐藏右上角按钮         如果没有↓这注释，会导致eslint报错
        WeixinJSBridge.call('hideOptionMenu') // eslint-disable-line no-undef
      });
    }