Global configuration in applets

“This is the seventh day of my participation in the First Challenge 2022.

Global configuration files and common configuration items

The app.json file in the root directory of the applet is the global configuration file of the applet. Common configurations are as follows:

• pages: Records the path of all pages of the current applet
• window: Sets the appearance of the applet window globally
• tabBar: Sets the bottom of the applettabBarThe effect
• style: Whether to enable the new component style

window

Part of the applets window

Window Common configuration items

Set the title of the navigation bar

app.json -> window -> navigationBarTitleText

Sets the background color of the navigation bar

app.json -> window -> navigationBarBackgroundColor

Set the navigation bar title color

app.json -> window -> enablePullDownRefresh

Global enable drop-down refresh (inapp.jsonEnable the pull-down refresh function on each applet page.

Pull-down refresh: The act of reloading page data by pulling and sliding the screen with your finger

app.json -> window -> enablePullDownRefresh

Sets the background color of the drop-down refresh window

When the drop-down refresh function is enabled globally, the default window background is white. Set a custom drop-down refresh window background color

app.json -> window -> backgroundColor

Set the loading style for the drop-down refresh

When the drop-down refresh function is enabled globally, the loading of the window is white by default. Sets the effect of the loading style

app.json -> window -> backgroundTextStyle

Set the distance between the pull-up and the bottom

Pull-up: The act of loading more data by pulling and sliding a finger across a screen

app.json -> window -> onReachBottomDistance

tabBar

What is the tabBar

• TabBar is a common page effect for mobile applications. It is used to quickly switch between multiple pages.
  • At the bottom of the tabBar
  • At the top of the tabBar
• Note:
  • A tabBar can be configured with at least two tabs and a maximum of five tabs
  • When rendering the top tabBar, no icon is displayed, only text is displayed

TabBar has six sections

TabBar Common configuration items

• Configuration items of the tabBar component

  attribute	type	mandatory	The default value	instructions
  position	String	no	bottom	The location of tabBar is supported onlybottom
  borderStyle	String	no	black	The color of the border on the tabbar is supported onlyblack / white
  color	HexColor	no		Default color for text on tabBar (unchecked)
  selectedColor	HexColor	no		TabBar The default color of text when selected
  backgroundColor	HexColor	no		Background color of tabBar
  list	Array	is		TabBar TAB list, minimum 2, maximum 5

• Configuration options for each TAB

  attribute	type	mandatory	instructions
  pagePath	String	is	The page path, which must be defined in Pages first
  text	String	is	TAB button text
  iconPath	String	no	Image path, the icon size limit is 40KB, the recommended size is 81px by 81px, network images are not supported
  selectedIconPath	String	no	When selecting the image path, the icon size limit is 40KB, the recommended size is 81px by 81px, network images are not supported

Page configuration file

Page configuration file role

In the small program, each page has its own.json configuration file, used to configure the window appearance of the current page, page effect, etc

Relationship between page configuration and global configuration

• In applets, the window node in app.json can globally configure the window representation of each page in the applets

• You need to modify the page-level.json file to have a special window representation for a page in the applet

• Note:

  If the page configuration conflicts with the global configuration, the final effect is based on the page configuration

Common configuration items on the web page