微信小程序-顶部导航栏的配置不生效的问题

1. 问题描述： window配置项中设置的样式不能成功展示在顶部导航栏位置

写上我的解决过程：

首先看下方报错：invalid app.json rendererOptions.skyline["tagNameStyleIsolation"]
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 渲染模式下，app.json 中的 window 配置（如 navigationStyle、navigationBarTextStyle、navigationBarTitleText、navigationBarBackgroundColor 等）不生效。这是因为 Skyline 渲染模式不支持原生导航栏，而是需要开发者自行实现自定义导航栏。而WebView 渲染模式支持原生导航栏。

如果你想使用自定义导航栏，需要给renderer设置 "skyline", 另外需要在页面配置中显式设置 navigationStyle 为 "custom"(默认值是default)

如果你想要使用原生导航栏，那么就需要将renderer设置改为"webview"即可，。在这种情况下，navigationStyle 的默认值是 "default"，所以你不需要显式设置。

2. 关于两种渲染模式

• Skyline 渲染模式：

  • 如果你在 app.json 中设置了 "renderer": "skyline"，页面的 navigationStyle 默认值是 "custom"，而不是 "default"。这意味着即使你在页面的 page.json 中显式设置 navigationStyle为"default"，页面也会使用自定义导航栏,  顶部导航栏也不会显示。

  • 所以如果你希望在 Skyline 渲染模式下使用原生导航栏，这是不可行的。Skyline 渲染模式不支持原生导航栏，必须使用自定义导航栏

• WebView 渲染模式：

  • 如果你在 app.json 中设置了 "renderer": "webview"，页面的 navigationStyle 默认值是 "default"。这意味着页面会自动使用原生导航栏，除非你显式设置为 "custom"。

3. 关于navigationStyle

参考文档小程序配置 / 页面配置

4. 我的解决办法