微信小程序全局配置及常用配置项详解

什么是微信小程序配置文件

每个微信小程序都需要一个配置文件app.json。这个文件用来对小程序进行一些全局性的配置，例如设置页面路径、窗口背景色、顶部条颜色等等，而且这些配置无论在哪个页面都能生效。

app.json配置文件结构

一个app.json文件包括了整个小程序的全局配置，是一个全局性的配置文件，不需要放在pages目录下。一般情况下，该文件应该放置于小程序的根目录下，并且这个文件必须是一个JSON文件，包括以下几个配置项：

{
  "pages": [],
  "window": {},
  "tabBar": {},
  "networkTimeout": {},
  "debug": false,
  "sitemapLocation": "",
  "style": "",
  "sitemap": {},
  "plugins": {}
}

常用配置项

pages

pages数组，可以设置小程序的页面路径，最多五个，按数组的顺序依次对应分别是tabBar的第一项到第五项。每一项都可以指定对应的页面路径。以下是一个示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window

window配置项主要设置小程序的窗口样式，可以设置小程序标题文字、页面背景色、状态栏样式等等。以下是一个示例：

{
  "window": {
    "navigationBarTitleText": "Demo",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
  }
}

以上示例中，设置了小程序标题文字为"Demo"，导航栏背景色为黑色，导航栏文本颜色为白色，页面背景色为白色，背景文字样式为"dark"。

tabBar

tabBar是小程序底部的导航栏，可以设置导航栏的图标、文字、颜色等等。以下是一个示例：

{
  "tabBar": {
    "color": "#999",
    "selectedColor": "#007aff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon-1.png",
        "selectedIconPath": "icon-2.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icon-3.png",
        "selectedIconPath": "icon-4.png"
      }
    ]
  }
}

以上示例中，设置了导航栏默认颜色为"#999"，选中颜色为"#007aff"，导航栏背景色为"#ffffff"，边框样式为"black"，设置了两个导航栏按钮，一个是"首页"对应的页面路径为"pages/index/index"，图标路径为"icon-1.png"，选中时的图标路径为"icon-2.png"；另一个是"日志"对应的页面路径为"pages/logs/logs"，图标路径为"icon-3.png"，选中时的图标路径为"icon-4.png"。

结束语

通过以上对微信小程序全局配置及常用配置项一些详细的讲解，相信你已经对小程序的配置文件有了一个更深入的了解。小程序的每个配置项都尽可能的发挥了它们的作用，可以更好的调整小程序的效果。

注：以上仅是一些常用的配置项，小程序的配置文件可支持更多的设置，具体可以参阅官方文档。