In-depth analysis of global configuration in mini programs

This article will talk about the global configuration in the mini program, and learn about the common configuration items and page configuration files in the mini program. I hope it will be helpful to you!

Global configuration file and commonly used configuration items

app.jsonin the root directory of the mini program The file is the global configuration file of the applet. Commonly used configurations are as follows:

• pages: Record the storage path of all pages of the current mini program
• window: Globally set the mini program window Appearance
• tabBar: Set thetabBareffect at the bottom of the mini program
• style: Whether to enable the new version of the component style [ Related learning recommendations:小program development tutorial】

---

window

Components of the small program window

window Common configuration items

Set the title of the navigation bar

app.json -> window -> navigationBarTitleText

Set the background color of the navigation bar

##app.json -> window -> navigationBarBackgroundColor

Set navigation bar title color

Enable globally Pull-down refresh (enable the pull-down refresh function inapp.json, which will apply to each mini program page)Pull-down refresh: The behavior of reloading page data by sliding your finger down on the screen

Set the background color of the window during pull-down refreshWhen the pull-down refresh function is enabled globally, the default window background is white. Set a custom pull-down refresh window background color

Set the loading style when pull-down refreshWhen the pull-down refresh function is enabled globally, the default window loading is white. Set the effect of loading style

Set the distance between pull-up and bottomPull-up and bottom out: the act of loading more data by sliding your finger up on the screen

---

What is tabBar

• Bottom tabBar
  • Top tabBar
  Note:
• Only a minimum of 2 and a maximum of 5 tabs can be configured in the tabBar
  • When the top tabBar is rendered, the icon is not displayed, only the text is displayed.

##navigationBarTitleText String String Navigation bar title text content navigationBarBackgroundColor HexColor #000000 Navigation bar background color navigationBarTextStyle String white Navigation bar title color, only supports black/white backgroundColor HexColor #ffffff Background color of the window backgroundTextStyle String dark The style of drop-down loading, only supports dark/light ##enablePullDownRefresh onReachBottomDistance ##app.json -> window -> enablePullDownRefreshapp.json -> window -> enablePullDownRefreshapp.json -> window -> backgroundColorapp.json -> window -> backgroundTextStyleapp.json -> window -> ; onReachBottomDistancetabBartabBar is a common page effect in mobile applications, used to quickly switch between multiple pages. It is divided into two types in the mini program:##The 6 parts of tabBartabBar Common configuration itemstabBar component configuration items

Property name	Type	Default value	Description
Boolean	false	Whether to enable pull-down refresh globally
Number	50	The distance from the bottom of the page when the page pull-to-bottom event is triggered, in px

Attribute Type Required Default value Description position String No bottom The position of tabBar, only supports borderStyle String No black The color of the upper border of tabbar, only supports / color HexColor No ##tabBar Default color for text above (unselected) HexColor Default color of text when tabBar is selected HexColor The background color of tabBar Array tabBar List, minimum 2, maximum 5 Configuration options for each tab item

			bottom
			black	white
				selectedColor
No				backgroundColor
No				list
is the tab of

Attribute

---

Page configuration file

The role of page configuration file

In the applet, each Each page has its own.jsonconfiguration file, which is used to configure the window appearance, page effects, etc. of the current page

Relationship between page configuration and global configuration

• In the mini program, thewindownode inapp.jsoncan globally configure each page in the mini program Window performance

• If you want to have a special window performance for a certain page in the mini program, you need to modify the page-level.jsonfile

• Note:

  When the page configuration conflicts with the global configuration, based on the proximity principle, the final effect will be subject to the page configuration

Commonly used configuration items in page configuration

Type ##pagePath String is the page path, which must be defined first in pages text String is Button text on tab iconPath String No Image path, icon size limit is 40kb, the recommended size is 81px * 81px, network images are not supported selectedIconPath String No The image when selected Path, icon size is limited to 40kb, recommended size is 81px * 81px, network images are not supported

Required	Description

##Current navigation bar title text content backgroundColor HexColor #ffffff Background color of the current window backgroundTextStyle String dark The style of pull-down loading on the current page, only supports dark/light ##enablePullDownRefresh onReachBottomDistance For more programming-related knowledge, please visit:

Attributes	Type	Default Value	Description
navigationBarBackgroundColor	HexColor	#000000	Current navigation Bar background color
navigationBarTextStyle	String	white	Navigation bar title color, only supports black / white
navigationBarTitleText	String
Boolean	false	Whether to enable pull-down refresh for the current page
Number	50	Page pull-up bottom event Distance from the bottom of the page when triggered, in px

Programming Video

! !

The above is the detailed content of In-depth analysis of global configuration in mini programs. For more information, please follow other related articles on the PHP Chinese website!