微信分享——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，紧接着我进行了下一步操作

以上现象可以得出一个结论，在ios环境下（安卓分享正常所以没有测试是不是也有同样的行为），如果签名验证失败，那么不管路由如何变化，不仅分享本身不会成功，而且分享出去的路由永远都是第一次加载时的路由。

后来查阅资料才发现，ios的签名验证机制和安卓不一样。

这说明了啥，ios环境下，微信只认第一次进来的路由啊！

让我们再把和后端交互部分的重点重复一遍：默认进入页面的第一次不做记录，这样首屏最多只需要交互2次

不记录你个大头贴

最后，判断环境是ios的时候，老老实实把第一次的路由给记上。

你问我那ios环境下的首屏最多需要加载4次啦？

认真听讲的小朋友，奖励你一朵大红花～

但是！ios只认第一次的路由，我只需要传第一次路由给后端就行，监听路由变化都！不！用！了！（微笑）

掘金主页：如意同学

简书主页：如意同学

b站直播地址，每周五晚不定期直播，偶尔写代码，偶尔读书，偶尔看学习视频，偶尔干点乱七八糟的（反正和学习有关），欢迎一起学习！yo～