Skip to content

fix(weapp): compile custom tabbar with vite runner - #19465

Merged
Muyouz merged 1 commit into
NervJS:mainfrom
Adamlyu-hub:fix/vite-runner-custom-tab-bar
Aug 6, 2026
Merged

Muyouz merged 1 commit into
NervJS:mainfrom
Adamlyu-hub:fix/vite-runner-custom-tab-bar

Conversation

@Adamlyu-hub

@Adamlyu-hub Adamlyu-hub commented Aug 4, 2026 •

Copy link
Copy Markdown
Contributor

… mini program

这个 PR 做了什么? (简要描述所做更改)
修复微信小程序使用 Vite 编译器时,自定义 tabbar 未被收集和编译的问题。
当项目配置 tabBar.custom: true,并存在
src/custom-tab-bar/index 时,Vite runner 现在会自动收集该组件并生成对应的小程序产物。
同时,custom tabbar 使用 Component(createComponentConfig(...))
进行注册,普通页面仍使用 Page(createPageConfig(...)) 注册。
修复后,React 函数组件形式的 custom tabbar 可以正常生成并渲染。

这个 PR 是什么类型? (至少选择一个)

这个 PR 涉及以下平台:

  • 所有平台
  • Web 端(H5)
  • 移动端(React-Native)
  • 鸿蒙(Harmony)
  • 鸿蒙容器(Harmony Hybrid)
  • ASCF 元服务
  • 快应用(QuickApp)
  • 所有小程序
  • 微信小程序
  • 企业微信小程序
  • 京东小程序
  • 百度小程序
  • 支付宝小程序
  • 支付宝 IOT 小程序
  • 钉钉小程序
  • QQ 小程序
  • 飞书小程序
  • 快手小程序
  • 头条小程序

Summary by CodeRabbit

  • 新功能

    • 支持自定义 TabBar 页面自动识别与编译。
    • 配置并提供对应页面文件后,自定义 TabBar 可正常加载并显示。
  • 问题修复

    • 修复自定义 TabBar 页面使用常规页面加载方式导致的运行异常。
    • 改善启用自定义 TabBar 的应用页面初始化体验。

@coderabbitai

coderabbitai Bot commented Aug 4, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

此变更支持自定义 TabBar 页面。编译器在配置和脚本存在时收集该页面。运行时使用 Component() 和 createComponentConfig,普通页面仍使用 Page() 和 createPageConfig。

Changes

自定义 TabBar 页面支持

Layer / File(s) Summary
收集并实例化自定义 TabBar
packages/taro-vite-runner/src/utils/compiler/mini.ts, packages/taro-vite-runner/src/mini/page.ts
编译器检查自定义 TabBar 配置和脚本,并编译 custom-tab-bar/index。页面加载逻辑根据页面名称选择组件配置或页面配置。

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant TaroCompilerContext
  participant compilePage
  participant pages
  participant page_ts
  TaroCompilerContext->>TaroCompilerContext: 检查自定义 TabBar 配置和脚本
  TaroCompilerContext->>compilePage: 编译 custom-tab-bar/index
  compilePage->>pages: 加入编译后的页面
  page_ts->>page_ts: 检查 page.name
  page_ts->>page_ts: 使用 Component 和 createComponentConfig
Loading

Poem

兔子敲键盘,TabBar 入场。
配置满足,页面编译忙。
Component() 轻轻登场,
普通页面仍守旧章。
耳朵一抖,构建通过。

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了使用 Vite runner 编译微信小程序自定义 tabbar 的主要变更。
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/taro-vite-runner/src/utils/compiler/mini.ts (1)

96-96: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

将 'custom-tab-bar/index' 提取为共享常量。 两个文件各自硬编码了相同的字符串 'custom-tab-bar/index',用于标识自定义 tabBar 页面。这是同一个根本原因:缺少一个共享常量。将其提取为常量并在两处引用,能避免未来修改时出现不一致。

  • packages/taro-vite-runner/src/utils/compiler/mini.ts#L96: 将字面量 'custom-tab-bar/index' 替换为从共享模块导入的常量。
  • packages/taro-vite-runner/src/mini/page.ts#L62: 将字面量 'custom-tab-bar/index' 替换为同一个共享常量,用于 page.name === CUSTOM_TAB_BAR_NAME 判断。
