Global Configuration

2022-07-29 06:32

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	Mandatory	Description
pages	Array	Yes	Set page path
window	Object	No	Set default window display for all page
tabBar	Object	No	Set 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"
  }
}

Attribute	Type	Mandatory	Description	Minimum version
defaultTitle	String	NO	Default title of page	-
pullRefresh	String	NO	Allow pull-to-refresh or not, `NO` by default. Remarks: The precondition for pull-to-refresh to take effect is allowsBounceVertical `YES`	-
allowsBounceVertical	String	NO	Allow bounce vertical or not `YES` by default, supporting `YES / NO`	-
transparentTitle	String	NO	Navigation bar transparency setting `none` by default, supporting `always` (always transparent)/ `auto` (sliding adaptation)/ `none` (not transparent)	-
titlePenetrate	String	NO	Allow navigation bar click-through or not `No` by default, supporting `YES / NO`	-
showTitleLoading	String	NO	Show navigation bar loading or not upon entrance `No` by default, supporting `YES / NO`	-
titleImage	String	No	Navigation bar picture address	-
titleBarColor	HexColor	NO	Background color of navigation bar, decimal color value (0-255)	-
backgroundColor	HexColor	NO	Background color of page, decimal color value (0-255)	-
backgroundImageColor	HexColor	NO	Background bottom color to display during pull-down, decimal color value (0-255)	-
backgroundImageUrl	String	NO	URL of background to display during pull-down	-
gestureBack	String	NO	For iOS only, supporting gesture return or not `No` by default, supporting `YES / NO`	-
enableScrollBar	Boolean	NO	For Android only, showing WebView scroll bar or not `YES` by default, supporting `YES / NO`	-
onReachBottomDistance	Number	NO	Distance to page bottom for triggering bottom-out during pull-up, in pxRelated documents Page event handler	1.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:

Attribute	Type	Mandatory	Description
textColor	HexColor	NO	Text color
selectedColor	HexColor	NO	Highlighted text color
backgroundColor	HexColor	NO	Background color
items	Array	Yes	Each tab configuration

Each item configuration:

Attribute	Type	Mandatory	Description
pagePath	String	Yes	Set page path
name	String	Yes	Name
icon	String	NO	Common icon path
activeIcon	String	NO	Highlighted 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
      }
    ]
  }
}