“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

The property name type The default value instructions
navigationBarTitleText String string Navigation bar title text content
navigationBarBackgroundColor HexColor # 000000 Navigation bar background color
navigationBarTextStyle String white The navigation bar title color can be black or white only
backgroundColor HexColor #ffffff Background color of the window
backgroundTextStyle String dark Pull-down loading mode, dark/ Light only
enablePullDownRefresh Boolean false Whether to enable drop-down refresh globally
onReachBottomDistance Number 50 The distance, in unit of px, from the bottom of the page when the pull-up event is triggered

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

attribute type The default value instructions
navigationBarBackgroundColor HexColor # 000000 Current navigation bar background color
navigationBarTextStyle String white The navigation bar title color can be black or white only
navigationBarTitleText String Current navigation bar title text content
backgroundColor HexColor #ffffff The background color of the current window
backgroundTextStyle String dark The current page dropdown loading mode supports only dark/ Light
enablePullDownRefresh Boolean false Whether to enable drop-down refresh for the current page
onReachBottomDistance Number 50 Distance to the bottom of the page when the pull-up event is triggered, in unit of px