新版微信页面底部导航问题

Posted 2022-02-17 前端e站

在移动端开发微信页面的过程中，出现这样一个问题  

自己定好的底部导航栏下面会多出一行微信自带的底部返回栏，影响我们原型的体验，就需要对此做出优化；

首先明确问题所在

通过查询发现底部返回栏的机制是：页面出现跳转的时候会出现、页面向下滚动时会做隐藏；

解决问题

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

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

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()
  
)

    2.使页面可以向下滚动

     注意replace()带来的问题,当你使用replace()时,浏览器没有历史记录

• 如果你不需要,那么恭喜你不用继续看下去了
• 如果你很不幸,你需要历史记录,那么也存在两种场景

    2.1 微信浏览时不需要

    判断是否微信浏览,如果是就进行replace()

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

    2.2 微信浏览时需要

• 自己实现一个历史记录数组,每次replace()时存入记录