# 首页分享链接白屏问题测试指南 ## 问题描述 用户从分享的首页链接点击进入时,页面显示"加载中..."后出现白屏,但商品详情页分享链接正常。 ## 问题根因分析 1. **邀请参数处理阻塞**:首页加载时会检查邀请关系,如果API调用失败或超时,可能导致页面卡住 2. **缺少超时保护**:邀请关系处理没有合适的超时机制 3. **错误处理不完善**:网络错误时没有降级处理 ## 修复内容 已对以下文件进行修复: ### 1. `src/pages/index/index.tsx` - 添加邀请关系处理的超时保护(8秒) - 邀请处理失败不阻塞页面正常显示 - 改进错误日志记录 ### 2. `src/utils/invite.ts` - `handleInviteRelation`: 添加API调用超时(5秒) - `checkAndHandleInviteRelation`: 添加整体超时保护(6秒) - 添加失败重试计数,避免无限重试 - 区分网络错误和业务错误的处理策略 ## 测试步骤 ### 准备工作 ```bash # 重新编译项目 npm run build:weapp # 或启动开发模式 npm run dev:weapp ``` ### 测试用例1:正常首页分享链接 1. **操作步骤**: - 在小程序首页点击分享 - 分享给微信好友或群聊 - 从分享链接点击进入 2. **预期结果**: - 页面应该正常加载,不出现长时间白屏 - 如果有邀请参数,应该在后台处理,不影响页面显示 - 控制台应该有相关日志输出 ### 测试用例2:网络异常情况 1. **操作步骤**: - 在微信开发者工具中设置网络为"离线"或"慢速" - 从首页分享链接进入 2. **预期结果**: - 页面应该能正常显示基本内容 - 邀请关系处理超时后不影响页面 - 控制台显示超时错误日志 ### 测试用例3:带邀请参数的分享链接 1. **操作步骤**: - 使用带邀请参数的链接(如从经销商分享的链接) - 点击进入首页 2. **预期结果**: - 页面正常加载 - 邀请关系在后台处理 - 处理成功或失败都不影响页面显示 ## 调试方法 ### 1. 查看控制台日志 在微信开发者工具的控制台中查看以下日志: ```javascript // 正常情况下应该看到: "检测到待处理的邀请关系" "使用用户ID处理邀请关系: [用户ID]" "首页邀请关系处理成功" 或 "首页邀请关系处理失败" // 超时情况下应该看到: "邀请关系处理超时,清除邀请参数" "邀请关系处理整体超时" ``` ### 2. 手动测试邀请参数 在控制台中执行: ```javascript // 查看当前邀请参数 console.log('邀请参数:', Taro.getStorageSync('invite_params')) // 查看用户信息 console.log('用户ID:', Taro.getStorageSync('UserId')) // 手动触发邀请关系处理 import { checkAndHandleInviteRelation } from '@/utils/invite' checkAndHandleInviteRelation().then(result => { console.log('手动处理结果:', result) }) ``` ### 3. 清除测试数据 如果需要重置测试环境: ```javascript // 清除邀请相关数据 Taro.removeStorageSync('invite_params') Taro.removeStorageSync('invite_handle_fail_count') // 清除邀请关系记录 const keys = Taro.getStorageInfoSync().keys keys.forEach(key => { if (key.startsWith('invite_relation_')) { Taro.removeStorageSync(key) } }) ``` ## 性能验证 ### 页面加载时间测试 ```javascript // 在首页组件中添加性能监控 const startTime = Date.now() useEffect(() => { // 页面加载完成后 const endTime = Date.now() console.log('首页加载耗时:', endTime - startTime, 'ms') }, []) ``` ### 预期性能指标 - **正常情况**:首页应在2秒内完成基本加载 - **网络异常**:即使邀请处理失败,页面也应在10秒内显示 - **超时保护**:邀请处理最多8秒后自动放弃 ## 验证清单 - [ ] **基础功能** - [ ] 首页分享链接可以正常打开 - [ ] 页面内容正常显示 - [ ] 不出现长时间白屏 - [ ] **邀请功能** - [ ] 带邀请参数的链接正常处理 - [ ] 邀请处理失败不影响页面显示 - [ ] 超时保护机制正常工作 - [ ] **错误处理** - [ ] 网络异常时页面仍可访问 - [ ] 错误日志正常记录 - [ ] 失败重试机制正常 - [ ] **性能表现** - [ ] 页面加载时间在可接受范围 - [ ] 邀请处理不阻塞主要功能 - [ ] 内存和存储使用合理 ## 常见问题排查 ### 问题1:仍然出现白屏 **可能原因**: - 代码未正确编译 - 缓存未清理 - 其他组件加载问题 **解决方法**: ```bash # 清理缓存并重新编译 rm -rf dist/ npm run build:weapp ``` ### 问题2:邀请关系处理失败 **可能原因**: - API接口问题 - 用户信息获取失败 - 网络连接问题 **解决方法**: - 检查API接口状态 - 确认用户登录状态 - 查看网络请求日志 ### 问题3:页面加载缓慢 **可能原因**: - 邀请处理超时时间过长 - 其他API调用阻塞 **解决方法**: - 调整超时时间设置 - 优化API调用顺序 ## 成功标准 ✅ **修复成功的标志**: 1. 从首页分享链接进入不再出现长时间白屏 2. 邀请参数处理在后台进行,不阻塞页面显示 3. 网络异常时页面仍能正常访问 4. 控制台日志显示正常的处理流程 5. 页面加载时间在合理范围内 如果以上标准都满足,说明首页分享链接白屏问题已经解决。