必须关闭原生导航栏（navigationstyle: "custom"）才能自定义插入logo图片，需在pages.json单页配置、用var(--status-bar-height)适配状态栏、图片用本地绝对路径且尺寸合规、绑定@click事件实现跳转并处理平台差异。
导航栏加 Logo 必须关掉原生 navigationStyle=custom
uni-app 的原生导航栏（navigationStyle: "default"）不支持插入图片，只接受文字标题和字体图标按钮。想放公司 Logo 图片，第一步就是彻底关闭它——否则所有自定义 DOM 都会被遮挡或忽略。
在 pages.json 中设置：
{
"path": "pages/home/home",
"style": {
"navigationStyle": "custom"
}
}
注意：别只改 globalStyle，某些页面可能被单独覆盖；建议先单页测试，确认生效再推全局。
自定义导航栏里用 <image></image> 放 Logo，但得处理状态栏高度
关掉原生导航后，你得自己画一个顶部区域。Logo 通常放在左侧或居中，但必须避开 iPhone 刘海、安卓状态栏——直接写死 top: 0 会压进状态栏里。
推荐做法：
- 用 uni-app 提供的 CSS 变量
var(--status-bar-height)占位，确保内容从安全区开始 -
<image></image>设置固定宽高（如40rpx），并用vertical-align: middle对齐文字 - 若需适配深色模式，避免用 PNG 白底图，优先选透明背景 + 纯色描边或使用
@media (prefers-color-scheme: dark)
示例结构：
<view class="custom-nav"><view class="status-bar"></view><view class="nav-content"><image class="logo" src="/static/logo.png" mode="widthFix"></image><text class="title">首页</text></view></view>
小程序端 Logo 显示异常？检查路径和尺寸限制
小程序对导航栏内图片特别敏感，常见问题不是「不显示」，而是「显示错位/模糊/被裁」：
-
src必须是本地绝对路径（/static/logo.png），不能是相对路径（./static/logo.png）或网络地址（https://） - 微信小程序要求导航栏内图片宽度 ≤ 80rpx，高度 ≤ 44rpx，超出会被强制压缩变形；建议导出为 160×88 像素（@2x）再用
mode="widthFix" - App 和 H5 端无此限制，但若共用同一张图，小图在大屏上会糊——稳妥起见，准备两套资源：
/static/logo-nav-small.png（导航栏专用）、/static/logo-full.png（其他场景）
想让 Logo 带点击跳转？别用 onNavigationBarButtonTap
这个生命周期只响应原生导航栏上的「按钮」，而你用的是自定义 <image></image>，所以必须自己绑定事件：
- 给
<image></image>加@click="goHome"，并在 methods 里写跳转逻辑 - 注意：iOS 小程序中，
<image></image>默认不触发点击，需加catchtouchstart或设user-select: none防止长按弹窗干扰 - 如果 Logo 要跳转到外部链接（如官网），H5 用
window.open，小程序用uni.navigateToMiniProgram或uni.openURL，App 用plus.runtime.openURL——别漏平台判断
真正容易被忽略的是：自定义导航栏没有原生返回逻辑，哪怕你加了 Logo，用户点左上角返回键仍会触发默认行为。如果 Logo 所在页面是首页，记得在 onBackPress 里 return true 阻止返回，避免误操作退出应用。
