Global Configuration

app.json is used to implement global configuration and set up the path of page files, window display, multiple tabs and so on.

Here is a basic configuration example:

copy
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}

Complete configuration item:

Attribute

Type

Required

Description
pagesArrayYesSet page path.
windowObjectNoSet default window display for all page.
tabBarObjectNoSet the display of bottom tabbar.

pages

In the app.json, the pages have the array attribute, with string for each member in the array, used to specify the pages of the Mini Program. In the Mini Program, adding or deleting pages modifies the pages array.
Each member of the pages array represents the path of the related page. The first member indicates the home of the Mini Program.
The page path does not need any suffix. The framework automatically loads the .json, .js, .axml and .acss files of the same name. For example, if the development directory is:

copy
├── pages
│   ├──index
│   │    ├── index.json
│   │    ├── index.js
│   │    ├── index.axml
│   │    └── index.acss
│   ├──logs
│   │    ├── logs.json
│   │    ├── logs.js
│   │    └── logs.axml
├── app.json
├── app.js
└── app.acss

The following configuration shall be done in the app.json:

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

window

The window is used to set up the status bar, navigation bar, title, window background color, etc. for the Mini Program.

Sample codes:

copy
{
  "window":{
    "defaultTitle": "Default Title"
  }
}

Property

Type

Required

DescriptionMinimum version
defaultTitleStringNODefault title of page.-
pullRefreshStringNOAllow pull-to-refresh or not, NO by default. Remarks: The precondition for pull-to-refresh to take effect is allowsBounceVertical YES. -
allowsBounceVerticalStringNOAllow bounce vertical or not YES by default, supporting YES / NO. -
transparentTitleStringNONavigation bar transparency setting none by default, supporting always (always transparent)/ auto (sliding adaptation)/ none (not transparent).-
titlePenetrateStringNOAllow navigation bar click-through or not No by default, supporting YES / NO. -
showTitleLoadingStringNOShow navigation bar loading or not upon entrance No by default, supporting YES / NO.  -
titleImageStringNoNavigation bar picture address.-
titleBarColorHexColorNOBackground color of navigation bar, decimal color value (0-255).-
backgroundColorHexColorNOBackground color of page, decimal color value (0-255).-
backgroundImageColorHexColorNOBackground bottom color to display during pull-down, decimal color value (0-255).-
backgroundImageUrlStringNOURL of background to display during pull-down.-
gestureBackStringNOFor iOS only, supporting gesture return or not No by default, supportingYES / NO.  -
enableScrollBarBooleanNOFor Android only, showing WebView scroll bar or not YES by default, supportingYES / NO.  -
onReachBottomDistanceNumberNO Distance to page bottom for triggering bottom-out during pull-up, in px. Related documents Page event handler.Currently, the iOS does not support settings in the page.json, and only global settings are supported.

tabBar

If the Mini Program is a multi-tab application (pages switchable in the window bottom bar of the client), the tabBar configuration item can be used to specify the tab presentation pattern and the corresponding page in case of tab switch.
Note:
• On the destination page via page jump (my.navigateTo) or page redirection (my.redirectTo), the bottom tab bar is not displayed even when the page is defined in the tabbar configuration.

The tabBar has the following configuration items:

Property

Type

Required

Description
textColorHexColorNOText color.
selectedColorHexColorNOHighlighted text color.
backgroundColorHexColorNOBackground color.
itemsArrayYesEach tab configuration.

Each item configuration:

Property

Type

Required

Description
pagePathStringYesSet page path.
nameStringYesName.
iconStringNOCommon icon path.
activeIconStringNOHighlighted icon path.

The recommended size of icon is 60×60 px. The pictures not in the recommended size will be stretched or scaled in unequal proportion.
Sample codes:

copy
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "Home
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "Log
      }
    ]
  }
}