H5 微信端分享功能模块各按钮禁用，打开处理，及分享组件

首先，路由切换是每个页面都默认调用微信方法关闭。看你要关闭那些
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#44 官方文档地址

项目加载的时候需要去注入微信wx.config 。但要调用微信sdk .我这是通过后台拿的签名等数据

  created(){
    GET_CONFIG({appId:APP_ID,url:window.location.href.split("#")[0]}).then(res=>{
      let data = res.data;
      console.log(data)
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: APP_ID, // 必填，公众号的唯一标识
        timestamp:data.timestamp,  // 必填，生成签名的时间戳
        nonceStr:data.noncestr, // 必填，生成签名的随机串
        signature: data.signature,// 必填，签名
        jsApiList: ['updateAppMessageShareData','updateTimelineShareData',
        'onMenuShareWeibo','onMenuShareAppMessage','onMenuShareTimeline',
        'hideAllNonBaseMenuItem','showMenuItems','hideMenuItems','showAllNonBaseMenuItem'
        ] // 必填，需要使用的JS接口列表
      });
      // wx.ready(function () {
      //   //  wx.hideAllNonBaseMenuItem(); // 隐藏微信 右上角功能--所有非基础按钮
      //     wx.hideMenuItems({
      //       menuList: ["menuItem:share:QZone","menuItem:share:facebook",
      //       "menuItem:share:weiboApp","menuItem:share:qq",
      //       "menuItem:share:timeline","menuItem:share:appMessage"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      //     })
      // })
    });
  }
}

分享点击是。调用组件

<template>
    <!-- 微信分享---公共组件 -->
    <div class="share_div" v-show="getShareShow" @click="getShareShowFu">
      <i></i>
    </div>
</template>

<script>
    // import {API_HOST} from "../../../config/index.js";
    export default {
        props: {
          configShare: { // 分享参数配置
            type: Object,
            default() {
              return {
                title:"", // 分享标题
                desc:"", // 分享描述
                link: "", // 分享链接--跳转地址
                imgUrl:"" // 分享图片地址
              }
            }
          },
          sharingType: { // 分享按钮有哪些
            type: Array,
            default() {
              return ['wxFriend','wxCircleFriends','qq','qqSpace']; // wxFriend -- 微信朋友。  circleFriends：朋友圈  qqSpace: QQ空间  qq：QQ
            }
          },
          shareShow: { // 是否显示分享提示
             type: Boolean,
             required: false
          }
        },
        data() {
            return {
              getShareShow: this.shareShow,
              getConfigShare: this.configShare,
              getSharingType: this.sharingType
            }
        },
        components: {
            
        },
        watch:{
          getShareShow: (val)=>{
              console.log('监听分享', val)

          }
        },
        created() {
            
        },
        mounted() {
          this.share(this.getConfigShare);
        },
        computed: {
            
        },
        methods: {
                        //  微信付目录--传播类
            // 发送给朋友: "menuItem:share:appMessage"
            // 分享到朋友圈: "menuItem:share:timeline"
            // 分享到QQ: "menuItem:share:qq"
            // 分享到Weibo: "menuItem:share:weiboApp"
            // 收藏: "menuItem:favorite"
            // 分享到FB: "menuItem:share:facebook"
            // 分享到 QQ 空间 "menuItem:share:QZone"
            share(configInfo){
                let shareTyleObj = {
                  'wxFriend':"menuItem:share:appMessage",
                  'wxCircleFriends': "menuItem:share:timeline",
                  'qq': "menuItem:share:qq",
                  'qqSpace': "menuItem:share:QZone"
                };
                let b = [];
                this.getSharingType.forEach(element => {
                  if(!!shareTyleObj[element]){
                    b.push(shareTyleObj[element]);
                  }  
                });
                wx.showMenuItems({
                  menuList: b // 要显示的菜单项，所有menu项见附录3
                });
               console.log('232323')
               wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                    // let configInfo={
                    //     title:"拼团免费领取赠险",
                    //     desc:"拼团成功，即可获得一份太平交通意外赠险，行动起来吧！",
                    //     link: location.href,
                    //     imgUrl:"https://wxapptest.tpi.cntaiping.com/web/wxapp/0813/share_img.png"
                    // }
                    // “分享给朋友”及“分享到QQ”
                    wx.updateAppMessageShareData({ 
                        title: configInfo.title, // 分享标题
                        desc: configInfo.desc, // 分享描述
                        link: configInfo.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: configInfo.imgUrl, // 分享图标
                        success: function () {
                            console.log()
                        // 设置成功
                        }
                    });
                    // “分享到朋友圈”及“分享到QQ空间”
                    wx.updateTimelineShareData({ 
                        title: configInfo.title, // 分享标题
                        link: configInfo.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: configInfo.imgUrl, // 分享图标
                        success: function () {
                        // 设置成功
                        }
                    });
                })
            },
            getShareShowFu(){
                this.$emit('getShareShowFu', false)
                this.getShareShow = false;
            }
        },
     }
</script>

<style lang="less" scoped>
   .share_div{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: right;
        // z-index: 11;
        background: rgba(0, 0, 0, 0.8);
        i{
            background: url('~@/assets/images/icon_share.png') no-repeat;
            background-size: 100%;
            width: 175px;
            height: 175px;
            display: inline-block;
            // float: right;
            margin-right: 15px;
        }
   }

</style>