微信小程序的自定义导航栏

微信小程序的导航栏主要分为两个部分：状态栏和标题栏。

关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度。

注意获取到的数值单位都是px。

首先要开启自定义导航栏和知道两个API：

开启导航栏：在当前页面的json文件中设置 “navigationStyle”:“custom” ，开启自定义导航栏。具体看小程序官网页面配置，链接。
API接口：
wx.getSystemInfoSync() 和 wx.getMenuButtonBoundingClientRect()，接下来开始计算状态栏和标题栏的高度。

先推荐一个比较懒的方法，仿照Vant Weapp 的NavBar 导航栏组件

Vant Weapp的NavBar导航栏的做法是把标题栏的高度写死了46px（看vant的代码得出的结果，如果错误请忽略），这样写的话细节部分差2px的高度，ios端多出2px，安卓端小了2px，这是简便的方法。

html部分
<view><view style="width:750rpx;height:{{statusBarHeight}}px"></view><view class="title" style="width:750rpx;height:{{titleHeight}}px">123</view>
</view>
----------------------------
css样式
.title{display: flex;align-items: center;justify-content: center;
}
----------------------------
js部分,代码写在了onload生命周期const systemInfo = wx.getSystemInfoSync();// 状态栏高度 let statusBarHeight = systemInfo.statusBarHeight// 标题栏高度let titleHeight = 46this.setData({statusBarHeight:statusBarHeight,titleHeight:titleHeight})

状态栏的高度

根据wx.getSystemInfoSync() 接口的返回值可以得到 statusBarHeight属性，statusBarHeight：状态栏的高度，单位px。

const systemInfo = wx.getSystemInfoSync();// 状态栏高度
let statusBarHeight = systemInfo.statusBarHeight

标题栏的高度

根据wx.getSystemInfoSync()API返回的数据，screenHeight -windowHeight - statusBarHeight = 标题栏的高度。注意：在开启自定义导航栏后，screenHeight 和 windowHeight 的值相同，如需测试关闭自定义导航栏。
方法一：如果小程序的第一个页面不是自定义导航页面，可以在 app.js的onLaunch方法中根据下列代码算出标题栏的高度，保存在globalData中，待自定义页面使用。（如果第一个页面不是自定义导航的话，推荐使用该方法）

let systemInfo = wx.getSystemInfoSync();// 标题栏高度
let titleHeight = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight

方法二：

方法二是有点不确定的方法，但思路是对的。标题栏的高度= 胶囊的高度 + 高度一 + 高度二。高度一和高度二在ios端是不相等，在安卓端好像是相等的，我在微信开发者工具的模拟器上，粗略的测量了下，得出的结论。具体看代码。

    // 获取到状态栏高度let systemInfo = wx.getSystemInfoSync();// 胶囊位置信息let menu = wx.getMenuButtonBoundingClientRect()// 状态栏高度 let statusBarHeight = systemInfo.statusBarHeight// 高度一let height_1 = menu.top - statusBarHeight// 胶囊高度let height_ = menu.height// 高度二let height_2 = 8// 标题栏高度let title_height = height_1 + height_ + height_2

高度二等于8的来源，这个高度二好像是固定8。测试方法：自己写一个不是自定义导航栏的页面。用以下代码来得到：

    // 获取到状态栏高度let systemInfo = wx.getSystemInfoSync();// 胶囊位置信息let menu = wx.getMenuButtonBoundingClientRect()// 导航栏的高度（标题栏+状态栏）let nav_height = systemInfo.screenHeight - systemInfo.windowHeight;// 高度二let height_2 = nav_height - menu.height - menu.topconsole.log(height_2); // 输出 8

以上全部代码均没有进行真机测试，都是在微信开发工具的模拟器中进行的。
可能写的比较乱，有错误的地方可以评论指正，也可以去微信开放社区搜索 ’自定义导航栏‘ ，查看别的大佬写的自定义导航栏。