spa（单页应用）中，使用history模式时，微信长按识别二维码在ios下失效的问题

Posted 2020-10-14 前端小小菜

spa（单页应用，vue）中，使用history模式时，微信长按识别二维码在ios下失效的问题。

 

触发条件：

spa单页应用；

路由模式 history

从其他页面跳转到带有微信二维码识别的页面（不是直接打开该页面）

ios版本的微信（实测版本6.5.19）

 

结果：

二维码长按无法识别，刷新页面后恢复正常，安卓下正常。

 

解决方案：

1. 进入该页面的方式不使用路由跳转，而改为 <a href="xxx">目标二维码页面</a>的方式；

2. 在beforeCreated中重载该页面（例如增加&_r=1)；

3. 改为hash模式恢复正常。

 

猜想：

微信的长按识别功能，也需要URL认证，但是ios版本的微信，应该是尚未实现根据popstate状态对微信的接口进行监听注册，导致长按识别的接口在该情况下无法识别单页应用修改的路由，从而调用接口失败，而刷新后接口会重新注册当前的URL（而不是通过pushstate改变的URL），因此导致该bug，后续有望修复。毕竟friendly URL 还是有些用处的，特别是分享等场景。