清云小程序教程五：app.json配置之background窗口

原文链接：http://www.0575yun.com/articledetail/id/62.html

今天来学习以”background“开头的四个属性，”background“指的是窗口，那么窗口这个概念是对应的小程序的哪个区域呢？这个是小程序的初学者需要去知道和掌握的。现在我们来看看，到底哪个区域是小程序的窗口呢？这个小程序的窗口区域很多初学者掌握不了是因为，窗口区域是在小程序上直接看不到的，也就是它不会直接显示在小程序上的。它不像是我们的导航栏，直接就显示在我们的小程序上，其实，在我们的小程序的文档里面，他很直接的给出了小程序的各个区域。

虽然在开发工具看不到，但是并不是说，就没有background这个区域，如果我们不是在模拟器上运行，而是在真机上运行这个的话，你就会发现，我们把整个小程序的页面往下拉，下面白色的这个区域和上面导航栏的区域中间会出现一个空白的区域，那个区域就是我们的”background“区域，只不过在开发工具中，下面的页面往下是拉不动的，所以看不到而已，相反过来，页面往上拉，下面也会出现一个空白区域，只是在开发工具中也是拉不动的，在真机上可以看到。所以上面的区域和下面的区域加起来就是我们的”background“区域了。我们现在来看看，如何在真机上看到这个”background“区域。点击上边的”预览“，稍等片刻之后，它会出来一个二维码，大家扫描这个二维码，就可以在手机微信上打开我们的示例小程序，在微信上，你就会发现，往上拉和往下拉，页面是处于一个滑动的状态，拉动之后就会出现一个空白的区域，那个就是”background“窗口的区域，这个需要大家在真机上面体验。

现在我们来找一个”background“的设置选项来试一下。就拿最简单的”backgroundcolor“来做一个尝试。在”window“中添加一个”backgroundcolor“，这一要说一下，“backgroundcolor”默认是”#ffffff“，也就是白色，我们改变一下它的颜色，改成”#080000“红色，然后再来看一下，由于我们整个的窗口在小程序中是看不到的，所以我们在真机上面显示，还是点击上边的”预览“，稍等片刻之后，大家扫描这个二维码，然后就能看到，往下拉或者往上拉的时候，会出来一片红色的区域。

 

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "清云小程序",
    "navigationBarTextStyle":"black"，
    "backgroundColor":"#080000"，
    "enablePullDownRefresh"：true
  },

如果，真的想在开发工具中看到呢，我们也有一个办法。我们现在看不到，是因为，我们的页面不能够上下拉动，那其实我们只要能够让我们的页面上下拖动的话，我们就能够看到”background“窗口。那么怎么来做到呢？这时候就需要设置我们的开启下拉刷新“enablePullDownRefresh”属性。刚好它也是在”window“这个大的配置项下的，小程序默认是把它设置成”fasle“的，那我们把它设置成”true“，然后再到开发工具这里来，这时候在模拟器上就可以上下拖动我们的页面了。

这个红色区域就是我们的”background“窗口了。

下面给大家一个经验性的建议，通常我们在什么情况下，我们要来设置我们的”background“呢？“backgroundcolor”这个属性，一般是跟我们的页面颜色值是保持一致的，在默认情况下面，在小程序设计的时候，如果整个页面式设计成白色，那么，就不需要设置“backgroundcolor”，因为它默认的就是白色，这样当我们拖动这个页面的时候，它看起来就是一体的，如果页面颜色是其他颜色时，那我们就要相应的改变它的背景色了，就是说，要保持页面的颜色是和窗口的颜色是一致的。整体上面来讲，大家想要充分了解这个窗口，建议大家多在真机上面预览，这节课也已经讲过在真机上面如何看了。关于”background“还有其他几个属性值，我们就不一一介绍了，有一点是要特别介绍的，窗口是分为上下两部分的，那么。在IOS上是可以对上下两部分的窗口进行分别设置的，也就是”backgroundColorTop“和”backgroundColorBottom“这两个属性，但是要记住，只能在IOS上面才支持，应该来说，在安卓上是不可以的。那么app.json里面的配置项就讲到这里了，因为配置项有很多，我们也不可能为大家一一演示，这就需要大家自己去多看看文档，多操作一下。

此外，还有一个比较常用的配置选项，就是我们的”tabBar“，”tabBar“到时候做我们的别的选项的时候再来为大家详细的讲解。

到这里为止，app.jaon就讲完了，希望大家自己多去操作实践一下。