微信分享之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} 就好，也不用做判断。
问题解决～

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

微信分享之SPA的坑相关推荐

微信分享实践和踩坑实践
微信分享的接入步骤 1.申请测试账号微信官方文档提供了测试账号接口测试账号申请; 当然也可以申请自己订阅号,但是个人公众号没有分享的接口权限,测试账号是有的(但是测试账号在真机上分享过程都是正确的 ...
H5页面实现微信分享功能及踩坑历程
看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写: 我理解的误区: 我一直以为可以跟app分享一样,有个分享按钮点击触发分享:搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享 ...
微信开发者工具联网失效以及微信分享ios失效的坑!
微信开发者工具: 当前系统代理不是安全代理? 命令行输入regedit或按快捷键win+R然后输入regedit,打开注册表编辑器------通过下面的路径打开 HKEY_CURRENT_USER/S ...
Vue 爬坑之旅 -- history 路由模式下微信分享爬坑总结
现在做 H5 开发,微信平台基本是一个绕不过去的坑,这里面又分为微信授权和微信分享.说它坑,主要提现在以下几个方面: 文档不够清晰详细.开发文档这块是国内所有互联网公司的通病,文档写的不清不楚,长期不 ...
vue项目全局配置微信分享_Vue项目history模式下微信分享总结-个人文章-SegmentFault思否...
每回遇到微信分享都是一个坑,目前的商城项目使用vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 原文https://justyeh.to ...
前端做微信好友分享_web端实现微信分享功能
微信分享的东西目前文档已经很完善了.记录下做微信分享时遇到的坑,以及流程. 配置相关的就不说了, 文档里很明白. 1:先登录微信公众平台进入"公众号设置"的"功能设置&q ...
微信分享的链接，手机打开白屏，单页面应用(Hash模式下)，实现微信分享
前言:现在将相关的产品分享至朋友圈,进行宣传,成为一种很常见的方式.本文,主要想分享一下,微信分享所遇到的坑,微信分享的链接,手机打开白屏,以及产生的原因. 前端微信分享的基本步骤: 一.绑定域名先 ...
h5 微信分享和踩坑指南
文章目录思路踩坑集锦链接不能直接作用与分享 url 参数不能携带特殊字符,比如花括号 "{}" 代码实现思路 h5 微信分享的官方文档在这里,如果链接挂了,可以按照一下路 ...
单页面应用微信分享跳坑指南
前言最近在开发的时候遇到了一个微信分享的bug,就是无论你在哪个路径下的页面,发送给朋友后点开都只会跳到项目的首页.本来微信分享这个只算是一个小功能,也很好解决,但由于项目的特殊性,使得在这个bug ...

微信分享之SPA的坑

微信分享之SPA的坑相关推荐

最新文章

热门文章