企业官网建设流程全解析

做微信小程序开发，迟早会碰上一个绕不开的需求：默认导航栏不够用，得自己画一个顶栏。这个自定义顶部组件customHeader，就是为了解决这个问题的。平时用系统自带的导航栏，样式被卡得死死的，背景色只能从预设的几个值里挑，也没法在右上角塞自定义按钮。而很多页面的设计稿，第一个元素就是一张通顶大图或者渐变色块，系统导航栏怼在上面，视觉上直接断成两截，丑得没眼看。自己写一个customHeader组件，把导航栏高度、状态栏高度、胶囊按钮位置这些系统信息动态算出来，再配合模板和样式，就能做出完全贴合设计稿的顶栏。

这个组件适合谁？如果你正在做的小程序需要统一视觉风格、有多个页面要用到沉浸式头部、或者想在导航栏里加入自定义操作按钮，那这篇文章里讲的方案可以直接拿去用。我会把尺寸计算逻辑、组件代码实现、页面接入方法、以及我踩过的各种机型适配的坑，全部整理出来。

1. 为什么需要自定义顶部导航栏

1.1 默认导航栏的三个硬伤

微信小程序的默认导航栏，老实说，只适合"能用就行"的项目。它最大的问题，第一是背景色和文字颜色能配置的选项太少，背景色只能从白、黑那一小撮颜色里选，想要一个品牌色的顶栏，默认配置根本给不了；第二是导航栏区域只能显示标题和胶囊按钮，你想在右上角放一个"扫一扫"或者"消息"的图标，系统导航栏直接不支持，只能另想办法；第三也是最致命的一点，默认导航栏底下是固定的，没法跟页面内容做视觉上的融合。

举个最常见的例子：首页顶部是一个通栏轮播图，设计稿希望图片顶到屏幕最上沿，标题和返回按钮浮在图片上面。这种沉浸式头部用默认导航栏就没法实现，因为你只能看到一整块系统蓝底或者白底横在屏幕上。要打破这个限制，唯一的路就是让页面自己去接管顶部这块区域，也就是把导航栏变成自定义组件，放在自己的页面上，想怎么摆就怎么摆。

1.2 自定义导航栏到底要解决哪些问题

想接管顶部区域，不是简单地在页面json里写一行"navigationStyle": "custom"就完事。配置一改，系统导航栏确实消失了，但问题也来了：你的页面内容会直接冲进状态栏底下，标题文字和状态栏的时间、电量叠在一起。这时候要做的事就变成：

• 状态栏的高度是多少，得用 API 拿真实值，不能靠猜。
• 右上角胶囊按钮的位置在哪儿，组件里的内容必须避开它，不然就会被挡住。
• 整个导航栏的高度要随状态栏高度和胶囊上下间距动态变化，不同机型不能出现标题忽高忽低的情况。

这些算清楚了，导航栏才能在各种机型、各种刘海屏、各种 Android 厂商 ROM 上看起来一致。不然你的页面在一台测试机上好好的，换个手机标题就跑偏了。自定义 top bar 的本质，是把系统黑盒变成你自己的可控区域，而前提是你要理解系统给你的那几个尺寸参数。

2. 组件设计：先理清四个核心尺寸

2.1 状态栏高度是用 API 取的，不是写死的

聊到自定义导航栏，绕不开的第一个尺寸就是状态栏高度。状态栏就是屏幕最上面显示时间、信号、电量那条。不同手机这个高度差异很大，普通 iPhone 大约是 20pt，有刘海的 iPhone 是 44pt 左右，而 Android 机就更乱了，有的 24、有的 30，还有的折叠屏展开之后状态栏高度会变。

第一次做自定义导航栏的人最容易踩的坑，就是把这个值写死成 44。在个别机型上碰巧对了，换个手机就完蛋。正确做法是通过 API 实时取。在微信小程序里，最常用的方式是：

const { statusBarHeight } = wx.getWindowInfo();

wx.getWindowInfo()是基础库比较新的接口，能直接拿到窗口信息，里面就有状态栏高度。如果你还要兼容特别老的基础库，可以退回去用wx.getSystemInfoSync()，它返回的字段里同样有statusBarHeight，只是这个接口本身已经被标记为不推荐了。实际开发中，我建议优先用新接口，只在遇到兼容性问题时才降级。

