From eb10ba0a3888f4eaa1e86337aa515e4b7ac0a9ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Sun, 16 Nov 2025 20:06:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B6=88=E6=81=AF=E4=B9=9F?= =?UTF-8?q?=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/app.ts | 6 +- src/game_pages/list/index.tsx | 20 +++- src/home_pages/index.tsx | 19 ++-- src/main_pages/components/ListPageContent.tsx | 20 +++- src/static/message/comment-icon.svg | 8 +- src/store/keyboardStore.ts | 95 ++++++++++++------- 7 files changed, 115 insertions(+), 55 deletions(-) diff --git a/package.json b/package.json index 2207efa..dfded2b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "framework": "React" }, "scripts": { + "build": "npm run build:weapp", + "dev": "npm run dev:weapp", "build:weapp": "taro build --type weapp", "build:swan": "taro build --type swan", "build:alipay": "taro build --type alipay", diff --git a/src/app.ts b/src/app.ts index c197c67..aef2b49 100644 --- a/src/app.ts +++ b/src/app.ts @@ -27,8 +27,10 @@ class App extends Component { } componentDidMount() { - // 初始化字典数据 - this.getNavBarHeight(); + // 使用 requestAnimationFrame 延迟执行，避免阻塞首屏渲染 + requestAnimationFrame(() => { + this.getNavBarHeight(); + }); // this.getLocation() } diff --git a/src/game_pages/list/index.tsx b/src/game_pages/list/index.tsx index 18ca82c..9d25852 100644 --- a/src/game_pages/list/index.tsx +++ b/src/game_pages/list/index.tsx @@ -215,10 +215,26 @@ const ListPage = () => { ); useEffect(() => { - getLocation(); - fetchUserInfo(); + // 分批异步执行初始化操作，避免阻塞首屏渲染 + // 1. 立即执行：获取城市和二维码（轻量操作） getCities(); getCityQrCode(); + + // 2. 延迟执行：获取用户信息（不阻塞渲染） + requestAnimationFrame(() => { + fetchUserInfo().catch((error) => { + console.error('获取用户信息失败:', error); + }); + }); + + // 3. 延迟执行：获取位置信息（可能较慢，不阻塞首屏） + requestAnimationFrame(() => { + requestAnimationFrame(() => { + getLocation().catch((error) => { + console.error('获取位置信息失败:', error); + }); + }); + }); }, []); // 监听数据变化，如果是第一页就恢复显示搜索框 diff --git a/src/home_pages/index.tsx b/src/home_pages/index.tsx index 18df3cd..4e0c191 100644 --- a/src/home_pages/index.tsx +++ b/src/home_pages/index.tsx @@ -9,26 +9,23 @@ const HomePage: React.FC = () => { useEffect(() => { - const handleLoginRedirect = async () => { + const handleLoginRedirect = () => { const login_status = check_login_status(); if (login_status) { - try { - // 先获取用户信息 - await fetchUserInfo(); - // 用户信息获取成功后跳转到主容器页面 - Taro.redirectTo({ url: '/main_pages/index' }); - } catch (error) { + // 先跳转，不阻塞启动 + Taro.redirectTo({ url: '/main_pages/index' }); + // 异步获取用户信息，不阻塞跳转 + fetchUserInfo().catch((error) => { console.error('获取用户信息失败:', error); - // 如果获取用户信息失败，跳转到登录页 - Taro.redirectTo({ url: '/login_pages/index/index' }); - } + }); } else { Taro.redirectTo({ url: '/login_pages/index/index' }); } }; handleLoginRedirect(); - }, [fetchUserInfo]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // fetchUserInfo 是稳定的函数引用，不需要加入依赖项 return ( diff --git a/src/main_pages/components/ListPageContent.tsx b/src/main_pages/components/ListPageContent.tsx index a941395..d1027fe 100644 --- a/src/main_pages/components/ListPageContent.tsx +++ b/src/main_pages/components/ListPageContent.tsx @@ -191,10 +191,26 @@ const ListPageContent: React.FC = ({ ); useEffect(() => { - getLocation(); - fetchUserInfo(); + // 分批异步执行初始化操作，避免阻塞首屏渲染 + // 1. 立即执行：获取城市和二维码（轻量操作） getCities(); getCityQrCode(); + + // 2. 延迟执行：获取用户信息（不阻塞渲染） + requestAnimationFrame(() => { + fetchUserInfo().catch((error) => { + console.error('获取用户信息失败:', error); + }); + }); + + // 3. 延迟执行：获取位置信息（可能较慢，不阻塞首屏） + requestAnimationFrame(() => { + requestAnimationFrame(() => { + getLocation().catch((error) => { + console.error('获取位置信息失败:', error); + }); + }); + }); }, []); useEffect(() => { diff --git a/src/static/message/comment-icon.svg b/src/static/message/comment-icon.svg index 69a4659..7adf632 100644 --- a/src/static/message/comment-icon.svg +++ b/src/static/message/comment-icon.svg @@ -1,10 +1,10 @@ - - - + + + - + diff --git a/src/store/keyboardStore.ts b/src/store/keyboardStore.ts index 8b24e36..7bf8763 100644 --- a/src/store/keyboardStore.ts +++ b/src/store/keyboardStore.ts @@ -25,33 +25,13 @@ export const useKeyboardStore = create((set, get) => ({ isInitialized: false, setKeyboardHeight: (height: number) => { + // 直接更新状态，不触发监听器（监听器由 initializeKeyboardListener 统一处理） set({ keyboardHeight: height }) - const { listeners } = get() - // 使用 requestAnimationFrame 异步执行监听器，避免阻塞主线程 - requestAnimationFrame(() => { - listeners.forEach(listener => { - try { - listener(height, get().isKeyboardVisible) - } catch (error) { - console.error('键盘监听器执行错误:', error) - } - }) - }) }, setKeyboardVisible: (visible: boolean) => { + // 直接更新状态，不触发监听器（监听器由 initializeKeyboardListener 统一处理） set({ isKeyboardVisible: visible }) - const { listeners } = get() - // 使用 requestAnimationFrame 异步执行监听器，避免阻塞主线程 - requestAnimationFrame(() => { - listeners.forEach(listener => { - try { - listener(get().keyboardHeight, visible) - } catch (error) { - console.error('键盘监听器执行错误:', error) - } - }) - }) }, addListener: (listener: (height: number, visible: boolean) => void) => { @@ -73,11 +53,59 @@ export const useKeyboardStore = create((set, get) => ({ // 使用防抖优化，避免频繁触发 let lastHeight = 0 let lastTime = 0 - const debounceDelay = 16 // 约一帧的时间 + let pendingUpdate: { height: number; visible: boolean } | null = null + let rafId: number | null = null + const debounceDelay = 50 // 增加到50ms，减少更新频率 + + const applyUpdate = () => { + if (!pendingUpdate) return + + const { height, visible } = pendingUpdate + const store = get() + + // 批量更新，减少状态更新次数 + if (visible) { + set({ + isKeyboardVisible: true, + keyboardHeight: height + }) + // 异步通知监听器 + requestAnimationFrame(() => { + const { listeners } = get() + listeners.forEach(listener => { + try { + listener(height, true) + } catch (error) { + console.error('键盘监听器执行错误:', error) + } + }) + }) + } else { + set({ + isKeyboardVisible: false, + keyboardHeight: 0 + }) + // 异步通知监听器 + requestAnimationFrame(() => { + const { listeners } = get() + listeners.forEach(listener => { + try { + listener(0, false) + } catch (error) { + console.error('键盘监听器执行错误:', error) + } + }) + }) + } + + pendingUpdate = null + rafId = null + } Taro.onKeyboardHeightChange?.((res: any) => { const height = Number(res?.height || 0) const now = Date.now() + const visible = height > 0 // 防抖：如果高度没变化或时间间隔太短，忽略 if (height === lastHeight && (now - lastTime) < debounceDelay) { @@ -87,18 +115,17 @@ export const useKeyboardStore = create((set, get) => ({ lastHeight = height lastTime = now - console.log('全局键盘高度变化:', height) + // 保存待更新的状态 + pendingUpdate = { height, visible } - // 使用 requestAnimationFrame 延迟执行，避免阻塞消息处理 - requestAnimationFrame(() => { - const store = get() - if (height > 0) { - store.setKeyboardVisible(true) - store.setKeyboardHeight(height) - } else { - store.setKeyboardVisible(false) - store.setKeyboardHeight(0) - } + // 取消之前的更新 + if (rafId !== null) { + cancelAnimationFrame(rafId) + } + + // 延迟执行更新，避免阻塞消息处理 + rafId = requestAnimationFrame(() => { + requestAnimationFrame(applyUpdate) }) })