解决新版微信底部返回栏问题

问题

微信更新后，新加的文章缩小浮窗功能很赞。
不过，有一处更新让我吐槽了半天，就是在iPhone上WebApp页面底部多了一个白色的前进后退控制栏，即下图底部的返回栏

日了狗了的扯蛋底部返回栏.jpg

问题所在

通过搜索发现底部返回栏的机制是

• 页面出现跳转时出现
• 页面向下滚动时隐藏

出现状态如下图

出现底部返回栏.gif

解决办法

针对上面的机制，对应两种办法去隐藏底部返回栏

1. 已知是跳转出现，那我们就对跳转进行拦截,让所有的跳转使用 replace()

• 使用原生JS

location.replace(URL)

• 如果你使用vue-router

let toURL = null
router.beforeEach((to, from, next) => {
  if (toURL === to.path) {
    next()
  }
  if (to.path !== from.path) {
    toURL = to.path
    router.replace(to.path)
    next()
  }
})

成功隐藏底部返回栏.gif

2. 使页面可以向下滚动

注意replace()带来的问题

当你使用replace()时,浏览器没有历史记录

• 如果你不需要,那么恭喜你不用继续看下去了
• 如果你很不幸,你需要历史记录,那么也存在两种场景
  • 微信浏览时不需要
    • 判断是否微信浏览,如果是就进行replace()

      let isWeiXin= window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'
      

  • 微信浏览时需要
    • 自己实现一个历史记录数组,每次replace()时存入记录