微信分享之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却是对的）；
而刷新一次，当前列表页面的链接发生了改变，变成了重定向之后的链接，结果就是对的了。

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

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

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

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

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