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:

AttributeTypeMandatoryDescription
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"
  }
}
AttributeTypeMandatoryDescriptionMinimum 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, supporting YES / NO-
enableScrollBarBooleanNOFor Android only, showing WebView scroll bar or not YES by default, supporting YES / NO-
onReachBottomDistanceNumberNODistance to page bottom for triggering bottom-out during pull-up, in pxRelated documents Page event handler1.19.0. 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:

AttributeTypeMandatoryDescription
textColorHexColorNOText color
selectedColorHexColorNOHighlighted text color
backgroundColorHexColorNOBackground color
itemsArrayYesEach tab configuration

Each item configuration:

AttributeTypeMandatoryDescription
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
      }
    ]
  }
}