Problems and solutions related to tabbar page display in mini program development

Yesterday during the development process of the WeChat applet, I encountered a situation where the tabbar was clearly defined, but it was never displayed. Searching on the Internet, I found that if there are students who have used tabbar during the development of WeChat applet, many of them also encountered the same

problems. 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 will sort out the problems I encountered during the development process and share with you a small program development tutorial.

Many netizens (including myself) have also encountered this kind of problem. I would like to remind everyone to think carefully and check whether the writing is correct! is written correctly as tabBar, do not write it as tabbar! If it is confirmed that the writing is correct, clearly adds tabbar in app.json, and

also adds path in list, why is it not displayed? For example, in the following code, why does the tabbar not appear at the bottom of the screen as expected?

]

}

}

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


The reason is: The first item of the pages array must be a member of the tabBar's list array.
We can 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 content of the list array in tabbar is:

"list": [

{

"pagePath": "pages/index/index",

"text": "Homepage",

"iconPath": "image/location_normal.png",

"selectedIconPath": "image/location_selected.png"

},

{

"pagePath": "pages/logs/logs",

"text": "Settings",

"iconPath": "image/setting_normal.png",

"selectedIconPath": "image/setting_selecred.png"

}

Have you noticedWhy the TabBar does not appear at the bottom? The reason is that the first item "pages/clickDemo/clickDemo" in the pages array in the head of app.json has not become a member of tabBar, that is, there is no link click# in the list array of tabBar.

## Entries on the Demo page.
【Solution 1】.We add entries linking to the clickDemo page in the list array. This code is given below.

##{

"pagePath": "pages/clickDemo/clickDemo",

"text": "EventDemo",

"iconPath": "image/setting_normal.png",

"selectedIconPath": "image/setting_selecred.png"

}

The effect is as follows:

[Solution 2]. Set the first item of the pages array to "pages/index/index", Or set 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 configured for the first time. Display tabbar on non-home page?

I haven’t thought of a solution for this yet, and I haven’t found any answers to related questions on the Internet. Everyone is welcome to help.

##[Solution]

Question 4: Sometimes the wx.navigateTo event of the button button is added to the new page, but I don’t know why it cannot jump. Only by removing the tabBar can you jump to

【Solution】

Jump to new page Jump Go to the current page