【微信小程序】修改导航条胶囊和顶部状态栏颜色

在微信小程序中，某些场景下我们要去更改顶部导航条的一些展示效果，比如去除小程序默认的导航，改用自己写的自定义导航栏，这种情况下会发现导航条胶囊和顶部状态栏颜色是不受我们自定义导航栏控制的，那么应该怎么去设置更改呢？

小程序导航栏

首先让我们来了解一下小程序导航栏的构成，从上面小程序导航栏显示来看，它是由这几部分构成的：

• 顶部状态栏
• 胶囊区
• 标题文字
• 左侧返回按钮

整个导航栏区域内容的展示，我们都可以通过修改页面对应的 .json 文件来进行配置。

如果不进行任何配置，那么我们导航区域则默认是黑色背景颜色，里面的元素则是白色的。

问题：修改导航栏背景颜色后，胶囊区和顶部状态栏看不清晰了？

某些需求情况下，如果我们需要将导航栏设置成 白色背景 ，那么胶囊区和顶部状态栏的颜色就不符合我们的预期效果了。

如下设置了导航栏背景颜色为 白色 后，胶囊区和顶部状态栏也全是白色的，没有变成其它颜色，这会导致我们看不清楚状态栏详细内容，胶囊区域的显示也感觉特别突兀。

{
  "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
  ...
}

解决办法

顶部状态栏 和 胶囊区 是官方默认提供的，我们只能在其允许的基础上能够进行一定程度的改动。

目前官方提供的 navigationBarTextStyle 配置项，可以让我们去修改导航栏标题、返回按钮、胶囊区和顶部状态栏等这些 导航栏内元素 的颜色，但是仅支持设置 black / white 两种主题。

如下，导航栏设置了白色背景，我们可以通过这个配置项将 导航栏内元素 设置成 black 主题，这样就能符合我们的预期效果了。

{
  "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
  "navigationBarTextStyle": "black", // 导航栏内元素主题色，，仅支持 black / white
  ...
}