无论哪个接口，拿到的状态栏高度单位都是 px，这一点后面计算的时候会用到。

2.2 胶囊按钮才是整个导航栏的参考系

自定义导航栏最容易忽略的，是右上角那个胶囊按钮，也就是"···"和"○"那一组。你算导航栏高度的时候，不能只看状态栏，因为胶囊按钮本身的高度、它距离状态栏的间距，才是系统定义的标准导航栏高度的真正来源。

微信专门提供了一个接口给开发者取胶囊按钮的位置信息：

const menuButton = wx.getMenuButtonBoundingClientRect();

这个方法返回一个对象，包含top、bottom、left、right、width、height这些字段。width和height是胶囊本身的尺寸，top是胶囊上边缘到屏幕顶部的距离。

这里有一个非常关键的认知：系统默认导航栏的高度，并不是"状态栏高度 + 固定值"，而是"状态栏高度 + 胶囊按钮高度 + 上下间距"。胶囊的上边缘到状态栏底部的距离，就是导航栏给胶囊预留的上下 padding。你把导航栏的高度做成跟系统默认一致，体验上才不会有割裂感。不然标题和胶囊不在一条水平线的中间，看着就难受。

2.3 导航栏高度的计算公式

根据上面的两个数据，我们可以推导出一个可靠的计算公式。假设状态栏高度是statusBarHeight，胶囊按钮的信息是menuButton，那么：

• 胶囊上边缘距屏幕顶部的距离是menuButton.top
• 胶囊上边缘与状态栏底部的间距gap = menuButton.top - statusBarHeight
• 导航栏内容区域（标题所在区域）的高度，一般取值是gap * 2 + menuButton.height，也就是上间距、胶囊高度、下间距（通常上下间距是对称的）
• 整个导航栏总高度 =statusBarHeight + gap * 2 + menuButton.height

举个例子，某台 Android 真机上用 API 取到的数据可能是：statusBarHeight = 24，menuButton.top = 32，menuButton.height = 40。那gap = 32 - 24 = 8，导航栏内容区高度 = 8 + 40 + 8 = 56，导航栏总高度 = 24 + 56 = 80。这些数字都是动态计算的，换个机型也能自动适配。

注意：这个公式里的gap不一定是整数，有的机型会出现 7.5 或者 8.5 的小数，计算时保留小数值就行，渲染的时候再用Math.ceil或Math.round取整，避免出现半个像素的模糊线。

2.4 px 和 rpx 怎么配合使用

确定了导航栏的高度，接下来要考虑布局单位的问题。rpx 是微信小程序里的自适应单位，按屏幕宽度 750rpx 换算，很省心。但在自定义导航栏这件事上，我强烈建议"混合使用"：

• 状态栏高度、导航栏高度、胶囊尺寸以及所有跟系统对齐的间距，必须用 px。因为这些值来自 API，本来就是 px 单位的真实像素值，转成 rpx 反而会有精度丢失。
• 导航栏内部的标题字号、按钮图标大小、左右 padding 这类跟视觉比例有关的值，可以用 rpx，也可以直接写 px，看团队习惯。

为什么强调这一点？因为自定义导航栏的目标不是"看起来差不多"，而是"跟系统原生胶囊按钮严丝合缝地对齐"。你组件里的标题区域，左边界要避开返回按钮和胶囊，右边界要避开胶囊左侧区域，一旦用 rpx 去换算，不同屏幕宽度下很容易出现几个像素的偏移，看起来就像没对齐。

3. 核心实现：从计算到渲染的完整代码

3.1 组件目录结构与基础配置

先搭一个标准组件目录。一般一个自定义导航栏会单独建一个文件夹，比如components/custom-header，里面放custom-header.js、custom-header.json、custom-header.wxml、custom-header.wxss四个文件。

页面那边，先改页面的 json 配置，这一步非常关键，很多人忘了：

{ "navigationStyle": "custom", "usingComponents": { "custom-header": "/components/custom-header/custom-header" } }

navigationStyle设为custom后，系统导航栏就不渲染了，整个顶部区域交给你自己。注意这个配置只对当前页面生效，每个页面都要单独设置。如果你有十几个页面都要用自定义导航栏，那就每个页面的 json 里都写一遍，没有全局开关。

