Bottom bar of WeChat applet

The knowledge used in the bottom bar of the WeChat applet - global configuration of the tabBar item in the

app.json file.
If the applet is a multi-tab application (the bottom or top of the client window has a tab bar to switch pages), you can configure the item through the tabBar Specify the behavior of the tab bar and the corresponding page displayed when the tab is switched.

Tip:
When the position is set to top, it will not be displayed
that the list in the icon tabBar is an array, and only a minimum of 2 and a maximum of 5 tabs can be configured, and the tabs are sorted in the order of the array.

for example

"tabBar": {
"color": "red",
"background": "gray",
"selectedColor": "green",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/miao.png",
"selectedIconPath": "images/miao.png"
},
{
"pagePath": "pages/test/test",
"text": "日志",
"iconPath": "images/miao.png",
"selectedIconPath": "images/miao.png"
}
]
},
"debug": "true",
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
}

Note: The path page in pagePath must be written in page

"pages": [
    "pages/index/index",
    "pages/login/login",
        "pages/logs/logs",
    "pages/test/test",
    "pages/xiangqing/xiangqing",
    "pages/user/user"

  ],

And there can be no comments in app.json (WeChat is a arrogant person!!!!)

character: whole app.json

{
  "pages": [
    "pages/index/index",
    "pages/login/login",
        "pages/logs/logs",
    "pages/test/test",
    "pages/xiangqing/xiangqing",
    "pages/user/user"

  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "一只大喵喵",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "red",
    "background": "gray",
    "selectedColor": "green",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/miao.png",
        "selectedIconPath": "images/miao.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "日志",
        "iconPath": "images/miao.png",
        "selectedIconPath": "images/miao.png"
      }
    ]
  },
  "debug": "true",
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}