Application Configuration

The app.json file in the root directory of your mini-program is used to configure various global settings for your mini-program. It defines the paths to page files, window behavior, network timeout settings, and more. The file content is a JSON object with the following properties:

Configuration Items

Property	Type	Required	Description	Minimum Version
pages	Object	Yes	Specifies the page paths.	1.0.0
window	Object	No	Global default window behavior.	1.0.0
tabBar	Object	No	Configuration for the bottom tab bar.	1.0.0
handleTabBarLoad	String	Longitude	Can be configured by developers. Supports dynamic loading of the TabBar style. Default can be left empty or set to "static". See details below.	4.0.0

pages

This property is used to specify the pages that make up the mini-program. Each item corresponds to a page path (including the file name). You don't need to include file extensions; the framework will automatically find the corresponding .json, .js, .dlt, and .css files in the specified location.

The first item in the array represents the mini-program's initial page (home page). When you add or remove pages in your mini-program, you need to modify the pages array accordingly.

For example, if your project directory structure looks like this:

├── app.js
├── app.json
├── app.css
├── pages
│   ├── index
│   │   ├── index.dlt
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.css
│   └── logs
│       ├── logs.dlt
│       └── logs.js
└── utils

Then you need to set the pages property in app.json like this:

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

window

This property is used to set the status bar, navigation bar, title, and window background color for the mini-program.

Property	Type	Required	Default	Description	Minimum Version
enablePullDownRefresh	Boolean	No	false	Whether to enable pull-down refresh.	1.0.0
enablePullUpRefresh	Boolean	No	false	Whether to enable pull-up refresh.	1.0.0
enableTransparentStatusBar	Boolean	No	false	Whether to enable transparent TitleBar immersive status bar.	1.0.0
enableNavigationBarLoading	Boolean	No	true	Whether to enable the TitleBar loading progress bar.	1.0.0
navigationBarTitleText	String	No		Default page title.	1.0.0
navigationStyle	String	Yes		Navigation bar style, supported values are explained below.
navigationBarBackgroundColor	HexColor	Yes		Navigation bar and status bar background color, e.g., "#FFFFFF".	1.0.0
navigationBarTextStyle	String	Yes		Navigation bar and status bar text color, only supports `black`/`white`.	1.0.0
navigationBarIconStyle	String	Yes		Navigation bar icon color type, only supports `black`/`white`.	1.0.0
navigationBarHomeAction	String	No	home	Navigation bar Home button action, only supports `home`/`back`/`all`. See explanations below.	1.0.0
refreshHeaderStyle	String	No		Refresh header style: - default: Default style - custom: Custom refresh header. Custom refresh header must have four properties: `refreshHeaderCustomLoadingGif`, `refreshHeaderCustomSuccessGif`, `refreshHeaderCustomLoading`, and `refreshHeaderCustomSuccess`, and they must meet the requirements to be set successfully, otherwise the default refresh header will be used.	1.0.0
refreshHeaderCustomTextEnable	Boolean	No		Whether to display the refresh text. Only valid when a custom refresh header is enabled.	1.0.0
refreshHeaderCustomLoadingGif	String	No		Custom refresh header loading animation, must be a gif image and will loop. Supports images within the mini-program package only. Only valid when a custom refresh header is enabled.	1.0.0
refreshHeaderCustomSuccessGif	String	No		Custom refresh header success animation, must be a gif image and plays once. Supports images within the mini-program package only. Only valid when a custom refresh header is enabled.	1.0.0
refreshHeaderCustomLoading	String	No		Custom refresh header loading static placeholder image. Supports images within the mini-program package only. Only valid when a custom refresh header is enabled.	1.0.0
refreshHeaderCustomSuccess	String	No		Custom refresh header success static placeholder image. Supports images within the mini-program package only. Only valid when a custom refresh header is enabled.	1.0.0
refreshHeaderTranslationContent	Boolean	No	true	Whether to enable content view drag effect. When the content view is enabled, the Header refresh start display will be based on the status bar height.	1.0.0
refreshHeaderAccentColor	HexColor	No		Refresh header text color, effective when refresh component is enabled, e.g., "#000000".	1.0.0
refreshHeaderBackgroundColor	HexColor	No		Refresh header background color, effective when refresh component is enabled, e.g., "#000000".	1.0.0
refreshHeaderDelayed	Number	No		Timeout to stop pull-down refresh, default is not enabled, greater than 0 is effective, unit: ms.	1.0.0
refreshFooterAccentColor	HexColor	No		Refresh footer text color, effective when refresh component is enabled, e.g., "#000000".	1.0.0
refreshFooterBackgroundColor	HexColor	No		Refresh footer background color, effective when refresh component is enabled, e.g., "#000000".	1.0.0
refreshFooterDelayed	Number	No		Timeout to stop pull-up refresh, default is not enabled, greater than 0 is effective, unit: ms.	1.0.0
contentBackgroundColor	HexColor	No		Main page background color, e.g., "#000000".	1.0.0
enablePageLoading	Boolean	No	false	Page transition Loading.	1.0.0
enableTabBarAdjustPan	Boolean	No	false	For pages with a TabBar and input tags, it supports not lifting the TabBar when the keyboard is displayed.	4.1.0
darkModeNavigationBarBackgroundColor	HexColor	No		Dark mode navigation bar and status bar background color, e.g., #00000000.	6.0.0
darkModeNavigationBarTextStyle	String	No		Dark mode navigation bar and status bar text color, supports black / white only.	6.0.0
darkModeNavigationBarIconStyle	String	No		Dark mode navigation bar icon color type, supports black / white only.	6.0.0
darkModeContentBackgroundColor	HexColor	No		Dark mode main page background color, e.g., #000000.	6.0.0

