app-json global configuration - Mobile Platform as a Service

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.

Notes:

If a page appears after the my.navigateTo or my.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"
      }
    ]
  }
}