时隔多年,再次做这个需求时,又被绕了一大圈(其实主要是后台没做过呀),故总结在此:
效果如下:
1、微信自带的公众号文章分享时效果如下:
2、微信服务号链接自己的域名地址默认分享时是这样的:
所以需求就来了,要求咱们自己开发的项目分享时也要有上面的效果。。
准备工作:
1、用来绑定的微信公众号必须是已认证的
2、链接地址必须是域名,并且是备案过的。(当然就得需要服务器了)
配置工作:
1、JS接口安全域名(不然前端配分享时会报错 config:invalid url domain
)
进入微信公众平台-->设置与开发-->公众号设置-->功能设置-->功能设置-->
JS接口安全域名,按照里面的要求设置完成后如下图:
2、IP白名单(获取access_token 时会验证
)
代码块:
1、获取access_token和jsapi_ticket
根据官方文档https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html ,获取到后自行缓存,然后根据access_token获取jsapi_ticket
2、返回前端所需参数(signature, appId, timestamp, noncestr)
这部分后台代码官方有各版本的 示例代码,官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html,
然后生成的签名signature可在https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 进行验证,是否和这里生成的一致
3、前端引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
4、前端通过config接口注入权限验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature, //必填,签名
jsApiList: [
// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
'checkJsApi',//checkJsApi接口是客户端6.0.2新引入的一个预留接口,第一期开放的接口均可不使用checkJsApi来检测。
'onMenuShareAppMessage', //获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
'onMenuShareTimeline', //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
'onMenuShareQQ',//获取“分享到QQ”按钮点击状态及自定义分享内容接口(即将废弃)
'updateAppMessageShareData',//自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
'updateTimelineShareData'//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
]
})
5、前端配置分享信息并通过ready接口处理
// 判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline',
'onMenuShareQQ',
'onMenuShareQZone',
'updateAppMessageShareData',
'updateTimelineShareData'
], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
console.log(JSON.stringify(res));
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
let shareConfig = {
"imgUrl": "http://www.yourwebsite.com/share.png", //分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
"desc": "你对页面的描述", //摘要,如果分享到朋友圈的话,不显示摘要。
"title": '分享卡片的标题', //分享卡片标题
"link": window.location.href, //分享出去后的链接,这里可以将链接设置为另一个页面。
"success": function() { //分享成功后的回调函数
},
'cancel': function() {
// 用户取消分享后执行的回调函数
}
}
wx.ready(function() {
wx.onMenuShareAppMessage(shareConfig);
wx.onMenuShareTimeline(shareConfig);
wx.onMenuShareQQ(shareConfig);
wx.onMenuShareQZone(shareConfig);
wx.updateAppMessageShareData(shareConfig);
wx.updateTimelineShareData(shareConfig);
});