preface

Today, let’s take a look at the global configuration and page configuration in wechat applet. Page configuration and global configuration exist at the same time. Which one will take effect? Let’s take a look

1. Global configuration

1. App. json configuration file

The app.json file in the root directory of the applets is used for global configuration of wechat applets.

It determines the path of page files, window presentation, setting network timeout, setting multiple tabs, and so on.

In the app.json configuration file, the main configuration nodes are:

  • pagesArray: Configures the page path of the applet
  • windowObject: used to set the status bar, navigation bar, title, window background color of the applet
  • tabBarObject: Configures the TAB bar effect of the applet

Note: Global configuration documents

2. The pages array

The Pages array in app.json is used to configure the page path of the applet

Basic configuration

  • Pages is used to specify which pages are composed of a small program, each item corresponds to a page path + file name information.

  • The file name does not need to be suffixed. The framework automatically finds the corresponding.json,.js,.wxml, and.wxss files for processing.

Another way to create a page

  • Open app.json –> Pages array node –> add page path and save –> automatically create the page corresponding to the path

Set the front page of the project

  • Open the app.json -> Pages array node

  • The default home page can be modified by adjusting the order of the paths in the array as needed

Matters needing attention:

  1. The first item in the array represents the initial page of the applet, which is the home page

  2. To add or subtract pages from the applet, you need to modify the Pages array, otherwise an error will be reported when running the applet

2. Modify the configuration file

1. Set the navigation bar title

  • app.json –> window –> navigationBarTitleText
  • Modify the attribute value

2. Set the background color of the navigation bar

  • app.json –> window –> navigationBarBackgroundColor
  • Change the property value to the specified color

3. Set the navigation bar title color

  • app.json –> window –> navigationBarTextStyle
  • Change the property value to the specified color

4. Enable the drop-down refresh function globally

The act of reloading page data by pulling and sliding a finger across a screen

App. json –> window –> Set enablePullDownRefresh to true

5. Set the background color of the drop-down refresh window

When the drop-down refresh function is enabled globally, the default window background is white

app.json -> window -> backgroundColor

6. Set the drop-down loading style

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

app.json –> window –> backgroundTextStyle

7. Set the distance between the pull-up and the bottom

The act of pulling and sliding a finger on a screen to load more data

app.json –> window –> onReachBottomDistance

Note: The default distance is50pxIf there are no special requirements, you are advised to use the default value

Third, the tabBar

1. The concept

TabBar is a common page effect in mobile applications, which is used to quickly switch between multiple pages. Applets are usually divided into bottom tabBar and top tabBar

Note:tabBarIn, you can only configure a minimum of 2 and a maximum of 5 TAB tabs when rendering toptabBarWhen, do not displayiconOnly text is displayed

Note: Tabbar detailed documentation

2. Components

  • backgroundColor: Navigation bar background color
  • selectedIconPath: Image path when selected
  • borderStyle:tabBarThe color of the top border
  • iconPath: Image path if not selected
  • selectedColor:tabThe color of the text on
  • color:tabDefault (unchecked) color for text on

3. TabBar configuration items

  • TabBar Configuration item of a node

    attribute type mandatory The default value describe
    color HexColor is . Default text color on TAB. Only hexadecimal color is supported
    selectedColor HexColor is . The color of the text on TAB. Only hexadecimal colors are supported
    backgroundColor HexColor is . The background color of TAB. Only hexadecimal color is supported
    borderStyle string no black The color of the border on the tabBar is supported onlyblack / white
    list Array is . For a list of tabs, seelistProperty description: A minimum of two to a maximum of five tabs
    position string no bottom The location of tabBar is supported onlybottom/ top
    custom boolean no false Custom tabBar

  • List Configuration items of the node

    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, icon size limit is 40KB, recommended size 81px by 81px
    selectedIconPath string no The icon size limit for the selected image path is 40KB and the recommended size is 81px by 81px

    Note:

    1. None of them support web images
    2. When Position is top, icon is not displayed

4. Page configuration

  1. The window node in app.json can globally configure the window representation of each page in the applet;

  2. If some applet pages want to have a special window representation, a page-level.json configuration file can do this.

Note: The page-level configuration takes effect before the global configuration

Note:Page Detailed configuration documents

conclusion

Sow nothing, reap nothing.