清云小程序教程四：app.json配置之导航栏

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

 

首先在这里补充一点，上节课里面有一点忘记说了，就是当你打开调试器的时候，你会发现，有一些报错，那么我们怎么来解决这个问题呢？

消除错误提示：在app.js里面加上一段代码：

App（{
  onlaunch:function(){
  }
}）

这样就可以消除错误提示。具体怎么的，留待以后详细讲解。

现在正式开始讲解导航栏的配置。主要就是app.json里面的其他一些配置项。上节课，我们已经了解了，Pages配置项，它是用来注册我们所有的页面的的。那么接下来我们来介绍其他一些配置项。那么，这些配置项我们在哪里能够看得呢？毫无疑问，肯定是官方的开发文档。在小程序中如何快速的打开官方的开发文档呢？点击页面最上方的菜单栏，在“微信开发工具”中选择“开发者文档”，这时候就直接进入到了我们的开发者文档中，那么我们现在需要学习的是app.json的一些配置项。

首先，点击上方的“框架”，点击完以后，左侧有一个侧边栏，选择“配置”，在配置文档中，描述了全部的app.json的配置项的意义。“配置”这一小节中，给出了一些aap.json的示例代码。

"Pages": {
    "pages/logs/logs",
    "pages/infex/index"
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "清云小程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug":true
  }

目前的微信版本主要是这5个配置项，当然，不排除以后的微信版本中会增加一些其他的配置项。这5个配置项是针对现在的微信版本来说的。

我们现在来看看这些配置项的各个意义。其中前3个，是大家必须要熟悉并且掌握的。因为前3个配置项对我们小程序开发来说，是我们经常使用并且要经常去更改的。而后面2个，大家一般只要采用默认值就可以了。

1、"Pages"我们已经知道它是用来注册页面中的页面路径的，具体的大家可以自己再去看看里面的文档内容。2、”window“配置项，这是我们要着重讲解的。”window“是用来设置小程序的状态栏、导航栏、标题、窗口背景色。

其中，前4个以“navigation”开头的是在设置我们的导航条，在我们的模拟器里面可以看到，有一块黑色的区域，这就是我们的导航条（这里看到的是我们小程序默认的导航条样式）:

其中我们可是通过更改前4个以“navigation”开头的属性来更改我们的导航条，以到达我们需要的效果。其中需要注意的是，“navigationBarTextStyle”属性仅支持”black“或者”white“；“navigationStyle”在以前老版的小程序里面是没有的，在新的小程序里面把它加上了的。“navigationStyle”属性仅支持”default“或者”custom“，其中“custom”可以让我们自定义导航条的样式，当你设置成 “navigationBarTextStyle”:“custom"，那么导航条只保留右上角的胶囊状的按钮，但是一般我们都是采用”default“，所以大家也没有必要去设置“navigationStyle”这一选项了。