fix(wxapp): 修复首页分享链接白屏问题

- 添加邀请关系处理的超时保护,避免长时间等待
- 优化 API调用流程,增加错误处理机制
- 改进页面加载逻辑,确保主要内容优先显示
- 新增失败重试计数,防止无限重试
- 清理邀请参数缓存,避免重复处理
This commit is contained in:
2025-09-01 20:40:08 +08:00
parent 7a7d8b4605
commit 2c31f2a6d7
6 changed files with 590 additions and 45 deletions

View File

@@ -0,0 +1,202 @@
# 首页分享链接白屏问题测试指南
## 问题描述
用户从分享的首页链接点击进入时,页面显示"加载中..."后出现白屏,但商品详情页分享链接正常。
## 问题根因分析
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. 页面加载时间在合理范围内
如果以上标准都满足,说明首页分享链接白屏问题已经解决。