微信分享的东西目前文档已经很完善了。记录下做微信分享时遇到的坑,以及流程。
文档传送门: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
配置相关的就不说了, 文档里很明白。
1:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2:在需要调用JS接口的页面引入如下JS文件,(支持https):
3:前端需要获取的是以下配置参数
wx.config({
debug: true,
// 开启调试模式,调用的所有api的返回值会在客户端alert出来,
//若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识 在公众号后台找 也可以后端返回
timestamp: , // 必填,生成签名的时间戳 后端返回 示例 : 1566466330
nonceStr: '', // 必填,生成签名的随机串 后端返回 示例 : 'qcmjlufmkiu6ls3pm9fl6zpw4upaphpu'
signature: '',// 必填,签名 后端返回 示例 : 898c11a276d3ac322ac8fa2a1c9c4478d911bd3f
jsApiList: [] // 必填,需要使用的JS接口列表
});
其中 重点说一下 signature 此签名是由 后端通过 jsapi_ticket 、noncestr 、 timestamp 、url( 当前页面 location.href) 来生成的。 url需要前端传给后端 尽量别去改变url 否则会签名失败;比如我之前想把微信分享后自带的form给split掉 结果就生成签名失败了
生成签名的示例:
jsapi_ticket=LIKLckvwlJT9cWIhEMSwfPQ6i-iF7CzG9MfFdUetFysv2QsIY631ub8-TQbXpqzs-cTloAehPWMRe2ibSsAwEA&noncestr=eb7iuq1o4j1bs4a2ex9yeqjupcw7gi5f×tamp=1566463922&url=xxxxx
微信签名校验工具
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
配置微信分享内容 微信分享内容可以是接口请求回来的 也可以写死。 重点是 在配置link的时候 可以分享非当前页面,但必须是在本域名下。
wx.ready(function () {
wx.onMenuShareAppMessage({
title: '送你一张优惠券,马上领取',
desc: '领取优惠券,来全球欢商城领取即可享优惠。仅此一张,先到先得。',
link: location.href, // 可以分享别的页面 但要在同域名
imgUrl: shareContent['share_img'],
trigger: function (res) {},
success: function (res) {}
});
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline({
title: '送你一张优惠券,马上领取',
link: location.href, // 可以分享别的页面 但要在同域名
imgUrl: shareContent['share_img'],
trigger: function (res) {},
success: function (res) {}
});
});
最后 附上配置微信config的报错码