1、引言当涉及微信小程序的界面设计时，我们常常会发现自带的导航栏功能相对简单，仅限于显示当前页面的标题。然而，在实际开发过程中，我们往往需要更多的自由度和个性化，以满足用户体验的需求。因此，自定义导航栏成为必然选择。通过自定义导航栏，我们可以赋予小程序更多的设计灵活性和交互性，不再受限于传统的简单导航功能，更能突显个性化的特色，提升用户的整体体验感受。在本文中，我们将深入探讨如何实现自定义导航栏，并解释其对于微信小程序开发的重要性和实际应用的价值。此文章以uniapp+pinia演示。 如下：微信自定义的导航栏比较简单 [图片] 看看滴滴出行，选择在导航栏部署选择城市、扫一扫等工具。 [图片] 2、实现步骤1、pinia创建deviceStore作为全局存储空间存储设备信息state中保存三个数据：statusBarHeight、menuButtonInfo、navBarHeight。 2、定义一个component当作自定义导航栏（我的叫做 HeadNav），在用到自定义导航栏的页面会使用这个组件在这个组件里此处判断storage中是否有statusBarHeight、navBarHeight两个数据，没有则执行pinia中的方法deviceStore.getInfo()获取设备信息。 3、获取到手机状态栏的高度，胶囊宽高计算出状态栏与胶囊按钮中的空隙，保存至缓存const statusBarHeight = (uni.getStorageSync('statusBarHeight')|| ref({}))//手机状态栏的高度，这个状态来就是手机顶部的电量啊，信号这些区域的高度，如果是刘海屏，它还会包含刘海屏的高度 const menuButtonInfo = ref({})//胶囊信息,就是微信小程序自带的那个有关闭，分享按钮的胶囊。 const navBarHeight = (uni.getStorageSync('navBarHeight')|| ref({}))//状态栏与胶囊按钮中的空隙 //缓存中没有的话就执行下面方法： statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight menuButtonInfo.value = uni.getMenuButtonBoundingClientRect() //然后计算出navBarHeight navBarHeight.value = (menuButtonInfo.value.bottom - statusBarHeight.value) + (menuButtonInfo.value.top - statusBarHeight.value) //状态栏与胶囊按钮中的空隙 4、设置允许自定义状态栏，uniapp中在pages.json里面设置，微信小程序原生开发是在app.json（全局设置）或index.json（页面设置）"path" : "ChatDetail/ChatDetail", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false, "navigationStyle": "custom" } } 5、进入刚刚新建的component里进行状态栏占位，高度是手机状态栏的高度。6、创建真正的导航栏内容，并给一个初始高度防止黏在状态站位栏，这个高度是状态栏与胶囊按钮中的空隙。<!-- 状态栏占位 --> <view :style="{height:deviceStore.statusBarHeight+'px'}"></view> <!-- 真正的导航栏内容 ，请按照自己的需求自行定义--> <view :style="{height:deviceStore.navBarHeight+'px'}" class="nav"> <uni-icons type="back" size="30" class="nav-back" @click="goBackIndex"></uni-icons> <image :src="avatar" class="nav-avatar" @click="gotoOthersInfo"></image> <text class="nav-name" @click="gotoOthersInfo">{{nickname}}</text> </view> </view> ​