几个月前在做一个ai项目;项目需求在微信公众号内需要有自定义分享的功能;
微信公众平台
微信JS-SDK说明文档
链接地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
js-sdk在线地址:http://res.wx.qq.com/open/js/jweixin-1.4.0.js
根据文档说明;
appId、timestamp、
nonceStr、
signature通过后端生成之后返回前台;
爬坑:自定义分享的图片需要和项目域名保持一致;
前台使用前需要引入js-sdk相关文件就是上述的js-sdk在线地址;
下面是实现自定义分享相关代码:
var data = data.data; //后台返回相关数据
wx.config({
debug: false,////生产环境需要关闭debug模式
appId: data.appId,//appId通过微信服务号后台查看
timestamp: data.timestamp,//生成签名的时间戳
nonceStr: data.nonceStr,//生成签名的随机字符串
signature: data.signature,//签名
jsApiList: [//需要调用的JS接口列表
'checkJsApi',
'onMenuShareTimeline',//
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
window.share_config = {
"share": {
"imgUrl": "sunpengwei/img/sun.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。这里的图片必须和域名保持一致方可生效
"desc": "全身变!",//摘要,如果分享到朋友圈的话,不显示摘要。
"title": '巴啦啦小魔仙全身变!',//分享卡片标题
"link":"sunpengwei/index",//分享出去后的链接,这里可以将链接设置为另一个页面。
"success": function () {//分享成功后的回调函数
console.log("分享成功");
},
'cancel': function () {
// 用户取消分享后执行的回调函数
}
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(share_config.share);//分享给好友
wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
wx.onMenuShareQQ(share_config.share);//分享给手机QQ
});