清道夫 App 自定义 tabBar 开发文档

目标

实现按角色动态显示的底部 tabBar：

销售端 / 施工端：3 个 tab（首页、任务、我的）
调度端：4 个 tab（首页、排班、任务、我的）

技术方案

uni-app 微信小程序支持自定义 tabBar，通过 custom-tab-bar 组件实现。

1. 启用自定义 tabBar

在 src/pages.json 中：

设置 tabBar.custom = true
保留 tabBar.list 作为基础配置（微信小程序要求），但删除 iconPath / selectedIconPath，仅保留 pagePath 和 text

2. 新建自定义 tabBar 组件

文件：src/custom-tab-bar/index.vue

组件逻辑：

读取 authStore.userRole
根据角色返回不同的 tab 列表
使用 uni.switchTab 切换页面
高亮当前选中的 tab

3. tab 配置

角色	tab 列表
sales	首页 (`/pages/home/home`)、任务 (`/pages/task/task`)、我的 (`/pages/my/my`)
construction	首页 (`/pages/home/home`)、任务 (`/pages/task/task`)、我的 (`/pages/my/my`)
dispatch	首页 (`/pages/home/home`)、排班 (`/subPackages/pages-dispatch/schedule`)、任务 (`/pages/task/task`)、我的 (`/pages/my/my`)

4. 关键约束

自定义 tabBar 中的页面必须是 pages.json 中 tabBar.list 已注册的页面
但 subPackages/pages-dispatch/schedule 是分包页面，不能直接放进 tabBar.list
解决方案：在 pages 主包中建一个轻量壳页 pages/schedule/schedule.vue，内容直接渲染调度端排班组件；调度端原 subPackages/pages-dispatch/schedule.vue 保留或重定向

5. 需要修改/新建的文件

文件	操作	说明
`src/pages.json`	修改	`tabBar.custom = true`，调整 `tabBar.list`
`src/custom-tab-bar/index.vue`	新建	自定义 tabBar 组件
`src/custom-tab-bar/index.json`	新建	组件配置（component: true）
`src/pages/schedule/schedule.vue`	新建	排班 tabBar 壳页（主包）
`src/components/dispatch/ScheduleView.vue`	新建	排班实际内容组件
`src/subPackages/pages-dispatch/schedule.vue`	修改	复用 `ScheduleView` 组件
`src/pages/home/home.vue`	无需修改	已按角色渲染
`src/pages/task/task.vue`	无需修改	已按角色渲染
`src/pages/my/my.vue`	无需修改	已按角色渲染

6. 开发步骤

新建 src/components/dispatch/ScheduleView.vue，将 subPackages/pages-dispatch/schedule.vue 的内容抽成组件
新建 src/pages/schedule/schedule.vue，引入 ScheduleView
修改 subPackages/pages-dispatch/schedule.vue，改为引入 ScheduleView
新建 src/custom-tab-bar/index.vue 和 index.json
修改 src/pages.json：
- tabBar.custom = true
- tabBar.list 注册 4 个页面：home、schedule、task、my
验证构建和类型检查
在微信开发者工具中测试三个角色 tabBar 显示是否正确

7. 风险点

自定义 tabBar 首次加载可能略有延迟
分包页面不能直接作为 tabBar 页，必须通过主包壳页中转
需要确保 authStore.userRole 在 tabBar 渲染时已经可用

8. 验证方式

npm run type-check
npm run build:mp-weixin
微信开发者工具：分别用 sales/dispatch/construction 角色登录，检查底部 tabBar 数量和跳转

文档生成时间：2026-06-24