写这篇博客的背景

临近节日，产品想给小程序首页头部设置图片背景，这个只能自定义导航栏来实现

当然除了自定义背景图，还可以放置其他组件，按钮、搜索框等

实践部分设备状态栏、胶囊、间距的高度（仅供参考）（单位px）

后续遇到其他设备再补充

文章目录

写这篇博客的背景实践部分设备状态栏、胶囊、间距的高度（仅供参考）（单位px） 步骤1.隐藏小程序自带的导航栏2.编写自定义导航栏3.如何使用 最近使用wx.getMenuButtonBoundingClientRect()，在ios端偶尔值全都是0，导致无法正确自定义导航栏高度

步骤

1.隐藏小程序自带的导航栏

小程序配置

// 1.全局配置// app.json{..."navigationStyle": "custom"...}// 2.页面配置// pages.json{..."navigationStyle": "custom"...}

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

2.编写自定义导航栏

导航栏的组成部分（主要是状态栏和标题栏）

1.状态栏（时间和电量显示那一栏）

+

2.状态栏和标题栏之间的间距

+

3.标题栏（小程序胶囊按钮那一栏）

+

4.标题栏和正文区域之间的间距

刘海屏

非刘海屏

计算各部分的高度

获取系统信息api获取状态栏高度

// 状态栏高度wx.getSystemInfoSync().statusBarHeight;

获取胶囊按钮信息api获取胶囊按钮的宽高和位置

/*** 获取微信小程序菜单栏(胶囊)信息* 菜单按键宽度：width* 菜单按键高度：height* 菜单按键上边界坐标：top* 菜单按键右边界坐标：right* 菜单按键下边界坐标：bottom* 菜单按键左边界坐标：left*/wx.getMenuButtonBoundingClientRect();> 重点: 此api返回的是胶囊按钮在页面中的的上下左右坐标的绝对位置> 注意：在模拟器使用时记得把视图百分比调为100%，否则可能会导致获取数据不准确

因为整个小程序的导航栏高度是不变的，我们可以把高度信息放在全局，方便使用。一般会在小程序的app.js（如果使用的uni-app，就是App.vue） 的onLaunch生命周期进行获取和计算。

//app.jsApp({onLaunch() {this.calcNavBarInfo()},globalData: {//全局数据管理navBarHeight: 0, // 导航栏高度menuBottom: 0, // 胶囊距底部间距（顶部间距也是这个）menuHeight: 0, // 胶囊高度},/*** @description 计算导航栏信息*/calcNavBarInfo () {// 获取系统信息const systemInfo = wx.getSystemInfoSync();// 胶囊按钮位置信息const menuButtonInfo = wx.getMenuButtonBoundingClientRect();// 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;// 状态栏和菜单按钮(标题栏)之间的间距// 等同于菜单按钮(标题栏)到正文之间的间距（胶囊上坐标位置-状态栏高度）this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;// 菜单按钮栏(标题栏)的高度this.globalData.menuHeight = menuButtonInfo.height;}})

到此各个部分的元素高度都已拿到, 而且是根据不同设备的屏幕信息动态设置，无论是刘海屏还是非刘海屏，安卓还是ios，样式皆可统一。

3.如何使用

<view class="nav" style="height:{{navBarHeight}}px; background: url();"><!-- 胶囊区域 --><view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBottom}}px;"><view class="nav-handle"><view class="back"><!-- 返回按钮 --><image src=""></image></view><view class="home"><!-- 首页按钮 --><image src=""></image></view></view><view class="nav-title">导航标题</view></view></view>// jsPage({data: {navBarHeight: getApp().globalData.navBarHeight,menuBottom: getApp().globalData.menuBotton,menuHeight: getApp().globalData.menuHeight }})// style// 导航栏.nav {position: relative;}// 胶囊栏.capsule-box {position: absolute;display: flex;align-items: center; // 标题文字和返回按钮竖向居中}// 标题文字.nav-title {height: 100%;width: 50%;// 标题栏横向居中margin: 0 auto; // 文字超出隐藏overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

最近使用wx.getMenuButtonBoundingClientRect()，在ios端偶尔值全都是0，导致无法正确自定义导航栏高度

想了一下，ios端的所有设备胶囊按钮信息都是一样的，android端各个品牌都或多或少的有差距，根据这个规律作如下改造：

我这边后期用的uni-app ，所以api都换成了uni

uni.getSystemInfo({success: res => {let menuButtonInfo = {}if (res.platform === 'ios') {// ios设备的胶囊按钮都是固定的menuButtonInfo = {width: 87,height: 32,left: res.screenWidth - 7 - 87,right: res.screenWidth - 7,top: res.statusBarHeight + 4,bottom: res.statusBarHeight + 4 + 32}} else {// 安卓通过api获取menuButtonInfo = uni.getMenuButtonBoundingClientRect()}console.log('获取胶囊信息：', menuButtonInfo);// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上未知-状态栏高度）* 2 + 胶囊高度 + 状态栏高度this.$options.globalData.navHeight = (menuButtonInfo.top - res.statusBarHeight) * 2 + menuButtonInfo.height + res.statusBarHeight;console.log('navHeight:', this.$options.globalData.navHeight);// 按钮上下边距高度this.$options.globalData.menuBottom = menuButtonInfo.top - res.statusBarHeight;// 导航栏右边到屏幕边缘的距离this.$options.globalData.menuRight = res.screenWidth - menuButtonInfo.right;// 导航栏高度this.$options.globalData.menuHeight = menuButtonInfo.height;},fail(err) {}})