Page Configuration
In app.json, certain configurations can also be applied to individual pages. You can use the .json file corresponding to a specific page to configure its behavior.
Page-specific configuration items will override the same configuration items in app.json (styling-related configurations belong to the window property in app.json, but you don't need to specify the window field here). The specific values and meanings can be referenced in the Global Configuration documentation.
The file content is a JSON object with the following properties:
Configuration Options
| Property | Type | Required | Default | Description | Minimum Version |
|---|---|---|---|---|---|
| enablePullDownRefresh | Boolean | No | false | Whether to allow pull-down refresh. | 1.0.0 |
| enablePullUpRefresh | Boolean | No | false | Whether to allow pull-up refresh. | 1.0.0 |
| enableTransparentStatusBar | Boolean | No | false | Whether to enable transparent TitleBar for immersive status bar. | 1.0.0 |
| enableNavigationBarLoading | Boolean | No | true | Whether to show TitleBar loading progress. | 1.0.0 |
| navigationBarTitleText | String | No | Default title for the page. | 1.0.0 | |
| navigationStyle | String | Yes | Navigation bar style. See supported values below. | ||
| navigationBarBackgroundColor | HexColor | Yes | Background color of the navigation bar and status bar, e.g., #FFFFFF. | 1.0.0 | |
| navigationBarTextStyle | String | Yes | Text color of the navigation bar and status bar. Only supports black or white. | 1.0.0 | |
| navigationBarIconStyle | String | Yes | Icon color style of the navigation bar. Only supports black or white. | 1.0.0 | |
| navigationBarHomeAction | String | No | home | Action for the home button in the navigation bar. Supported values: home (returns to the main page), back (goes back one level), all (displays both home and back buttons). See explanations below. | |
| refreshHeaderStyle | String | No | Style of the refresh header: default (default style), custom (custom style). Custom refresh headers must provide the following properties and meet certain requirements: refreshHeaderCustomLoadingGif, refreshHeaderCustomSuccessGif, refreshHeaderCustomLoading, refreshHeaderCustomSuccess. Otherwise, the default refresh header will be used. | 1.0.0 | |
| refreshHeaderCustomTextEnable | Boolean | No | Whether to display custom refresh header text. Only effective when custom refresh header is enabled. | 1.0.0 | |
| refreshHeaderCustomLoadingGif | String | No | Custom loading animation for the refresh header. Must be in gif format and loop continuously. Only supports images within the mini-program package. Only effective when custom refresh header is enabled. | 1.0.0 | |
| refreshHeaderCustomSuccessGif | String | No | Custom success animation for the refresh header. Must be in gif format and play only once. Only supports images within the mini-program package. Only effective when custom refresh header is enabled. | 1.0.0 | |
| refreshHeaderCustomLoading | String | No | Custom static loading image for the refresh header. Only supports images within the mini-program package. Only effective when custom refresh header is enabled. | 1.0.0 | |
| refreshHeaderCustomSuccess | String | No | Custom static success image for the refresh header. Only supports images within the mini-program package. Only effective when custom refresh header is enabled. | 1.0.0 | |
| refreshHeaderTranslationContent | Boolean | No | true | Whether to enable content view drag effect. When the content view is transparent with a disabled drag effect, the Header refresh starts to display with an offset equal to the status bar height. | 1.0.0 |
| refreshHeaderAccentColor | HexColor | No | Text color of the refresh header. Effective when refresh component is enabled, e.g., #000000. | 1.0.0 | |
| refreshHeaderBackgroundColor | HexColor | No | Background color of the refresh header. Effective when refresh component is enabled, e.g., #000000. | 1.0.0 | |
| refreshHeaderDelayed | Number | No | Timeout to stop the pull-down refresh, disabled by default. Takes effect when greater than 0, in milliseconds. | 1.0.0 | |
| refreshFooterAccentColor | HexColor | No | Text color of the refresh footer. Effective when refresh component is enabled, e.g., #000000. | 1.0.0 | |
| refreshFooterBackgroundColor | HexColor | No | Background color of the refresh footer. Effective when refresh component is enabled, e.g., #000000. | 1.0.0 | |
| refreshFooterDelayed | Number | No | Timeout to stop the pull-up refresh, disabled by default. Takes effect when greater than 0, in milliseconds. | 1.0.0 | |
| contentBackgroundColor | HexColor | No | Background color of the main content view, e.g., #000000. | 1.0.0 | |
| enablePageLoading | Boolean | No | false | Page transition loading indicator. | 1.0.0 |
| enableTabBarAdjustPan | Boolean | No | false | For pages with TabBars and input fields, supports preventing the TabBar from being pushed up by the keyboard. | 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"
Supported Values for navigationBarHomeAction
| Supported Values | Description | Minimum Version |
|---|---|---|
| home | Home button with a small house icon. Tapping it returns to the main page. | 1.0.0 |
| back | Back button with a left arrow icon. Tapping it goes back one level. | 1.0.0 |
| all | Displays both the home and back buttons. | 1.0.0 |
Supported Values for navigationStyle
| Supported Values | Description | Minimum Version |
|---|---|---|
| default | Default style. | 1.0.0 |
| hide | Hides the navigation bar, leaving only the capsule button. (In this mode, navigationBarTextStyle and navigationBarIconStyle do not work, including their corresponding API calls.) | 3.0.0 |
| custom | Custom navigation bar (Only in this mode, enableTransparentStatusBar, navigationBarBackgroundColor, navigationBarTextStyle, navigationBarIconStyle、navigationBarHomeAction can take effect, including their corresponding API calls.) | 1.0.0 |
Page Configuration Example
{
"enablePullDownRefresh": false,
"enablePullUpRefresh": false,
"enableAddScreen": true,
"navigationStyle": "custom",
"navigationBarTitleText": "MiniApp Official Demo",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"navigationBarIconStyle": "black",
"navigationBarHomeAction": "back",
"darkModeNavigationBarBackgroundColor": "#000000",
"darkModeNavigationBarTextStyle": "white",
"darkModeNavigationBarIconStyle": "white",
"darkModeContentBackgroundColor": "#000000"
}