uniapp中隐藏H5端在微信浏览器中打开时的顶部导航

uniapp里面开发的H5页面，当页面顶部有导航的时候，在一般的浏览器里面打开没有什么问题，但是在微信浏览器里面打开的时候，就会出现多一个导航栏的情况，很丑，下面就简单介绍一下如何在微信浏览器环境下去除导航栏。

微信浏览器中打开的样子

一、新增公共方法

//判断浏览器是否是微信浏览器
export const checkIsWechatBrowser = () => {
  return (
    navigator.userAgent.toLowerCase().match(/MicroMessenger/i) ==
    "micromessenger"
  );
};

//微信浏览器中打开H5隐藏顶部导航方法
export const hidePageNavInWechatBrowser = () => {
  //#ifdef H5
  if (checkIsWechatBrowser()) {
    let pageNav = document.getElementsByTagName("uni-page-head");
    if (pageNav && pageNav[0]) {
      pageNav[0].style.display = "none";
    }
  }
  //#endif
};

二、在有需要的页面调用隐藏方法

在onReady周期函数中调用（经过测试onReady是页面渲染之后会调用，在其他周期函数中使用，有可能页面还没渲染完成，就不能操作顶部的dom）

onReady() {
    //微信浏览器环境下隐藏导航
    this.$sys.hidePageNavInWechatBrowser();
}