3.9　app.json中的window配置项

图3-20的顶部黑色长条是小程序默认的导航栏。很遗憾这个导航栏不可以隐藏或者取消，它必须存在。我们之所以说小程序无论从开发还是设计上都比较简单，有很大一部分原因是因为小程序做了很多这样的“强制性约束”，不给开发者很大的自由度，自然简单。这固然是因为小程序设计初衷就是用来快速开发轻量级应用的，但也有一部分原因是因为小程序目前还处于生态的早期阶段，官方没有那么多精力支持非常丰富的组件接口。

既然这个导航栏无法取消，如何让整个页面只有一种颜色呢？下面我们考虑将导航栏的颜色和页面的背景色设置成同一个颜色。

还记不记得在3.2小节中，我们使用了app.json的一个配置项pages，用来注册小程序页面文件？这一小节，我们来学习app.json的另外一个配置项window。

window配置可项用来设置小程序的状态栏、导航栏、标题和窗口的背景色。我们先来学习window配置项下能够更改导航栏颜色的属性：navigationBarBackgroundColor。在app.json文件中加入一个window配置项，并设置window的属性navigationBarBackgroundColor值为#ECC0A8。更改后的app.json文件代码如下：

保存后，我们发现welcome页面的样式已经变成如图3-21所示。

小程序顶部 的导航栏已经被“隐藏”了。当然这不是真的被隐藏，导航栏依然存在于小程序中，只不过我们通过设置导航栏和页面的颜色模拟了这种效果。

现在，我们的欢迎页面是不是很像各类iOS和Android App的启动页面？

当然，window这个选项下并不是只有navigationBarbackgroundColor这一个属性，它还有以下几种属性：

• navigationBarTextStyle　配置导航栏文字颜色，只支持black/white。

• navigationBarTitleText　配置导航栏文字内容。

• backgroundColor　配置窗口颜色。

• backgroundTextStyle　下拉背景字体，仅支持dark/light。

• enablePullDownRefresh　是否开启下拉刷新。

正如本书前面所讲，把这些文档内容在这里列出来并没有意义，这些都是官方文档里的内容。本书会将这些知识点尽可能多地编排和融合在Orange Can项目中，在案例实践中演示这些组件、属性的具体用法。对于官方文档讲的不清楚、不明白或者错误的地方，本书也会做出补充和修正。

读者朋友应该关注本书章节的标题，每个标题代表着小程序的一个重要知识点，整本书的标题将构成小程序的知识体系框架。但每个知识点下有很多的属性，本书并不会一一列举，因为这些属性的使用方式都可以通过本书的案例并结合官方的文档一目了然。

对于每个小程序的知识点，我们在学习阶段最需要关心的只有两点——有什么用和怎么用。比如window这个配置项，我们只需要关心以下两点即可:

• window是做什么的？

• 怎么使用window这个配置项？

至于window下面的属性值，建议具体问题具体对待，不需要现在就搞明白。把这些属性值放到实际的工作项目中学习，不仅节约时间而且印象更加深刻。比如，我们这里需要用到navigationBarBackgroundColor，把这个属性配置到项目后，就知道navigationBarBackgroundColor的意义了。

Orange Can项目的后期代码里，我们还会使用到window的其他配置项，让我们继续项目，逐步学习。