微信公众号隐藏分享按钮

需求
  写了一个微信公众号H5活动界面,然后用户可以分享,其中有一个坑就是,分享功能是通过调后台接口,

  然后配置微信config,设置 jsApiList【】 获取微信分享的方法的api实现的,
  这时候产品经理的骚操作来咯,   刚刚跳转到界面,后端数据都没有加载出来,就点击右上角按钮,分享内容到好友,朋友圈,
  分享出去的链接就报错了,没办法,得找到解决办法,   发现可以通过微信浏览器私有接口 WeiXinJsBridge 实现功能,具体实现就是一进入界面   就执行WeiXinJsBridge 方法隐藏分享按钮, 然后等数据接收到了,
  就调用jsApiList 里面的方法 显示按钮 通过微信浏览器私有接口 WeixinJSBridge 方法实现     1.分享功能(好友,朋友圈,微博等)     1.返回功能(可参考:关闭内置浏览器返回对话框)     3.隐藏功能(工具栏等)   第二个,使用上方功能需调用的 JS 文件,可以使用 res-jweixin-1.6.0.js 或者 res2-jweixin-1.6.0.js
  这两个都行的,随便那个都可以,详情可参考:官方 JS-SDK 文档   第三个,hideOptionMenu 方法,字面意思隐藏菜单,据说隐藏的菜单只能是“传播类”和“保护类”按钮,
vue 当中使用
    created() {
  // 隐藏分享菜单
          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          } else {
            WeixinJSBridge.call('hideOptionMenu')
          }
    },
 
 // 显示按钮
        window.wx.ready(() => {   
          setTimeout(() => {
            wx.showMenuItems({
              menuList: [
                'menuItem:share:timeline',
                'menuItem:share:qq',
                'menuItem:favorite',
              ] // 要显示的菜单项,所有menu项见附录3
            })
          }, 1500);

  

posted @ 2022-05-13 13:37  live丶  阅读(486)  评论(0编辑  收藏  举报