The app.json
file contains the global configurations of a Mini Program, such as the page paths, window display, network timeout, and tabBar configurations.
The following code snippet shows a sample file:
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"defaultTitle": "Demo"
}
}
The following table describes all the configuration items in the app.json file.
Attribute | Type | Mandatory | Description |
---|---|---|---|
pages | Array | Yes | The paths of the pages in the Mini Program. |
window | Object | No | The window display of the default page. |
tabBar | Object | No | The configurations of the bottom tabBar. |
pages
The configuration item pages
in the app.json
file is an array of strings that specify pages in the Mini Program. To add a page to or remove a page from the Mini Program, modify the configuration item pages
.
Each string in pages
represents the path of a page in the Mini Program. The first string corresponds to the homepage of the Mini Program.
You do not need to add an affix to each page path. The mPaaS framework automatically loads the .json
, .js
, .axml
, and .acss
files with the same names as specified in the page paths. For example, if your developed file structure is as shown in the following code snippet:
├── pages
│ ├──index
│ │ ├── index.json
│ │ ├── index.js
│ │ ├── index.axml
│ │ └── index.acss
│ ├──logs
│ │ ├── logs.json
│ │ ├── logs.js
│ │ └── logs.axml
├── app.json
├── app.js
└── app.acss
you must write the following code to the app.json
file:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
window
The configuration item window
is used to configure the user interface of the Mini Program, for example, to configure the status bar and navigation bar and set a title and a window background color.
Attribute | Type | Whether Mandatory | Description |
---|---|---|---|
defaultTitle | String | No | The default title of the window |
pullRefresh | String | No | A string that determines whether to allow pull-to-refresh. Default value: “NO”. Note that for the pull-to-refresh to take effect, the value of allowsBounceVertical must be “YES”. |
allowsBounceVertical | String | No | A string that determines whether bouncing occurs when vertical scrolling reaches the end of the content. Valid values: YES and NO. Default value: YES . |
transparentTitle | String | No | A string that determines the transparency effect of the navigation bar. Valid values: always , auto , and none . If you set the string to “always”, the navigation bar is always transparent. If you set the string to “auto”, the transparency effect of the navigation bar changes based on slide operations. If you set the string to “none”, the navigation bar is not transparent. Default value: none . |
titlePenetrate | String | No | A string that determines whether to allow the penetration of the navigation bar. Valid values: YES and NO . Default value: NO |
showTitleLoading | String | No | A string that determines whether to display the loading prompt during the startup of the Mini Program. Valid values: YES and NO . Default value: NO . |
titleImage | String | No | The image path of the navigation bar. |
titleBarColor | HexColor | No | The background color of the navigation bar. |
backgroundColor | HexColor | No | The background color to display when the page is slid down. |
backgroundImageColor | HexColor | No | The background color of the image to display when the page is slid down. |
backgroundImageUrl | String | No | The URL of the background image to display when the page is slid down. |
gestureBack | String | No | A string that determines whether to allow a gesture operation to trigger a return event. This event is supported only for iOS. Valid values: YES and NO . Default value: NO |
enableScrollBar | Boolean | No | A string that determines whether to display the scroll bar of WebView. This event is supported only for Android. Valid values: YES and NO . Default value: YES |
Code sample:
{
"window":{
"defaultTitle": "API Demo on the Client"
}
}
tabBar
For a Mini Program that has multiple pages, you can configure tabBar
and the corresponding pages. tabBar is used to switch among the pages and displayed at the bottom of the user interface on the client.
- If a page appears after the
my.navigateTo
ormy.redirectTo
operation is performed, tabBar does not appear at the bottom even if the page is defined in tabBar. - The default page of
tabBar
must be the homepage of the Mini Program.
The following table describes the configuration items of tabBar.
Attribute | Type | Mandatory | Description |
---|---|---|---|
textColor | HexColor | No | The text color of a tab icon when the icon is not selected. |
selectedColor | HexColor | No | The text color of a tab icon when the icon is selected. |
backgroundColor | HexColor | No | The background color |
items | Array | Yes | The configurations of each tab in tabBar |
The following table describes the detailed configurations of each tab.
Attribute | Type | Mandatory | Description |
---|---|---|---|
pagePath | String | Yes | The paths of the pages in the Mini Program. |
name | String | Yes | Name. |
icon | String | No | The URL of the tab icon when the corresponding page is not displayed. |
activeIcon | String | No | The URL of the highlighted tab icon when the corresponding page is displayed. |
We recommend that you choose an image of 60 × 60 pixels. Images of other sizes will automatically be adjusted to this size in a non-proportional manner.
The following code snippet shows sample configurations of tabBar:
{
"tabBar": {
"textColor": "#dddddd",
"selectedColor": "#49a9ee",
"backgroundColor": "#ffffff",
"items": [
{
"pagePath": "pages/index/index",
"name": "Homepage"
},
{
"pagePath": "pages/logs/logs",
"name": "Logs"
}
]
}
}