Note 1: HexColor (hexadecimal color value), e.g., "#ff00ff"

navigationBarHomeAction Supported Values

Supported Values	Description	Minimum Version
home	Small house button, returns to the main page	1.0.0
back	Leftward return arrow, returns one level only	1.0.0
all	Display both the return and small house icons	1.0.0

Supported Values for navigationStyle

Supported Values	Description	Minimum Version
default	Default style	1.0.0
hide	Hide the navigation bar and only keep the capsule button (in this mode, `navigationBarTextStyle` and `navigationBarIconStyle` don't work, including corresponding API calls).	3.0.0
custom	Custom navigation bar (only in this mode, `enableTransparentStatusBar`, `navigationBarBackgroundColor`, `navigationBarTextStyle`, `navigationBarIconStyle`、`navigationBarHomeAction`, can take effect, including corresponding API calls).	1.0.0

tabBar

Property	Type	Required	Default	Description	Minimum Version
color	HexColor	Yes		Default text color on tabs, supports hexadecimal colors	1.0.0
selectedColor	HexColor	Yes		Text color on selected tab, supports hexadecimal colors	1.0.0
backgroundColor	HexColor	Yes		Background color of the tab bar, supports hexadecimal colors	1.0.0
borderStyle	String	No	black	Color of the top border on the tab bar, supports `black` / `white`	1.0.0
list	Array	Yes		List of tabs, see details below for the `list` property	1.0.0
position	String	No	bottom	Position of the tabBar, only supports `bottom`, not `top`	1.0.0
custom	Boolean	No	false	Custom tabBar, custom support not yet available	1.0.0

Details of the list Property

The list property accepts an array that can only configure a minimum of 2 and a maximum of 5 tabs. Tabs are sorted in the order specified in the array, and each item is an object with the following properties:

Property	Type	Required	Description
pagePath	String	Yes	Page path, must be defined in the `pages` array first
text	String	Yes	Button text on the tab
iconPath	String	No	Image path, icon size is limited to 40kb, recommended size is 81px * 81px, supports network images. When `position` is set to `top`, the icon is not displayed.
selectedIconPath	String	No	Image path when selected, icon size is limited to 40kb, recommended size is 81px * 81px, supports network images. When `position` is set to `top`, the icon is not displayed.

Configuration Example

{
  "pages": ["pages/components/components", "pages/api/api", "pages/case/case"],
  "window": {
    "navigationBarTitleText": "MiniApp Official Demo",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationStyle": "default",
    "enablePullDownRefresh": false,
    "enablePullUpRefresh": false,
    "enableAddScreen": false,
    "enableNavigationBarLoading": false,
    "darkModeNavigationBarBackgroundColor": "#000000",
    "darkModeNavigationBarTextStyle": "white",
    "darkModeNavigationBarIconStyle": "white",
    "darkModeContentBackgroundColor": "#000000"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/components/components",
        "text": "Components",
        "iconPath": "images/component_normal.png",
        "selectedIconPath": "images/component_selected.png"
      },
      {
        "pagePath": "pages/api/api",
        "text": "API",
        "iconPath": "images/api_normal.png",
        "selectedIconPath": "images/api_selected.png"
      },
      {
        "pagePath": "pages/case/case",
        "text": "Our Product",
        "iconPath": "images/smtui_normal.png",
        "selectedIconPath": "images/smtui_selected.png"
      }
    ],
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "color": "#92969e",
    "selectedColor": "#191f2b",
    "position": "bottom",
    "custom": false
  }
}

Application Configuration

Configuration Items​

pages​

window​

tabBar​

Configuration Example​

Configuration Items

pages

window

tabBar

Configuration Example