微信分享—ios和安卓机制居然不一样!
在加入了用户分享追踪功能
之后,页面已经加载完成的情况下,安卓分享功能没有任何问题,ios却总是分享失败。
关于ios和安卓设备的差别
项目需求是,我们需要对用户的分享行为做追踪,对用户从哪个人分享的链接进来的做记录。所以每个用户有一个唯一的分享码。
用户a分享出去,链接上带有他自己的分享码。
用户b点进链接的一瞬间,把当前url上的分享码传给后端做记录,同时替换上自己的分享码。
我使用替换参数的方式是直接修改router的query
this.$router.push({ name: 'routername' //当前路由名称 query: { sharecode: 'sharecode' //修改后的sharecode }})
加上追踪记录之后,却发现安卓设备能够分享成功,也能拿到正确的记录。但是ios总是分享失败,就算切换到其他页面也依然无法分享,只有在刷新页面后才能分享成功。。。
amazing...
如何和后端交互
签名是后端和微信服务器做的事情,我要做的就是把要做签名的url传给后端。
做法很简单,就是监听路由变化(只变化了参数也需要监听),每次变化时给后端传url。
因为不管从什么渠道点入我们的链接,都会有分享码生成并加在路由上,导致一开始页面就会触发两次路由变化;而且,如果用户没有登陆的话微信爸爸还会强行跳转授权,导致页面重载一次,所以如果一个用户没有登陆,那页面会触发4次路由变化!那就需要和后端交互四次。
不能忍!
最后商议的是,默认进入页面的第一次不做记录 ,这样首屏最多只需要交互2次(划重点,后面要考)。
以上故事在告诉我们人为什么要作死
好了我们回到ios分享失败的问题上
解决过程
chorme浏览器调试模式没发现毛病,微信开发者工具也没发现有问题,就是在ios真机上出现了这个bug。(微信开发者工具居然是一个披着ios外衣的android??dev环境是ios,表现行为却和安卓一毛一样)
千辛万苦线上线下调试,最后发现是真机上在用自己的分享码
替换别人分享码
的这个步骤出现了问题。
安卓设备能够正常替换sharecode参数,但是ios却没有替换成功。后端做签名使用的url是拼接sharecode替换后的链接,所以导致签名和路由匹配不上。
确认使用路由参数替换的方法没有问题,因为安卓环境能够正常替换。所以ios环境该怎么办??
这就引申出了一个问题:vue框架下ios如何在当前页面替换路由参数??
最后是很不优雅的强行重载 - -,相信我会找到解决办法的 > _ <
就这样第一天结束了
——————————时间到了第二天————————————
继续填坑
重载这么恶心的方法当然不行了,不要虚继续干
索性把所有的url都alert出来。
然后,在ios上发现了一个神奇的现象
- 点击一个链接,比如
http:example.com/a&share=111
- ios中弹出当前url没有问题
http:example.com/a&share=111
,紧接着下一步执行替换分享码操作,将share替换成222,即理论上url会变成http:example.com/a&share=222
。 - 按照昨天的逻辑,share不会被替换,可以弹出url发现,被替换了!当前url的确是
http:example.com/a&share=222
。 - 此时再执行分享操作,同时复制当前url。
- 分享失败!粘贴刚刚复制的url,share依然是
111
!wtf !?
ok,紧接着我进行了下一步操作
- 我频繁切换的我的路径,跳到c又跳到d,等等,alert出来的url也随着我的切换进行了变化。
- 在c或者d页面执行分享操作,同时复制当前url。
- 分享失败!粘贴刚刚复制的url,share依然是
111
!(你没看串行,就是和上面一毛一样)
以上现象可以得出一个结论,在ios环境下(安卓分享正常所以没有测试是不是也有同样的行为),如果签名验证失败,那么不管路由如何变化,不仅分享本身不会成功,而且分享出去的路由永远都是第一次加载时的路由。
后来查阅资料才发现,ios的签名验证机制和安卓不一样。
- 安卓:对需要分享的每个页面路由做签名,并加载页面分享信息
- ios: 只需要对第一次进来的页面路由做签名,对每个要分享的页面加载分享信息
这说明了啥,ios环境下,微信只认第一次进来的路由啊!
让我们再把和后端交互部分的重点重复一遍:默认进入页面的第一次不做记录 ,这样首屏最多只需要交互2次
不记录你个大头贴
最后,判断环境是ios的时候,老老实实把第一次的路由给记上。
你问我那ios环境下的首屏最多需要加载4次啦?
认真听讲的小朋友,奖励你一面国旗~
但是!ios只认第一次的路由,我只需要传第一次路由给后端就行,监听路由变化都不用了!