【全局分享】在ios下微信内置浏览器内分享出去的地址不正确的问题

[mutoe]

问题描述

在ios的微信内置浏览器中，从某个地址进入spa页面，然后进行一番操作后，在别的页面点击分享，分享出去的地址还是首次进入spa页面的地址。

根据调查，该问题可能是微信或IOS webview的bug，可能存在解决办法，先mark

参考资料

• 关于html5-History模式在微信浏览器内的问题 vuejs/vue-router#481 关于html5-History模式在微信浏览器内的问题
• H5 history.pushState 在微信内修改url后点击用safari打开/复制链接是修改之前的页面 Tencent/weui#125 H5 history.pushState 在微信内修改url后点击用safari打开/复制链接是修改之前的页面

[mutoe]

iPhone 4 iOS 11.4.1
wechat v6.7.3
无此问题

[mutoe]

尚无完美的解决办法

问题原因

在 iOS 下的微信中打开单页应用（不限于此项目），然后进行跳转，页面表面上地址进行了变更，实际上原始地址还是刚进入单页应用时的地址，所以分享出去时微信js-sdk签名没有变更，导致分享出去后其他用户点击的链接与分享出去的链接不一致

排查过程

使用了几台机器，发现只有在高版本 IOS 上有此问题，安卓机器和 IPhone4 都没有复现，怀疑是微信或ios方面的bug，经过查找社区资料，确认确实时微信方面的问题，并且很久都没有处理，也可能跟ios的安全策略有关。
按照社区用户修复经验，大多都是在需要分享的页面上重新加载整个单页应用，这样带来的负面效果就是每当用户切换到可以进行分享的页面时，就会刷新一次，用户会感觉到有白屏的存在（低端机器或慢网速更明显）

修复方案

1. 不修复，引导用户在需要分享的地方先刷新页面（这个思路不现实）
2. 在路由的beforeEach钩子上增加一个方法，首先判断是在 ios并且在微信环境下，当页面跳转时，刷新页面；

这样做带来的用户体验不会很好（就像第一次进入页面时的白屏一样），将 spa 带来的速度优势抛去

[mutoe]

最终方案

折中解决，在动态详情、资讯详情、圈子帖子和个人主页四个页面进行刷新操作，其他页面基本无需分享操作，不刷新页面，尽可能减少用户体验的损耗