fix(miniapps): Tab 切换后小程序窗口不可见问题修复 #149
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When switching bottom tabs away from ecosystem and back, the miniapp window became invisible (opacity 0) because: 1. EcosystemTab uses React 19 <Activity mode='hidden'> which unmounts/pauses the child tree 2. MiniappWindowStack slots get unregistered when unmounted 3. But runtime app state remained 'active' with no re-activation on return Fix: Call activateApp() when EcosystemTab remounts to restore the active miniapp's visibility state. Adds E2E regression test for tab-switch visibility.
Add slot status management in runtime-refs.ts: - slotStatusMap tracks slot ready/lost state - subscribeSlotStatus() for React subscription - getSlotStatus() for querying Add useSlotStatus hook using useSyncExternalStore MiniappWindowPortal now: - Subscribes to slot status - Uses fallback container when slot lost - Disables layoutId when slot lost to prevent animation issues - Sets visibility:hidden when slot lost This fixes miniapp becoming invisible after tab switch.
Replace Activity mode='hidden' with display:none for EcosystemTab to prevent MiniappWindowStack slots from being unregistered during tab switch. This ensures miniapp windows remain visible after switching tabs away from ecosystem and back. Activity mode='hidden' may pause/unmount components causing slot unregistration, while display:none keeps the component fully mounted.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
问题描述
启动小程序后，切换底部 Tab 离开生态页再切回，小程序窗口变为不可见（opacity: 0）。
根本原因
MiniappWindow在StackflowApp全局层渲染，通过createPortal把内容传送到MiniappWindowStack的 slot 中MiniappWindowStack在EcosystemDesktop内，被Activity mode='hidden'包裹Activity可能暂停组件，导致 slot 被注销MiniappWindowPortal获取不到portalHost，返回 null 或动画到错误位置解决方案
方案 1: Slot 生命周期机制
runtime-refs.ts中添加 slot 状态管理（slotStatusMap）useSlotStatushook 订阅 slot 状态MiniappWindowPortal当 slot lost 时使用 fallback 容器，禁用 layoutId方案 2: 避免 Activity 包裹 EcosystemTab
display: none替代Activity mode='hidden'控制EcosystemTab可见性变更文件
src/services/miniapp-runtime/hooks.ts- 新增useMiniappVisibilityRestore和useSlotStatussrc/services/miniapp-runtime/runtime-refs.ts- 添加 slot 状态管理src/components/ecosystem/miniapp-window.tsx- 使用 slot 状态控制渲染src/stackflow/activities/MainTabsActivity.tsx- EcosystemTab 使用 display:nonesrc/StackflowApp.tsx- 添加 fallback 容器src/components/ecosystem/miniapp-window.stories.tsx- 添加 Tab 切换测试