WeChat mini program development bottom navigation

WeChat Mini Program Development

Introduction:

The application architecture of a set of software includes data layer, business logic layer, service layer, There are multiple levels such as control layer, presentation layer, and user.

Main configuration file app.json:

The main configuration file app.json is located in the project home directory and is used to configure the current project globally.

The code example is as follows:

{
  "pages": [
    "pages/index/index",
    "pages/new/new",
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarTextStyle": "black"
  }
}

There are two pages in the above code. This is a json object. The attribute pages is used to define the pages of the mini program. The above code indicates that there are two pages. Pages, one is named "index" and is located under "pages/index", and the other is named new and is located under "page/new".

The first item in the pages array represents the initial page of the mini program, that is, the page that will be run and displayed when the mini program is started. If you continue to add pages, you can add them to the pages array.

Configuration status:

backgroundColor: used to set the background color of the window, which is the same as the color setting in HTML. Use hexadecimal rgb to set the color. Default is white.

backgroundTextStyle: used to set the drop-down background font and loading image style, with two values: "dark" and "light".

enablePullDownRefresh: used to set whether to enable pull-down refresh, the default is false.

navigationBarBackgroundColor: Used to set the background color of the navigation bar.

navigationBarTextStyle: Set the navigation bar title color.

navigationBarTitleText: Set the text content of the navigation bar title.

Configure bottom navigation:

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_HOME.png",
      "selectedIconPath": "images/icon_HOMEED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    }, 
    {
      "pagePath": "pages/new/new",
      "text": "广场",
      "iconPath": "images/icon_GUANGCHANG.png",
      "selectedIconPath": "images/icon_GUANGCHANGED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    },
    {
      "pagePath": "pages/userConsole/userConsole",
      "text": "设置",
      "iconPath": "images/icon_SET.png",
      "selectedIconPath": "images/icon_SETED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    }]
  }

tabBar is the bottom navigation. There are three bottom navigations in the above code.

Color: Set the tab inactive state Text color.

selectedColor: Set the text color of the tab activation state.

borderStyle: Set the bottom navigation border.

backgroundColor: Set the bottom navigation background color.

list: This is a number, set the number of bottom navigation, minimum 2, maximum 5.

text: Set navigation text.

The page displayed by pagePath, text text, iconPath inactive icon, selectedIconPath activated icon.

The above is the detailed content of WeChat mini program development bottom navigation. For more information, please follow other related articles on the PHP Chinese website!