微信公众号隐藏分享按钮
需求 写了一个微信公众号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);