背景 微信小程序默认提供了一个标准的导航栏，但有些时候我们需要自定义导航栏来中集成搜索框、自定义背景图、返回首页按钮等功能，来满足业务需求。 基本配置 首先在app.json（page.json）中配

开发过程中，总会遇到ui给出的风格迥异的导航栏。微信自带的设置无法满足需求，所以我们需要自定义导航栏。

在src上添加如下文件夹 app.config.ts: index.config.ts: index.scss: index.tsx: common.ts: 结果： 企业微信端（B端） 微信端（C端）

要实现这样的导航条就得兼容所有设备得导航条。主要使用到两个api: getSystemInfoSync()，getMenuButtonBoundingClientRect

说明：小程序自定义头部导航需计算不同机型导航的高度。 说明：计算出各个尺寸之后，我们需要搭组件的架子。 说明：这里padding-top是用于可能需要设计到导航背景颜色的，如果是margin-top的话，设置背景颜色，顶部部分会没有颜色。 PS：下面会有一些简单案例，具体细节需…