最近有个H5项目在微信浏览器上运行,在项目开发过程中有一个奇特的需求,就是打开这个项目网页的用户分享 和 静止分享(就是有些页面要求要有分享【可自己定义标题、图片、链接】,而有些页面要求要不让用户分享)。
自定义分享到是经常做,但要不让用户分享还真没做过,经过一翻折腾最终搞定了,代码如下:
官网文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
由于项目需求,要自定义分享的标题、图片、链接等参数在后台管理中进行自由设置,所以这里先请求后端拿到分享相应的参数。
$.ajax({
url: 'https:www.xxx.com/index.php?r=index/share', //后端API地址。。。
method: 'GET',
data: {
url: 'https:www.abcd.com/index.html'
},
success: (e) => {
let o = e.data.result;
if (10000 == o.code) {
wx.config({
debug: o.data.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: o.data.appid, // 必填,公众号的唯一标识
timestamp: o.data.timestamp, // 必填,生成签名的时间戳
nonceStr: o.data.nonceStr, // 必填,生成签名的随机串
signature: o.data.signature, // 必填,签名
jsApiList: [ // 必填,需要使用的JS接口列表
'checkJsApi',
'onMenuShareTimeline', //分享到微信朋友圈
'onMenuShareAppMessage', //分享给微信朋友
'onMenuShareQQ', //分享到QQ
'onMenuShareWeibo', //分享到微博
'onMenuShareQZone', //分享到QQ空间
]
});
wx.ready((d = o.data.shareConfig) => {
wx.onMenuShareTimeline({
title: d.title, // 分享标题
link: this.$.__URL__ + '/web/index.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: d.cover, // 分享图标
success: function() {},
cancel: function() {}
});
wx.onMenuShareAppMessage({
title: d.title, // 分享标题
desc: d.content, // 分享描述
link: this.$.__URL__ + '/web/index.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: d.cover, // 分享图标
type: 'link', // 分享类型,[music、video或link,不填默认为link]
success: function() {},
cancel: function() {}
});
wx.onMenuShareQQ({
title: d.title, // 分享标题
desc: d.content, // 分享描述
link: encodeURIComponent(d.link), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: d.cover, // 分享图标
success: function () {} // 设置成功回调
});
wx.onMenuShareWeibo({
title: d.title, // 分享标题
desc: d.content, // 分享描述
link: encodeURIComponent(d.link), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: d.cover, // 分享图标
success: function () {} // 设置成功回调
});
wx.onMenuShareQZone({
title: d.title, // 分享标题
desc: d.content, // 分享描述
link: encodeURIComponent(d.link), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: d.cover, // 分享图标
success: function () {} // 设置成功回调
});
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
};
}
});
在微信中叫《 批量隐藏功能按钮》
文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
$.ajax({
url: 'https:www.xxx.com/index.php?r=index/share', //后端API地址。。。
method: 'GET',
data: {
url: 'https:www.abcd.com/index.html'
},
success: (e) => {
let o = e.data.result;
if (10000 == o.code) {
Wx.config({
debug: o.data.debug,
appId: o.data.appid,
timestamp: o.data.timestamp,
nonceStr: o.data.nonceStr,
signature: o.data.signature,
jsApiList: [
'checkJsApi',
'hideMenuItems' //调用下面的方法:
]
});
Wx.ready(() => {
Wx.hideMenuItems({
//要隐藏功能按钮(// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮)
menuList: [
'menuItem:share:appMessage', //发送给朋友
'menuItem:share:timeline', //分享到朋友圈
'menuItem:share:qq', //分享到QQ
'menuItem:share:weiboApp', //分享到Weibo
'menuItem:share:favorite', //收藏
'menuItem:share:facebook', //分享到FB
'menuItem:share:QZone', //分享到 QQ 空间
]
});
});
};
},
});