♻️ 提取常量示例
+export const CUSTOM_TAB_BAR_NAME = 'custom-tab-bar/index'
   collectCustomTabBar () {
     if (!this.app.config.tabBar?.custom) return

-    const customTabBarName = 'custom-tab-bar/index'
+    const customTabBarName = CUSTOM_TAB_BAR_NAME
     const scriptPath = resolveMainFilePath(path.join(this.sourceDir, customTabBarName), this.frameworkExts)
-        const isCustomTabBar = page.name === 'custom-tab-bar/index'
+        const isCustomTabBar = page.name === CUSTOM_TAB_BAR_NAME
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/taro-vite-runner/src/utils/compiler/mini.ts` at line 96, Extract the
shared custom tabBar identifier into a common module, then replace the hardcoded
string in packages/taro-vite-runner/src/utils/compiler/mini.ts at lines 96-96
with the shared constant and likewise replace the literal in
packages/taro-vite-runner/src/mini/page.ts at lines 62-62 used by the page.name
comparison. Import the same constant in both locations so future changes remain
consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/taro-vite-runner/src/utils/compiler/mini.ts`:
- Line 96: Extract the shared custom tabBar identifier into a common module,
then replace the hardcoded string in
packages/taro-vite-runner/src/utils/compiler/mini.ts at lines 96-96 with the
shared constant and likewise replace the literal in
packages/taro-vite-runner/src/mini/page.ts at lines 62-62 used by the page.name
comparison. Import the same constant in both locations so future changes remain
consistent.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: fdf7a769-2fb6-4aeb-8fa6-681f7032894d

📥 Commits

Reviewing files that changed from the base of the PR and between dd4f0fb and 5017684.

📒 Files selected for processing (2)
  • packages/taro-vite-runner/src/mini/page.ts
  • packages/taro-vite-runner/src/utils/compiler/mini.ts

@codecov

codecov Bot commented Aug 4, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 55.68%. Comparing base (dd4f0fb) to head (5017684).

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main   #19465   +/-   ##
=======================================
  Coverage   55.68%   55.68%           
=======================================
  Files         451      451           
  Lines       23764    23764           
  Branches     5889     5885    -4     
=======================================
  Hits        13233    13233           
- Misses       8681     8777   +96     
+ Partials     1850     1754   -96     
Flag Coverage Δ
taro-cli 56.37% <ø> (ø)
taro-runtime 58.63% <ø> (ø)
taro-web 53.12% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.
see 53 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ZakaryCode ZakaryCode added the T-weapp Target - 编译到微信小程序 label Aug 5, 2026
@ZakaryCode ZakaryCode added the A-runner Area - Webpack runner 相关 label Aug 5, 2026
@ZakaryCode
ZakaryCode requested a review from Muyouz August 5, 2026 02:44
@Muyouz

Muyouz commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

方向正确。Vite 下补充 custom-tab-bar 收集,并用 Component(createComponentConfig(...)) 注册,符合微信自定义 tabBar 的预期,可以合。

@github-project-automation github-project-automation Bot moved this from Todo to In Progress in Mini Program Aug 6, 2026
@Muyouz Muyouz added this to the 4.2.2 milestone Aug 6, 2026
@Muyouz
Muyouz merged commit 30ccf42 into NervJS:main Aug 6, 2026
25 checks passed
@github-project-automation github-project-automation Bot moved this from In Progress to Done in Mini Program Aug 6, 2026
sammyfeng0530 pushed a commit that referenced this pull request Sep 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-runner Area - Webpack runner 相关 T-weapp Target - 编译到微信小程序

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Taro v4.1.11 自定义Tabbar后,H5页面的taro-tabbar__container没有指定高度导致页面空白

3 participants