需求
写了一个微信公众号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);