组件的 json 文件里需要这么写：

{ "component": true }

这样微信才知道这是一个组件，不是页面。

3.2 组件 JS 里的核心计算逻辑

组件的 JavaScript 部分，最关键的就是在组件实例化的时候拿到系统信息并计算导航栏尺寸。这里要注意一点：wx.getWindowInfo()和wx.getMenuButtonBoundingClientRect()是同步方法，直接在attached生命周期里调用即可。

Component({ options: { multipleSlots: true }, properties: { title: { type: String, value: '' }, background: { type: String, value: '#ffffff' }, color: { type: String, value: '#000000' }, showBack: { type: Boolean, value: true } }, data: { statusBarHeight: 20, navBarHeight: 44, menuButtonWidth: 87, titleLeft: 0, titleRight: 0 }, lifetimes: { attached() { this.calculateNavBar(); } }, methods: { calculateNavBar() { const windowInfo = wx.getWindowInfo(); const menuButton = wx.getMenuButtonBoundingClientRect(); const statusBarHeight = windowInfo.statusBarHeight; const gap = menuButton.top - statusBarHeight; const navBarHeight = statusBarHeight + gap * 2 + menuButton.height; const titleLeft = 16; const titleRight = menuButton.width + 2 * 8; // titleRight 预留胶囊宽度 + 右侧间距，避免标题被遮挡 this.setData({ statusBarHeight, navBarHeight, menuButtonWidth: menuButton.width, titleLeft, titleRight }); }, onBack() { const pages = getCurrentPages(); if (pages.length > 1) { wx.navigateBack(); } else { wx.switchTab({ url: '/pages/index/index' }); } } } });

这段代码里有几个细节值得展开说。

第一，gap = menuButton.top - statusBarHeight，这个值表示胶囊按钮距离状态栏底部的距离，一般就是 8px 上下。把它算出来，导航栏高度就有了可靠来源。

第二，titleLeft和titleRight是用来约束标题可显示区域的。因为标题不能跑到胶囊按钮底下去，所以右侧必须留出足够空间。我这里的titleRight算的是"胶囊宽度 + 胶囊两侧 margin"，实际上胶囊本身右侧还有一个固定的安全间距，直接加上去就行。左侧一般是 16px，如果有返回按钮，就再加一个返回按钮的宽度。

第三，getCurrentPages()判断页面栈长度。只有当页面栈深度大于 1 时才显示返回按钮并执行navigateBack。如果你把这个组件用在 tab 页面，页面栈长度会是 1，这时候返回逻辑就应该改成跳转首页或者隐藏按钮。这就是为什么showBack属性也要暴露给外部控制。

3.3 组件模板与样式关键点

WXML 部分的结构并不复杂，关键在于 fixed 定位的容器要放对层级，同时处理好状态栏占位：

<view class="custom-header" style="background: {{background}}; padding-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;"> <view class="nav-header" style="height: {{navBarHeight - statusBarHeight}}px;"> <view class="nav-header-left" style="width: {{titleLeft}}px;"> <view wx:if="{{showBack}}" class="nav-back" bindtap="onBack"> <text class="nav-back-icon">‹</text> </view> </view> <view class="nav-header-title" style="left: {{titleLeft}}px; right: {{titleRight}}px; color: {{color}};">{{title}}</view> <view class="nav-header-right" style="width: {{titleRight}}px;"></view> </view> </view>

这套模板的思路是：整个导航栏用 fixed 定位贴在顶部，外部容器的高度是navBarHeight，再用padding-top把状态栏区域撑开。里面的nav-header是真正的内容区域，高度是navBarHeight - statusBarHeight，也就是状态栏底下到胶囊底部这块。标题用绝对定位，左右边界分别由titleLeft和titleRight控制，确保不会被返回按钮和胶囊遮挡。

对应的 WXSS 如下：

.custom-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; box-sizing: border-box; } .nav-header { position: relative; display: flex; align-items: center; } .nav-header-left { display: flex; align-items: center; padding-left: 16px; box-sizing: border-box; } .nav-header-title { position: absolute; top: 50%; transform: translateY(-50%); font-size: 32rpx; font-weight: 500; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-header-right { margin-left: auto; }

提示：组件最外层用了position: fixed，但实际上它固定在哪个容器下面是由 page 决定的。自定义导航栏的组件一般放在页面 WXML 的第一行，这样才能保证它盖在页面内容之上。

标题要居中又不被两边元素遮挡，用position: absolute加left、right约束是最稳妥的。你也可以改造成 flex 三栏布局，但那种方式在标题文字过长时不好处理 ellipsis。绝对定位的方案，标题区域边界明确，超长就变成省略号，不会跟左右按钮抢空间。

3.4 页面接入示例

页面里怎么用这个组件，就很简单了：

<custom-header title="我的页面" background="#3b7cff" color="#ffffff" showBack="{{true}}" />

如果页面头部有大图，想做成沉浸式的，可以把导航栏背景调成透明，在页面合适的位置放图片。比如首页：

<custom-header title="" background="transparent" color="#ffffff" showBack="{{false}}" /> <view class="banner"> <image src="/images/banner.png" mode="aspectFill" /> </view>

这时候导航栏是透明的，背景的 banner 会自然从导航栏下面透出来。用户往下滑动后如果希望导航栏变成实色，可以在页面的onPageScroll里动态修改传给组件的background属性，我后面第 4 节会专门讲这个。

4. 接入方式与参数配置

4.1 属性设计：怎么把组件做得更通用

一个组件如果只能显示一行标题，那其实没必要单独封装。做 customHeader 的时候，我建议至少预留这几个外部属性：

除了属性，还要考虑插槽。比如你想在导航栏右边放一个"发布"按钮，直接在组件里预留一个slot就行。在 WXML 里加：

<view class="nav-header-right-slot"> <slot name="right"></slot> </view>

这样外部页面就能把任意内容塞进导航栏右侧，比如一个自定义图标按钮、一个带红点的消息入口。插槽的好处是组件本身不需要预先定义太多按钮类型，把控制权交给使用者，灵活性直接拉满。

4.2 背景透明到实色的滚动切换

很多页面喜欢一开始导航栏透明、往下滚一段后变成有背景色，这个效果在自定义导航栏里做起来很直接。页面监听onPageScroll，拿到scrollTop，动态设置传给组件的背景色和文字颜色。

Page({ data: { navBackground: 'transparent', navTextColor: '#ffffff' }, onPageScroll(e) { const scrollTop = e.scrollTop; if (scrollTop > 50) { this.setData({ navBackground: '#ffffff', navTextColor: '#000000' }); } else { this.setData({ navBackground: 'transparent', navTextColor: '#ffffff' }); } } });

组件内部其实不用改太多，只需要把背景和颜色作为属性暴露出来，外面直接 setData 即可。这个方案有两点要注意：

一是onPageScroll触发频率非常高，如果页面性能不好，背景切换会出现肉眼可见的卡顿。建议在外面做一次节流，或者在scrollTop跨过阈值之后只在状态变化时设一次值，不要每次都调用setData。

二是如果你对滚动过渡动画有要求，可以在组件的 WXSS 里给背景色加一个transition: background 0.2s ease，这样色值变化的时候会有一个平滑的过渡效果，观感会好很多。实测下来，微信小程序里给背景色加 CSS transition 是有效的，不用担心兼容问题。

4.3 多实例复用：缓存系统信息别重复计算

在一个小程序项目里，customHeader 组件往往会被几十个页面引用。如果每个页面进入的时候都去调wx.getWindowInfo()和wx.getMenuButtonBoundingClientRect()，虽然数据量不大，但也算是无意义的重复开销。

更好的做法是做一个模块级别的缓存。比如在custom-header.js外面定义一个文件作用域的变量，存一份导航栏尺寸数据：

let navBarCache = null; function getNavBarInfo() { if (navBarCache) return navBarCache; const windowInfo = wx.getWindowInfo(); const menuButton = wx.getMenuButtonBoundingClientRect(); // ... 计算 navBarCache = { statusBarHeight, navBarHeight, titleRight }; return navBarCache; }

组件attached的时候调getNavBarInfo()，第二次进入组件直接命中缓存，连 API 都不用再调。页面切到后台再回来，状态栏高度一般不会变，所以缓存基本是安全的。如果你遇到部分 Android 机型折叠屏展开导致状态栏高度变化的问题，可以在页面onShow里监听一次wx.onWindowResize并重置缓存，不过大多数项目用不到这个复杂度。

5. 常见问题与调试心得

5.1 常见问题速查表

我把做这个组件过程中遇到过的典型问题整理成了一个表格，信息的密度比较高，建议直接收藏：

5.2 真机与开发者工具不一致问题

开发者工具的顶部会有一个模拟的胶囊按钮，但它的位置和真机不完全一致，尤其在 Android 模拟环境下偏差更大。有些开发者只盯着开发者工具调试，把标题位置调到工具里完美居中，一到真机就偏移了。

这是我建议的调试流程：先不管工具的观感，把导航栏尺寸全部用 API 拿到的真实值去算，然后在 iPhone 和 Android 真机上各看一遍。特别是 Android，有条件的话多找几台不同厂商的手机，因为各家对状态栏高度和导航栏间距的处理逻辑不完全一样。以我的经验，HarmonyOS 手机和部分国产 ROM 的胶囊间距会出现 1~2px 的偏差，这点很难完全消除，但控制在 3px 以内视觉上基本无感。

5.3 下拉刷新与滚动切换背景的冲突

自定义导航栏使用 fixed 定位后，页面本身的下拉刷新行为是正常的，但如果你在导航栏上设置了background: transparent，下拉橡皮筋效果出现的时候，页面内容会从导航栏底下透过去，视觉上很突兀。

解决办法是分场景处理。如果页面需要下拉刷新且导航栏是透明的，就不太适合用系统自带的下拉刷新能力，需要自己在页面上做一层遮罩处理。大多数情况下，需要透明导航栏的页面（比如首页）本身就不开下拉刷新，需要下拉刷新的列表页面导航栏通常已经是实色背景，这两个场景其实很少冲突。真遇到特殊情况，可以监听onPullDownRefresh，在刷新开始和结束时临时把导航栏背景改成实色，效果也不错。

5.4 横屏与安全区适配

微信小程序支持横屏后，自定义导航栏的处理要更谨慎。横屏时状态栏一般不存在，statusBarHeight可能变成 0，而胶囊按钮会重新定位到屏幕右侧。这种情况下，组件的 fixed 定位和高度计算如果还按竖屏的逻辑，就会出现导航栏太矮、标题位置错乱的问题。

我的建议是：如果你的页面需要支持横屏，组件里加一个屏幕方向判断，通过wx.onWindowResize监听窗口变化，动态重新计算导航栏尺寸。如果页面只做竖屏，直接在小程序全局或页面的 json 里限制"pageOrientation": "portrait"，省掉一堆适配工作。个人经验是，非必要不上横屏，上了横屏就要有专门的设计稿，否则成本很高。

6. 再分享一点实际开发的经验

最后从实践角度聊几点体会。

第一，封装自定义导航栏的时候，一定要预留足够的扩展空间。我最早做的版本只支持标题文字，后来项目加了右侧按钮、透明背景切换、首页返回逻辑，每次都要改组件内部。后来重构成属性加插槽的模式，新需求基本不用动组件代码。所以从一开始就把background、color、插槽这些做进去，看起来多写了一点代码，长期看是划算的。

第二，多写几个测试页面出来验证，效果完全不一样。可以专门建一个pages/dev/nav页面，把不同机型的尺寸数据直接展示在界面上，比如状态栏高度、胶囊高度、计算出的导航栏高度，调试的时候一眼就能看出哪个值异常。组件写完之后，花半天时间把真机适配跑一遍，后面整个项目的页面就都不用再操心这个问题了。

第三，自定义导航栏不是用了就完事，还要考虑返回逻辑与页面栈的配合。小程序里wx.navigateBack只能往上退，如果用户是从分享链接直接进到二级页面的，页面栈深度为 1，这时候返回按钮应该跳转首页而不是退回去。这个逻辑一定要在组件里做好兜底。

微信小程序把系统导航栏收回去之后，顶部区域就成了你的画板，但前提是你得把尺寸逻辑摸透。这篇文章里写的公式和代码都是我实际项目里跑过的方案，照着做能少走不少弯路。如果后面遇到更特殊的机型适配问题，不妨先检查一下是不是尺寸计算的数据来源出了问题，再看样式层有没有被覆盖，大部分问题都出在这两步。