All Products
Search
Document Center

app-json global configuration

Last Updated: Feb 04, 2021

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:

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/logs/index"
  5. ],
  6. "window": {
  7. "defaultTitle": "Demo"
  8. }
  9. }

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:

  1. ├── pages
  2. ├──index
  3. ├── index.json
  4. ├── index.js
  5. ├── index.axml
  6. └── index.acss
  7. ├──logs
  8. ├── logs.json
  9. ├── logs.js
  10. └── logs.axml
  11. ├── app.json
  12. ├── app.js
  13. └── app.acss

you must write the following code to the app.json file:

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ]
  6. }

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:

  1. {
  2. "window":{
  3. "defaultTitle": "API Demo on the Client"
  4. }
  5. }

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:

  1. {
  2. "tabBar": {
  3. "textColor": "#dddddd",
  4. "selectedColor": "#49a9ee",
  5. "backgroundColor": "#ffffff",
  6. "items": [
  7. {
  8. "pagePath": "pages/index/index",
  9. "name": "Homepage"
  10. },
  11. {
  12. "pagePath": "pages/logs/logs",
  13. "name": "Logs"
  14. }
  15. ]
  16. }
  17. }