# Fix: 自定义 tabBar 不显示 ## 根因 `src/custom-tab-bar/index.vue` 使用的是 Vue 单文件组件(SFC)格式。但当前 `@dcloudio/uni-app` 版本(`3.0.0-4080420251103001`)在编译到微信小程序时,并未将 `custom-tab-bar/index.vue` 编译为微信小程序原生组件格式(`wxml`/`wxss`/`js`/`json`),而是原样复制为 `.vue` 文件输出到 `dist/build/mp-weixin/custom-tab-bar/index.vue`。微信小程序运行时无法识别 `.vue` 文件,因此自定义 tabBar 完全不渲染。 验证:构建产物 `dist/build/mp-weixin/custom-tab-bar/` 下仅有 `index.vue` 与 `index.json`,缺少微信小程序所需的 `index.wxml`、`index.wxss`、`index.js`。 ## 修复方案 将 `src/custom-tab-bar/index.vue` 替换为微信小程序原生自定义 tabBar 组件: - `src/custom-tab-bar/index.wxml`:tabBar 结构 - `src/custom-tab-bar/index.wxss`:tabBar 样式 - `src/custom-tab-bar/index.js`:读取 `user` 缓存判断角色、切换 tab、高亮当前 tab - `src/custom-tab-bar/index.json`:保持 `{ "component": true }` 保留原有业务逻辑: - 销售/施工角色显示 3 个 tab:首页、任务、我的 - 调度角色显示 4 个 tab:首页、排班、任务、我的 - 使用静态图标资源 `src/static/tabbar/*.png` 替换字符图标 ## 实施计划 1. 删除 `src/custom-tab-bar/index.vue`。 2. 新建 `src/custom-tab-bar/index.wxml`、`index.wxss`、`index.js`。 3. 运行 `npm run type-check` 与 `npm run build:mp-weixin`。 4. 检查构建产物中 `custom-tab-bar/` 是否生成 `wxml`/`wxss`/`js`/`json`。 5. 提交修复。 ## 验收标准 - `dist/build/mp-weixin/custom-tab-bar/` 下包含 `index.wxml`、`index.wxss`、`index.js`、`index.json`。 - 微信开发者工具/真机预览中,tabBar 页面底部出现自定义 tabBar。 - 切换 tab 时高亮状态正确。 - 调度角色登录后显示 4 个 tab(首页/排班/任务/我的)。