必须设 navigationStyle: "custom" 才能替换微信小程序返回图标，此时需手动实现标题、背景、返回按钮及对齐胶囊按钮，并调用 uni.navigateBack() 处理跳转。
uni-app 微信小程序不能直接替换原生返回图标
微信小程序的原生导航栏返回按钮（左上角箭头）是系统级控件，navigationStyle: "default" 下完全不可定制图标、颜色或点击行为。你看到的“自定义返回图标”，本质只有两种路径：要么放弃原生导航栏、全量接管顶部区域；要么在原生导航栏存在时，用视觉 trick 遮盖+模拟——但后者不推荐，易被审核拒绝且体验割裂。
必须设 navigationStyle: "custom" 才能控制返回图标
启用自定义导航栏后，原生顶部区域清空，你获得完整 DOM 控制权。此时返回图标就是普通 <image> 或 <icon> 元素。关键配置在 pages.json 中：
{
"path": "pages/detail/detail",
"style": {
"navigationStyle": "custom"
}
}注意：navigationBarTitleText、navigationBarBackgroundColor 等字段在此模式下失效，标题、背景、返回按钮全部由页面内 Vue 模板实现。
- 不写
navigationStyle→ 原生导航栏，无法改图标 - 写成
"default"→ 等同于不写，仍是原生 - 写成
"custom"→ 彻底接管，图标可任意替换
自定义图标需手动处理胶囊按钮对齐与状态栏高度
微信小程序右上角有固定“胶囊按钮”（包含 ···），你的自定义返回图标若没对齐它，会显得悬浮或错位。必须动态计算位置：
Wechat MP Article Stats Comments Suite - 微信公众号管理套件
下载
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 用
uni.getSystemInfoSync().statusBarHeight获取状态栏高度 - 用
wx.getMenuButtonBoundingClientRect()获取胶囊top、height、width - 返回图标垂直居中逻辑通常是：
top = 胶囊.top + (胶囊.height - 图标高度) / 2 - 返回图标水平留白建议 ≥ 胶囊.left，避免重叠
示例片段（Vue 页面 <script>）：
export default {
data() {
return {
statusBarHeight: 0,
menuButtonTop: 0,
menuButtonHeight: 0
}
},
onLoad() {
const info = uni.getSystemInfoSync()
const menuBtn = wx.getMenuButtonBoundingClientRect()
this.statusBarHeight = info.statusBarHeight
this.menuButtonTop = menuBtn.top
this.menuButtonHeight = menuBtn.height
}
}容易踩的坑：H5/App 端胶囊不存在，别硬套小程序逻辑
你在微信小程序里算得再准，wx.getMenuButtonBoundingClientRect() 在 H5 和 App 端会返回 undefined 或无效值。直接调用会报错或布局崩塌。
- 必须用条件编译：
<!-- #ifdef MP-WEIXIN --> ... <!-- #endif --> - H5/App 可统一用固定高度（如
88rpx）+ 状态栏高度，无需胶囊计算 - 不要在
onLoad外层直接调用wx.xxx，它只在小程序环境可用 - 图标资源路径务必用本地相对路径（如
/static/icon/back.png），网络地址在真机可能不显示
最常被忽略的一点：自定义导航栏后，uni.navigateBack() 仍要手动调用——返回图标只是 UI，不自带跳转逻辑。漏写 @click="uni.navigateBack()" 就等于放了个摆设。
