【微信小程序问题解决】删掉 “navigationStyle“: “custom“ 后仍触发了自定义导航栏

问题描述：

删掉 "navigationStyle": "custom" 之后，**依然报错误：**Due to the "custom" navigationStyle of the Skyline page, the configuration of "navigationStyle", "navigationBarTextStyle", "navigationBarTitleText", and "navigationBarBackgroundColor" in app.json will not take effect.

Due to the "custom" navigationStyle of the Skyline page, the configuration of "navigationStyle", "navigationBarTextStyle", "navigationBarTitleText", and "navigationBarBackgroundColor" in app.json will not take effect.

翻译：由于 Skyline 页面使用了 "custom"（自定义）导航栏样式，因此在 app.json 中配置的 navigationStyle、navigationBarTextStyle（导航栏文字颜色）、navigationBarTitleText（导航栏标题）、navigationBarBackgroundColor（导航栏背景色）将会失效。
原因：在微信小程序中，如果你把页面的导航栏设置成了 "custom": true，就意味着你抛弃了系统默认的导航栏，打算完全用代码自己画一个导航栏 。既然你都打算自己画了，系统自然就不会再去管你在 app.json 里设置的那些标题是什么、背景是什么颜色了，这些配置也就成了摆设。
怎么解决 ：
- 如果你确实需要自己画导航栏（比如要做特殊动画、透明导航栏等），那这个提示可以直接忽略，去页面的 wxml 里自己写导航栏的 UI 和样式就行。
- 如果你其实不想自己画导航栏，只是想用默认的，那你需要在具体的页面 .json 文件（或 app.json 的 page 全局配置）里，把 "navigationStyle": "custom" 删掉，或者改成 "navigationStyle": "default"。这样上面那些标题、颜色的配置就会恢复生效了。

但是删掉 "navigationStyle": "custom" 之后，依然报错误

解决办法：

如果删掉 "navigationStyle": "custom" 之后，依然报第二条错误，说明在你的项目中，还有其他地方强制触发了自定义导航栏的逻辑。

在微信小程序中，只要页面被判定为"自定义导航栏"，全局的标题和颜色配置就会失效 ，触发条件不止 app.json 这一个地方。

请按照以下 4 个位置逐一排查：

1. 检查具体的【页面级 .json 文件】（最常见的原因）

即使你在 app.json 里删掉了，但如果在具体页面的 .json 文件 （比如 pages/index/index.json）里还写着：

javascript 复制代码

{
  "navigationStyle": "custom"
}

这个页面依然会是自定义导航栏，报错就不会消失。
解决办法 ：全局搜索项目中所有的 .json 文件，把 "navigationStyle": "custom" 全部删掉。

还有：

2. 检查是否开启了【全屏模式】（容易被忽略）

在 Skyline 渲染模式下，如果你在页面的 .json 中配置了全屏：

javascript 复制代码

{
  "pageOrientation": "auto",
  "fullscreen": true 
}

开启 fullscreen 会强制隐藏系统导航栏 ，效果等同于 navigationStyle: "custom"。
解决办法 ：把 "fullscreen": true 删掉，或者改成 false。

3. 检查页面是否使用了【沉浸式状态栏组件】

微信官方提供了一些组件，比如 <navigation-bar> 或者某些 <page-meta> 的用法，如果在页面的 wxml 中使用了它们并设置了自定义属性，也会导致原生导航栏配置失效。
解决办法 ：检查报错提示的具体是哪个页面，去那个页面的 wxml 里看看有没有用到特殊的导航栏组件，尝试先注释掉看报错是否消失。

4. 确认是否清理了【编译缓存】（玄学问题）

微信开发者工具有时候会很"笨"，你改了代码，但它还在用旧的配置编译。
解决办法：

在开发者工具顶部菜单栏，点击 "工具" -> "清缓存" -> "全部清除"。
或者直接关掉开发者工具，把项目目录下的 .tea 文件夹和 miniprogram_npm 删掉，重新打开项目编译。

💡 终极确认方法：

报错提示里通常会带着具体是哪个页面出的问题（仔细看报错信息的末尾或者控制台堆栈）。

你可以新建一个完全空白的页面 （不写任何自定义配置），然后在 app.json 里把这个空白页面设为第一个页面，编译一下。如果报错消失了，说明绝对是你原来的某个页面配置有问题；如果还报错，那就是开发者工具缓存没清干净。