写这篇博客的背景

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

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

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

	状态栏	胶囊	上下间距	整个导航栏高度
iPhone 5	20	32	4	60
iPhone 6/7/8	20	32	4	60
iPhone 6/7/8 Plus	20	32	4	60
iPhone X/XR/XS	44	32	4	84
小米6 （非刘海）	24	29	7	67
华为 nova 7 Pro（刘海）	42	29	7	85

后续遇到其他设备再补充

文章目录

- - 写这篇博客的背景
  - 实践部分设备状态栏、胶囊、间距的高度（仅供参考）（单位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.js
App({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>// js
Page({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) {}})

微信小程序自定义导航栏完整适配方案相关推荐

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏兼容适配所有机型
目前小程序已在前端占了一席之地,最近公司项目上用的就是小程序开发,由于功能及页面不是很多,所以直接原生开发,毕竟坑可能会少点,在开发过程中,小程序自带导航栏和客户的设计稿导航栏排在一起,感觉很别扭,因 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序自定义导航栏如何实现（简洁版）~内附代码
先来张效果图实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...

微信小程序自定义导航栏完整适配方案