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.json in 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 the tabBar effect 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

##navigationBarTitleTextStringStringNavigation bar title text contentnavigationBarBackgroundColorHexColor#000000Navigation bar background colornavigationBarTextStyleStringwhiteNavigation bar title color, only supports black/whitebackgroundColorHexColor#ffffffBackground color of the windowbackgroundTextStyleStringdarkThe style of drop-down loading, only supports dark/light##enablePullDownRefreshonReachBottomDistance

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

##app.json -> window -> enablePullDownRefresh

Enable globally Pull-down refresh (enable the pull-down refresh function in app.json<span style="font-size: 18px;"></span>, 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

app.json -> window -> enablePullDownRefresh

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

app.json -> window -> backgroundColor

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

app.json -> window -> backgroundTextStyle

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

app.json -> window -> ; onReachBottomDistance

---

tabBar

What is tabBar

tabBar 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:

• 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.

##The 6 parts of tabBar

tabBar Common configuration items

tabBar 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

AttributeTypeRequiredDefault valueDescriptionpositionStringNobottomThe position of tabBar, only supports borderStyleStringNoblackThe color of the upper border of tabbar, only supports / colorHexColorNo##tabBar Default color for text above (unselected)HexColorDefault color of text when tabBar is selectedHexColor The background color of tabBarArraytabBar List, minimum 2, maximum 5Configuration options for each tab item

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

AttributeType##pagePath String is the page path, which must be defined first in pages textString is Button text on tabiconPathStringNoImage path, icon size limit is 40kb, the recommended size is 81px * 81px, network images are not supported selectedIconPathStringNoThe image when selected Path, icon size is limited to 40kb, recommended size is 81px * 81px, network images are not supported

---

Page configuration file

The role of page configuration file

In the applet, each Each page has its own .json configuration 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, the window node in app.json can 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 .json file

• 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

Required	Description

##Current navigation bar title text contentbackgroundColor HexColor#ffffffBackground color of the current windowbackgroundTextStyleStringdarkThe style of pull-down loading on the current page, only supports dark/light##enablePullDownRefreshonReachBottomDistanceFor 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!