Detailed explanation of the solution to the tabbar page display problem during the development of WeChat mini programs

If there are students who have used tabbar during the development process of WeChat applet, I believe they will encounter some troubles. Why sometimes the tabbar has been added to app.json in the code, but it is not displayed on the page? Can some pages display tabbars and some pages not display tabbars? Today I have sorted out the problems I encountered during the development process to share with you.
Question 1: Why is the tabbar not displayed at the bottom of the page?
Many netizens (including myself) have also encountered this kind of problem. Tabbar is clearly added in app.json, and the path is also added in list. Why is it not displayed? Woolen cloth? For example, in the following code, why does the tabbar not appear at the bottom of the screen as expected?

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark ",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "设置",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }
    ]
  }
}

Let’s take a look at the display results of the page as follows:

The reason is: the first item of pagesarray must be tabBar A member of the list array.
We can take a look at the contents of the pages array in the above code:

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]

The contents of the list array in tabbar are:

"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}

Did you find out why the TabBar does not appear at the bottom? The reason is that the first item "pages/clickDemo/clickDemo" in the pages array in the app.json header has not become a member of tabBar, that is, there is no entry linking to the clickDemo page in the list array of tabBar.

[Solution] 1. We add the entry linking to the clickDemo page in the list array. This code is given below.

{
  "pagePath": "pages/clickDemo/clickDemo",
  "text": "事件Demo",
  "iconPath": "image/setting_normal.png",
  "selectedIconPath": "image/setting_selecred.png"
}

The effect is as follows:

Method 2. Set the first item of the pages array to "pages/index/index", or set it to "pages /logs/logs". Of course this method is not what we expected to see. After practice, we found that the first item (homepage) in the pages array in app.json must appear in the tabBar---list array. It doesn't matter which one is in the list; but if the homepage is not in the list, of course it cannot be rendered. This is It can be understood that app.json is the first page configuration.
Question 2: Is there any way to prevent the tabbar from being displayed on the homepage of the mini program instead of displaying the tabbar on the homepage?
We haven’t thought of a solution for this yet, everyone is welcome to help.
Question 3: Some pages are not in the tabbar list page. Why is the tabbar also displayed at the bottom of the page? If you redirectTo from a first-level page to another page, you will find that TabBar will be displayed even if the other page is not in the list defined by TabBar. How to solve this problem?
[Solution] If the current page is also a first-level page, and the page you want to jump to does not have a Tabbar, do not use redirectTo but use navigateTo.

The above is the detailed content of Detailed explanation of the solution to the tabbar page display problem during the development of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!