H5 微信端分享功能模块各按钮禁用，打开处理，及分享组件_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
      //     })
      // })
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

分享点击是。调用组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143