微信分享之SPA的坑

其实 一切尽在官方文档中……
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

下面是我前面一直报错的写法:(写在列表页中的)请求参数一直是当前页面的URL

this.$ajax.post('/room/loadWeixinSign', {url:location.href}, {baseURL:
this.$ajax.defaults.baseRenterURL}).then((share) => {
let _config = {
debug: false,
appId: share.data.content.appid, // 必填,公众号的唯一标识
timestamp: share.data.content.timestamp, // 必填,生成签名的时间戳
nonceStr: share.data.content.nonceStr, // 必填,生成签名的随机串
signature: share.data.content.signature, // 必填,签名
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
"onMenuShareTimeline", // 分享到朋友圈
"onMenuShareAppMessage" // 分享给朋友
]
}
wx.config(_config)
_this.setShareContent(res.data.body.content);
})

先描述一下我遇到的问题:

微信中点击A链接( https://renter-embed.mgzf.com/mogoroom-renterembed-h5/sign/Ra41wt/jz )进入A页面,A页面跳转至B页面
B页面( https://renter-embed.mgzf.com/mogoroom-renterembed-h5/houseList),
首次进入页面总是会报出无效签名,必现,列表页刷新一下,就会正常。(注:单页面应用,这个问题只发生在手机上,微信开发工具是正常的,不会报这个无效签名的错。这就很奇怪了……)

从结果看,在手机中,刷新之前与刷新之后某个参与生成签名的值发生了变化;而在开发工具中,这个值并没有改变。

而参与生成签名的值包括当前页面的URL,nonceStr,timestamp,排除法之后只可能是URL发生了变化。

然后就是猜测并验证了,我首先把请求参数换成{url:’https://renter-embed.mgzf.com/mogoroom-renterembed-h5/sign/Ra41wt/jz‘},结果却是正确的,刷新之后,会报签名无效。

原来,SPA中,微信只记录了一开始进应用的第一个链接,并用它去参与生成签名,而不是用当前的URL(这个解释了为什么使用location.href首次进入页面是报错的,而换成第一个URL却是对的);
而刷新一次,当前列表页面的链接发生了改变,变成了重定向之后的链接,结果就是对的了。

原谅我没看明白官方文档中的醒目说明!!!

微信分享之SPA的坑_第1张图片

知道原因之后,就开始处理啦,其实只需要改变请求参数的URL即可,在A页面,B页面的mounted里面加上

!window.initUrl && (window.initUrl = window.location.href) 即可,即 将当前URL挂载在全局变量中,啥意思想象大家都可以看得明白~

这样在请求接口时,就只需要 {url: window.initUrl} 就好,也不用做判断。
问题解决~

注:小白一枚,问题出现在工作项目中,有不对的地方,敬请指教,欢迎交流~

你可能感兴趣的:(微信分享之SPA的坑)