记录微信小程序tabbar不显示问题：uni-app Vue 3 自定义 tabBar 不渲染

⚡⚡⚡ 欢迎预览，批评指正⚡⚡⚡

uniapp项目运行编译在游览器后，tabbar显示正常，但是在微信开发者工具中测试运行项目时发现不显示tabbar

。

uni-app Vue 3 编译到微信小程序时，pages.json 中配置的：

javascript 复制代码

json
"tabBar": {
  "custom": true
}

自动实例化机制不可靠。框架并未按预期自动创建并挂载 custom-tab-bar 组件，导致自定义 tabBar 完全不显示。

在全部 4 个 tabBar 页面中，显式引入组件并在模板中手动放置。

确保自定义 tabBar 组件位于：

javascript 复制代码

text
src/
└── custom-tab-bar/
    └── index.vue

需要对以下 4 个文件做完全相同的修改：

javascript 复制代码

pages/home/home.vue

pages/points/points.vue

pages/profile/profile.vue

pages/upload/upload.vue

修改内容

① 在

javascript 复制代码

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
// 其他 import...
</script>

② 在中放置组件

javascript 复制代码

<template>
  <view class="page-container">
    <!-- 页面原有内容 -->
    
    <!-- 手动放置自定义 tabBar -->
    <CustomTabBar />
  </view>
</template>

③ 关键样式（已在组件内或全局保证）

javascript 复制代码

.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

重新编译

javascript 复制代码

npm run dev:mp-weixin

javascript 复制代码

# 或
npx uni -p mp-weixin

验证点

方案	可靠性	说明
custom: true 自动实例化	❌ 不可靠	uni-app Vue 3 编译到小程序时存在 bug
手动引入 + 放置	✅ 可靠	完全可控，不依赖框架的自动实例化逻辑

javascript 复制代码

.page-container {
  padding-bottom: 100rpx; /* 根据 tabBar 高度调整 */
}

感谢阅读，下期更精彩 👋👋👋