微信小程序黑马优购项目实战：从tabBar配置到分包加载优化

1. 从零开始配置你的小程序tabBar

很多新手朋友刚开始做微信小程序，最头疼的就是底部那个导航栏，也就是tabBar。这东西看着简单，不就是几个图标加文字嘛，但真到自己动手配置的时候，各种问题就来了：图标不显示、页面路径不对、选中状态没反应…… 我在做黑马优购这个项目的时候，也踩过不少坑，今天就把最稳的配置方法分享给你。

首先，你得明白tabBar是干什么的。它就像你手机App底部的固定导航，比如微信的“微信”、“通讯录”、“发现”、“我”。在小程序里，它能让用户快速在几个核心页面之间切换。在黑马优购里，我们设计了四个核心页面：首页、分类、购物车、我的。这四个页面用户会频繁访问，所以必须放在tabBar里。

配置tabBar，关键就在 pages.json 这个文件。它不是我们写的Vue页面，而是小程序的全局配置文件。你新建的页面，都需要在这里声明路径。很多新手会直接在 pages 数组里加页面，但如果你希望这个页面出现在tabBar上，光加 pages 还不够，还得在 tabBar 节点里专门配置。

我给你看看黑马优购的 pages.json 里关于tabBar的核心配置：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "黑马优购"
      }
    },
    {
      "path": "pages/cate/cate",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/my/my",
      "style": {}
    }
  ],
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
}

这里有几个细节你一定要注意。第一，pagePath 里的路径，不需要写 .vue 后缀，直接从 pages 目录开始写。第二，iconPath 和 selectedIconPath 是图标的路径，我建议你专门建一个 static/tab_icons 文件夹来管理，这样结构清晰。图标尺寸官方推荐是81px * 81px，用PNG格式，背景透明，这样显示效果最好。第三，selectedColor 是选中时的文字颜色，我们项目用了红色（#C00000），你可以根据自己小程序的品牌色来调整。

配置完保存，你可能会发现tabBar没出来。这时候别慌，大概率是因为你之前运行过项目，小程序开发者工具有缓存。我的经验是，直接点工具栏的“编译”按钮旁边的下拉箭头，选择“重新编译”，或者干脆关掉开发者工具再重新打开。还有一个常见坑：如果你之前用HBuilder X创建项目时，默认生成了一个 index 页面，并且它被设置为了首页，那你的tabBar可能被这个页面“挡住”了。你需要检查 pages 数组的第一个元素，它默认就是小程序启动页。在黑马优购里，我们必须确保 pages/home/home 是 pages 数组的第一个，这样小程序一启动，显示的就是带tabBar的首页。

1.1 用Git分支管理你的tabBar开发

在实际团队开发中，我强烈建议你养成用Git分支管理功能的习惯。比如开发tabBar时，就不要直接在 master 或 main 主分支上改代码。我们可以新建一个专门的功能分支。

打开终端，进入项目根目录，执行：

git checkout -b feature/tabbar

这个命令创建并切换到了一个叫 feature/tabbar 的新分支。你在这个分支上安心配置tabBar，写代码，做测试。做完之后，提交你的更改：

git add .
git commit -m "feat: 完成底部tabBar配置"

然后切换回主分支，并合并你的功能分支：

git checkout master
git merge feature/tabbar

最后，把合并后的代码推送到远程仓库，并删除本地的功能分支：