企业微信公众号登录以后重定向,回退时导致IOS白屏问题

912 阅读2分钟

问题起因

不就以前接手了一个企业微信公众号,开发一个活动功能,发现有一个问题, IOS 手机从企业号进入首页以后右滑回退会白屏,而不是退出企业号,需要在右划一次才会退出。

问题分析

  1. 查看了一下代码,发现问题问题在于刚刚进入首页的时候要重定向到微信企业号后台去登录认证,然后登录以后再次重定向到企业号首页。
  2. 因为多了一次重定向,所以相当于有了两次访问首页的记录。而IOS回退以后不会自动刷新,所以会出现白屏的问题。而安卓回退也自动刷新页面,这样的话安卓退出的时候会回到首页,再次退出才会退出应用。

解决过程

  1. index.js 未登录重定向用 location.replace 代替原先的 location.href 试图覆盖原来的 url,结果无效。原因在于我们 location.replace 的地址是一个 oathUrl,像 open.weixin.qq.com/xxx?appid=x… 这种形式,这里登录成功以后重定向由企业微信后台做。所以第一次访问记录变open.weixin.qq.com/xxx?appid=x… 而再次定向到首页以后又多了一个访问记录,所以无效。

  2. index.vue , mouted 中监听 popstate、pageshow 事件,试图白屏的时候重新刷新,但是根本不会执行,是因为白屏的时候根本不会执行到这些代码,所有都是无效的。

  3. 微信企业号入口直接用 oathUrl 而不是应用首页地址,这样就相当于刚刚开始就直接去企业微信后台登录,登录完成以后直接跳转到应用首页,这样前端页面访问的记录就只有一个,首页回退就可以直接退出页面。完美解决问题