The app.json file serves as the global configuration for a WeChat Mini Program, defining page routes, window appearance, network timeouts, tab bar behavior, and debugging settings.

Full Example of app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "Home"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "Logs"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

Page Registration (pages)

The pages field is an array of strings specifying all pages in the app. The first entry defines the initial (home) page. Each string represants a path relative to the project root, excluding file extensions—.js, .json, .wxml, and .wxss files are automatically resolved.

Example:

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

Window Appearance (window)

The window object configures visual aspects like navigation bar color, title, background, and text style. Color values must be in hexadecimal format (e.g., "#ffffff"). Note that navigationStyle: "custom" only takes effect in app.json and requires compatibility handling for older clients.

Example:

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat API Demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

Tab Bar Configuration (tabBar)

For apps with multiple tabs, tabBar defines the navigation layout at the bottom (or top) of the screen. The list array must contain between 2 and 5 items, each mapping to a page. Icons are not displayed when position is set to "top".

Each item in list supports:

• pagePath: Path to the target page
• text: Display label
• Optional: iconPath and selectedIconPath for icons

Network and Debug Settings

networkTimeout sets timeout durations (in milliseconds) for different network operations:

• request: For wx.request
• downloadFile: For wx.downloadFile

Enabling debug: true activates verbose logging in the developer tools console, including page registration, routing, data updates, and event triggers—useful for troubleshooting.

Page-Specific Configuration (page.json)

Individual pages can override global window settings via a .json file in thier directory. Unlike app.json, this file directly specifies window properties without nesting under a window key.

Example pages/index/index.json:

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "WeChat API Demo",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}