微信小程序底部导航栏tabBar编译通过未显示，解决方法

大家好，我是千与千寻，我最近一段时间正在学习微信小程序的开发，后期希望有机会可以给知识星球里面的小伙伴去开发一些小程序，方便我们的生活。

小程序大概是包括能实现天气预报功能，日常工作备忘录，以及开发简介，这些功能之间要用什么来切换，就是微信小程序的底部导航栏，导航栏中定义一个天气预报按钮，一个备忘录按钮以及一个开发者按钮。但是在使用底部导航栏时，发现一个问题

app.json全局文件当中去定义了底层导航栏，编译通过，却没有把它显出来,，画面如下图所示：

在这里插入图片描述

后期我找到了出现这个问题的原因，是定义的这三个page页面组件，必须包含在当前显示的index组件首页。
原代码（未显示底部导航栏）

{
  "pages": [
    	"pages/index/index",
		"pages/weather/weather",
		"pages/beiwang/beiwang",
		"pages/logs/logs",
		"pages/personal/personal"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "backgroundColor": "#42c642",
    "navigationBarBackgroundColor": "#42c642",
    "navigationBarTitleText": "天气帮手",
    "navigationBarTextStyle": "black"
	},
	"tabBar": {
    "color": "#666",
    "selectedColor": "#56abe4",
    "backgroundColor": "#ddd",
		"borderStyle":"black",
    "custom": false,
    "list": [{
      "pagePath": "pages/weather/weather",
      "iconPath": "images/weather.png",
      "selectedIconPath": "images/weather.png",
      "text": "天气预报"
    }, {
      "pagePath": "pages/beiwang/beiwang",
      "iconPath": "images/beiwang.png",
      "selectedIconPath": "images/beiwang.png",
      "text": "备忘录"
    }, {
      "pagePath": "pages/personal/personal",
      "iconPath": "images/person.png",
      "selectedIconPath": "images/person.png",
      "text": "开发者"
		}],
    "position":"bottom"
  }
}

将其中的pages的index画面顺序进行颠倒即可。

在这里插入图片描述
也就是说这三个框中所标注的不包含index首页文件，因此不进行显示，默认进入的是pages第一项：

在这里插入图片描述
因此调整weather作为第一位即可。

修改后的代码：

  "pages": [
		"pages/weather/weather",
		"pages/index/index",
		"pages/beiwang/beiwang",
		"pages/logs/logs",
		"pages/personal/personal"
  ],

显示后的效果图：

在这里插入图片描述

微信小程序底部导航栏tabBar编译通过未显示，解决方法

猜你喜欢