UniApp H5 在第三方内嵌浏览器双导航栏问题【前端随笔】

问题

UniApp 生成 H5 页面时，默认带导航栏，在手机浏览器浏览时没有问题，但一旦到微信微博等第三方App内嵌浏览器浏览时，可能会出现双导航栏问题。

解决方案

方案一：自定义导航栏

根据业务需要取消默认导航栏，自定义导航栏。
可能出现用户分享中间页面，无法返回首页等问题。

UniApp 导航栏设置，自定义导航栏可借助第三方导航栏组件等。

navigationStyle 属性，可单独页面设置，也可全局设置；

default: 默认值，使用默认导航栏；
custom: 取消默认导航栏；

官方文档：自定义导航栏使用注意

pages.json

{
  "pages": [{
    "path": "pages/example/example",
    "style": {
      "navigationStyle": "custom"
    }
  }],
  "globalStyle": {
    "navigationStyle": "custom"
  }
}

方案二：H5端隐藏导航栏

方案一中隐藏导航栏会影响到小程序端，只隐藏H5端的话，可通过样式设置 uni-page-head 标签 display: none;；

全局隐藏：App.vue 或 uni.scss 中设置如下样式；
局部隐藏：对应页面设置如下样式；

/* #ifndef H5 */
uni-page-head {
  display: none
}
/* #endif */

方案三：只隐藏内嵌浏览器导航栏

如果想要保留小程序端、H5浏览器导航栏，只隐藏内嵌浏览器的导航栏呢？

解决思路：通过判断内嵌浏览器 userAgent ，手动添加样式隐藏导航栏；主流App内嵌浏览器 UserAgent；

全局隐藏：App.vue 中的 soShow 钩子中添加判断隐藏代码；

// App.vue
export defalut {
  onShow: function() {
    // #ifdef H5
    // 微信、微博等h5隐藏导航栏
    let ua = navigator.userAgent.toLowerCase()
    let isWebView = /micromessenger|weibo|bytedance|zhihu|qq/gi.test(ua)
    if (isWebView) {
      const style = document.createElement('style')
      style.innerHTML = 'uni-page-head {display: none;}'
      document.head.appendChild(style)
    }
    // #endif
  }
}

局部隐藏：组件 mounted 钩子中设置 uni-page-head 隐藏；

// xxx.vue
export defalut {
  mounted() {
    // #ifdef H5
    // 微信、微博等h5隐藏导航栏
    let ua = navigator.userAgent.toLowerCase()
    let isWebView = /micromessenger|weibo|bytedance|zhihu|qq/gi.test(ua)
    if (isWebView) {
      document.getElementsByTagName('uni-page-head')[0].style.display = 'none'
    }
    // #endif
  }
}

完整示例

方案三中可能出现的问题：

组件内部出现 position: fixed; 绝对定位到顶部，导航栏遮盖问题；
用户分享中间页面，没有原生导航栏会无法返回到首页；

解决思路：

为 body 添加浏览器ua标识，通过标识添加独立样式；
利用 history.pushState 修改历史记录，即可通过浏览器自身返回首页；

完整示例：

全局设置默认导航栏，第三方App内嵌浏览器隐藏导航栏，小程序和h5浏览器不影响；
可通过标识设置不同样式；
中间页进入可通过内嵌浏览器自带返回按钮返回首页；

// App.vue
export defalut {
  onShow: function() {
    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase()
    let isWebView = /micromessenger|weibo|bytedance|zhihu|qq/gi.test(ua)
    if (isWebView) {
      // 微信、微博等h5隐藏导航栏
      const style = document.createElement('style')
      style.innerHTML = 'uni-page-head {display: none;}'
      document.head.appendChild(style)

      // 内嵌浏览器 body添加 ua=webview 标识
      document.body.setAttribute('ua', 'webview')

      // 隐藏了导航栏，非首页添加历史记录用于返回首页
      let hash = location.hash || '#/'
      if (hash !== '#/') {
        history.pushState({}, '', '#/')
        history.pushState({}, '', hash)
      }
      
    } else {
      // 手机浏览器 body添加 ua=browser 标识
      document.body.setAttribute('ua', 'browser')
    }
    // #endif
  }
}

假设页面内有 postion: fixed; 绝对定位顶部的内容，这时手机浏览器有导航栏，需要设置 top: 44px;（uniApp默认导航栏高度 44px），否则会被 uniapp 默认导航栏遮盖；利用上述的 ua 标识来设置独立样式；

<style lang="scss" scoped>
.header-wrap {
  position: fixed;
  top: 0;
}

/* #ifdef H5 */
body[ua='browser'] {
  .header-wrap {
    top: 44px;
  }
}
/* #endif */
</style>

效果

博主开发的聚会游戏助手应用【游趣街】，已发布小程序和H5；

H5：预览地址（通过手机浏览器，微信浏览器查看就能看出效果了）

扩展：UserAgent

User-Agent 首部包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。MDN-UserAgent。

电脑浏览器

Safari

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Chrome for macOS

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Chrome for Window

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.82 Safari/537.36

Edge for window

Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36 Edg/98.0.1108.50

手机浏览器

移动端浏览器一般带有 Mobile 标识；

Safari

Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Mobile/15E148 Safari/604.1

Chrome for iOS

Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1

主流App内嵌浏览器UserAgent

判断是否为内嵌浏览器：

function isWebView() {
  const ua = navigator.userAgent
  return /MicroMessenger|QQ|Weibo|DingTalk/gi.test(ua)
}

微信

Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.32(0x18002038) NetType/WIFI Language/zh_CN

QQ

Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 QQ/8.9.5.618 V1_IPH_SQ_8.9.5_1_APP_A Pixel/1284 MiniAppEnable SimpleUISwitch/0 StudyMode/0 CurrentMode/0 CurrentFontScale/1.000000 QQTheme/1000 AppId/537128971 Core/WKWebView Device/Apple(iPhone 13 Pro Max) NetType/WIFI QBWebViewType/1 WKType/1

微博

Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Weibo (iPhone14,3__weibo__12.8.2__iphone__os15.5)

钉钉

Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 AliApp(DingTalk/5.1.2) com.laiwang.DingTalk/13160052 Channel/201200 language/zh-Hans-CN UT4Aplus/0.0.6 WK