{ "signature":"4021b3f502e6bd15798a0433af33c4ef1be4ff83", "appId":"wx618f45e4948c3889", "jsapi_ticket":"sM4AOVdWfPE4DxkXGEs8VOxnOWlkG3Q1qP1pwA8mBLNgkCewNOfFiU8EmlnAx8_Fe0Zh-rGS03Nu8BQZB0a4-g", "url":null, "nonceStr":"ab5d0e96-429b-4a86-bd88-dc1276dcf76f", "timestamp":"1566527616" }
注意事项
1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2.签名用的url必须是调用JS接口页面的完整URL。
3.出于安全考虑，开发者必须在服务器端实现签名的逻辑。
4.通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [] // 必填，需要使用的JS接口列表 });
config配置里面的参数appid, timestamp, nonceStr, signature都是要后台接口返回的，前端可以通过axios发送接口请求获取
this.axios.get('/wx/get_signature?url=' + encodeURIComponent(location.href.split('#')[0])).then((res) => { wx.config({ debug: true, // 开启调试模式 appId: res.data.appId, // 必填，公众号的唯一标识 timestamp: res.data.timestamp, // 必填，生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 signature: res.data.signature,// 必填，签名 jsApiList: [ "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容 "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容 "onMenuShareWeibo",//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口 ] // 必填，需要使用的JS接口列表 }) }).catch((error) => { console.log(error) }); //通过ready接口处理成功验证 wx.ready(function(){ this.wxShareTimeline(); this.wxShareAppMessage(); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 }); wx.error(function(res){ //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 });
5.实现自定义分享朋友/朋友圈
wxShareTimeline() {// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 wx.updateAppMessageShareData({ title: '世界那么大，我想去看看-微信test', // 分享标题 desc: '世界那么大，我想去看看-微信test', // 分享描述 link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'http://www.baidu.com/FpEhdOqBzM8EzgFz3ULByxatSacH', // 分享图标 success: () => { } }) }, wxShareAppMessage() {//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容 wx.updateTimelineShareData({ title: '世界那么大，我想去看看-微信test2', // 分享标题 desc: '世界那么大，我想去看看-微信test2', // 分享描述 link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: require('./logo.jpg'), // 分享图标(不能赋相对路径，一定要是绝对路径) success: () => { } }) }
6.遇到问题
1）invalid signature
获取的签名错误，原因可能是公众号平台配置有问题或者是后台返回签名接口的算法有问题
2）invalid url domain
当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号。
3）自定义的缩略图不显示
路径错误导致的，不能使用相对路径，一定要是绝对路径，另外一个原因就是图片尺寸和类型问题，推荐使用jpg格式
4）二次分享导致不能调用自定义的接口
url进行编码之后传给后台获取的签名才不会计算错，因为微信会在分享后的链接后面加from=singlemessage&isappinstalled=0这串字符串。
7.全局缓存公众号access_token 和jsapi_ticket
1）通过数据库保存