微信小程序 TabBar 完整配置教程让科技服务于人民您的支持是我继续创作及维护的动力感谢打赏祝您工作顺利生活美满app.json 直接改一、核心规则pagePath路径 绝对不能以/开头。最前面不能加斜杠页面必须先在最外层pages数组注册才能放进 tabBartabBar 最少 2 项、最多 5 项组成二、最简完整 app.json 模板{pages:[pages/index/index,pages/cart/cart,pages/my/my],window:{navigationBarTitleText:小程序,},tabBar:{backgroundColor:#ffffff,selectedColor:#E4393C,list:[{pagePath:pages/index/index,text:首页,iconPath:images/home.png,selectedIconPath:images/home-active.png},{pagePath:pages/cart/cart,text:购物车,iconPath:images/cart.png,selectedIconPath:images/cart-active.png},{pagePath:pages/my/my,text:我的,iconPath:images/my.png,selectedIconPath:images/my-active.png}]}}三、各字段说明1. tabBar 节点 顶层常用配置项属性类型必填默认值描述listArray是tab 页签的列表最少 2 个、最多 5 个 tabpositionString否bottomtabBar 的位置仅支持bottom底部 /top顶部borderStyleString否blacktabBar 上边框的颜色仅支持black/whitecolorHexColor否tab 上文字的默认未选中颜色selectedColorHexColor否tab 上的文字选中时的颜色backgroundColorHexColor否tabBar 的背景色2. List 数组中每一个tab项的配置对象 包含属性如下属性类型必填描述pagePathString是页面路径页面必须在 pages 中预先定义textString是tab 上显示的文字iconPathString否未选中时的图标路径当 position 为top时不显示 iconselectedIconPathString否选中时的图标路径当 position 为top时不显示 icon注意 :pagePath页面路径和 pages 里写法完全一致。四、分步操作步骤在项目根目录新建文件夹例如images放入 tab 图标在pages数组先声明所有 tab 需要用到的页面在根层级添加tabBar配置粘贴list数组保存 app.json开发者工具自动编译底部tab立即生效五、常见报错排查pagePath should not begin with /→ 删除路径最前面的/点击tab提示页面不存在→ 检查pages数组里有没有该页面路径大小写、文件名必须完全一致图标不显示→ 图标路径写错建议用相对根目录路径图标尺寸建议 81px × 81px六、隐藏tabBar页面单独隐藏在对应页面的 xxx.json 里添加{navigationBarTitleText:详情页,tabBar:{visible:false}}