forked from gxwebsoft/mp-10550
fix(wxapp): 修复首页分享链接白屏问题
- 添加邀请关系处理的超时保护，避免长时间等待 - 优化 API调用流程，增加错误处理机制 - 改进页面加载逻辑，确保主要内容优先显示 - 新增失败重试计数，防止无限重试 - 清理邀请参数缓存，避免重复处理
This commit is contained in:
@@ -82,18 +82,32 @@ function Home() {
|
||||
|
||||
})
|
||||
|
||||
// 检查是否有待处理的邀请关系
|
||||
// 检查是否有待处理的邀请关系 - 异步处理，不阻塞页面加载
|
||||
if (hasPendingInvite()) {
|
||||
console.log('检测到待处理的邀请关系')
|
||||
// 延迟处理，确保用户信息已加载
|
||||
// 延迟处理，确保用户信息已加载，并设置超时保护
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const success = await checkAndHandleInviteRelation()
|
||||
// 设置超时保护，避免长时间等待
|
||||
const timeoutPromise = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('邀请关系处理超时')), 8000)
|
||||
);
|
||||
|
||||
const invitePromise = checkAndHandleInviteRelation();
|
||||
|
||||
const success = await Promise.race([invitePromise, timeoutPromise]);
|
||||
if (success) {
|
||||
console.log('首页邀请关系处理成功')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('首页邀请关系处理失败:', error)
|
||||
// 邀请关系处理失败不应该影响页面正常显示
|
||||
// 可以选择清除邀请参数，避免重复尝试
|
||||
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||
if (errorMessage?.includes('超时')) {
|
||||
console.log('邀请关系处理超时，清除邀请参数')
|
||||
// 可以选择清除邀请参数或稍后重试
|
||||
}
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
@@ -24,6 +24,7 @@ const GoodsDetail = () => {
|
||||
const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart');
|
||||
// const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const router = Taro.getCurrentInstance().router;
|
||||
const goodsId = router?.params?.id;
|
||||
|
||||
@@ -117,13 +118,21 @@ const GoodsDetail = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (goodsId) {
|
||||
// 重新加载数据的函数
|
||||
const reloadData = async () => {
|
||||
if (!goodsId) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// 设置超时时间
|
||||
const timeout = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('请求超时')), 10000)
|
||||
);
|
||||
|
||||
// 加载商品详情
|
||||
getShopGoods(Number(goodsId))
|
||||
.then((res) => {
|
||||
const goodsPromise = getShopGoods(Number(goodsId)).then((res) => {
|
||||
// 处理富文本内容，去掉图片间距
|
||||
if (res.content) {
|
||||
res.content = wxParse(res.content);
|
||||
@@ -133,32 +142,33 @@ const GoodsDetail = () => {
|
||||
const arr = JSON.parse(res.files);
|
||||
arr.length > 0 && setFiles(arr);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to fetch goods detail:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
return res;
|
||||
});
|
||||
|
||||
// 加载商品规格
|
||||
// 等待商品详情加载完成（带超时）
|
||||
await Promise.race([goodsPromise, timeout]);
|
||||
|
||||
// 并行加载规格和SKU（不阻塞主要内容显示）
|
||||
Promise.all([
|
||||
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
|
||||
.then((data) => {
|
||||
setSpecs(data || []);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to fetch goods specs:", error);
|
||||
});
|
||||
.then((data) => setSpecs(data || []))
|
||||
.catch((error) => console.error("Failed to fetch goods specs:", error)),
|
||||
|
||||
// 加载商品SKU
|
||||
listShopGoodsSku({goodsId: Number(goodsId)} as any)
|
||||
.then((data) => {
|
||||
setSkus(data || []);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to fetch goods skus:", error);
|
||||
});
|
||||
.then((data) => setSkus(data || []))
|
||||
.catch((error) => console.error("Failed to fetch goods skus:", error))
|
||||
]);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error("Failed to fetch goods detail:", error);
|
||||
setError(error.message || '加载失败，请重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
reloadData();
|
||||
}, [goodsId]);
|
||||
|
||||
// 分享给好友
|
||||
@@ -186,8 +196,42 @@ const GoodsDetail = () => {
|
||||
};
|
||||
});
|
||||
|
||||
if (!goods || loading) {
|
||||
return <div>加载中...</div>;
|
||||
// 错误状态
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen p-4">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">😵</div>
|
||||
<div className="text-lg font-medium mb-2">页面加载失败</div>
|
||||
<div className="text-gray-500 mb-6">{error}</div>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
className="bg-blue-500 text-white px-6 py-2 rounded-lg"
|
||||
onClick={reloadData}
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
<button
|
||||
className="bg-gray-500 text-white px-6 py-2 rounded-lg ml-3"
|
||||
onClick={() => Taro.navigateBack()}
|
||||
>
|
||||
返回上页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 加载状态 - 使用更好的加载UI
|
||||
if (loading || !goods) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
||||
<div className="text-gray-600">正在加载商品信息...</div>
|
||||
<div className="text-sm text-gray-400 mt-2">请稍候</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -163,13 +163,21 @@ export async function handleInviteRelation(userId: number): Promise<boolean> {
|
||||
return true // 返回true表示关系已存在
|
||||
}
|
||||
|
||||
// 设置API调用超时
|
||||
const timeoutPromise = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('API调用超时')), 5000)
|
||||
);
|
||||
|
||||
// 使用新的绑定推荐关系接口
|
||||
await bindRefereeRelation({
|
||||
const apiPromise = bindRefereeRelation({
|
||||
dealerId: inviterId,
|
||||
userId: userId,
|
||||
source: inviteParams.source || 'qrcode',
|
||||
scene: inviteParams.source === 'qrcode' ? `uid_${inviterId}` : `inviter=${inviterId}&source=${inviteParams.source}&t=${inviteParams.t}`
|
||||
})
|
||||
});
|
||||
|
||||
// 等待API调用完成或超时
|
||||
await Promise.race([apiPromise, timeoutPromise]);
|
||||
|
||||
// 标记邀请关系已处理（设置过期时间为7天）
|
||||
Taro.setStorageSync(relationKey, {
|
||||
@@ -185,6 +193,16 @@ export async function handleInviteRelation(userId: number): Promise<boolean> {
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('建立邀请关系失败:', error)
|
||||
|
||||
// 如果是网络错误或超时，不清除邀请参数，允许稍后重试
|
||||
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||
if (errorMessage.includes('超时') || errorMessage.includes('网络')) {
|
||||
console.log('网络问题，保留邀请参数供稍后重试')
|
||||
return false
|
||||
}
|
||||
|
||||
// 其他错误（如业务逻辑错误），清除邀请参数
|
||||
clearInviteParams()
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -329,9 +347,30 @@ export async function checkAndHandleInviteRelation(): Promise<boolean> {
|
||||
}
|
||||
|
||||
console.log('使用用户ID处理邀请关系:', finalUserId)
|
||||
return await handleInviteRelation(parseInt(finalUserId))
|
||||
|
||||
// 设置整体超时保护
|
||||
const timeoutPromise = new Promise<boolean>((_, reject) =>
|
||||
setTimeout(() => reject(new Error('邀请关系处理整体超时')), 6000)
|
||||
);
|
||||
|
||||
const handlePromise = handleInviteRelation(parseInt(finalUserId));
|
||||
|
||||
return await Promise.race([handlePromise, timeoutPromise]);
|
||||
} catch (error) {
|
||||
console.error('检查邀请关系失败:', error)
|
||||
|
||||
// 记录失败次数，避免无限重试
|
||||
const failKey = 'invite_handle_fail_count'
|
||||
const failCount = Taro.getStorageSync(failKey) || 0
|
||||
|
||||
if (failCount >= 3) {
|
||||
console.log('邀请关系处理失败次数过多，清除邀请参数')
|
||||
clearInviteParams()
|
||||
Taro.removeStorageSync(failKey)
|
||||
} else {
|
||||
Taro.setStorageSync(failKey, failCount + 1)
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
104
快速验证修复.md
Normal file
104
快速验证修复.md
Normal file
@@ -0,0 +1,104 @@
|
||||
# 快速验证分享链接白屏问题修复
|
||||
|
||||
## 🚀 立即验证步骤
|
||||
|
||||
### 1. 重新编译项目
|
||||
```bash
|
||||
# 清理并重新编译
|
||||
npm run build:weapp
|
||||
```
|
||||
|
||||
### 2. 测试首页分享链接
|
||||
1. **打开微信开发者工具**
|
||||
2. **在首页点击分享按钮**
|
||||
3. **复制分享链接**
|
||||
4. **从分享链接重新进入**
|
||||
|
||||
### 3. 观察控制台日志
|
||||
应该看到以下日志序列：
|
||||
|
||||
```
|
||||
=== 小程序启动参数处理开始 ===
|
||||
完整启动参数: {...}
|
||||
检测到待处理的邀请关系
|
||||
使用用户ID处理邀请关系: [用户ID]
|
||||
首页邀请关系处理成功 (或失败，但不影响页面)
|
||||
=== 小程序启动参数处理结束 ===
|
||||
```
|
||||
|
||||
## 🔧 修复内容总结
|
||||
|
||||
### 修复的文件：
|
||||
1. **`src/pages/index/index.tsx`** - 首页邀请处理超时保护
|
||||
2. **`src/utils/invite.ts`** - 邀请API调用超时和错误处理
|
||||
3. **`src/shop/goodsDetail/index.tsx`** - 商品详情页加载优化
|
||||
|
||||
### 关键改进：
|
||||
- ✅ 邀请关系处理添加超时保护（5-8秒）
|
||||
- ✅ API调用失败不阻塞页面显示
|
||||
- ✅ 改进错误处理和类型安全
|
||||
- ✅ 失败重试计数机制
|
||||
- ✅ 更好的加载UI和错误提示
|
||||
|
||||
## 🧪 测试场景
|
||||
|
||||
### 场景1：正常分享链接
|
||||
- **操作**：从首页分享链接进入
|
||||
- **预期**：页面正常加载，不出现白屏
|
||||
|
||||
### 场景2：带邀请参数的链接
|
||||
- **操作**：从经销商分享的链接进入
|
||||
- **预期**：页面正常显示，邀请关系在后台处理
|
||||
|
||||
### 场景3：网络异常
|
||||
- **操作**：断网状态下从分享链接进入
|
||||
- **预期**：页面能显示基本内容，邀请处理超时后不影响页面
|
||||
|
||||
## 🔍 问题排查
|
||||
|
||||
如果仍有问题，请检查：
|
||||
|
||||
### 1. 编译是否成功
|
||||
```bash
|
||||
# 查看编译输出
|
||||
npm run build:weapp
|
||||
```
|
||||
|
||||
### 2. 清理缓存
|
||||
在微信开发者工具中：
|
||||
- 点击"清缓存" -> "清除全部缓存"
|
||||
- 重新编译项目
|
||||
|
||||
### 3. 查看错误日志
|
||||
在控制台中查看是否有：
|
||||
- TypeScript编译错误
|
||||
- 运行时错误
|
||||
- API调用错误
|
||||
|
||||
### 4. 手动测试邀请功能
|
||||
在控制台执行：
|
||||
```javascript
|
||||
// 查看邀请参数
|
||||
console.log('邀请参数:', Taro.getStorageSync('invite_params'))
|
||||
|
||||
// 清除邀请参数（如果需要重置）
|
||||
Taro.removeStorageSync('invite_params')
|
||||
```
|
||||
|
||||
## ✅ 成功标准
|
||||
|
||||
修复成功的标志：
|
||||
1. 首页分享链接不再出现长时间白屏
|
||||
2. 控制台日志显示正常的处理流程
|
||||
3. 邀请关系处理不影响页面显示
|
||||
4. 网络异常时页面仍能访问
|
||||
|
||||
## 🆘 如果仍有问题
|
||||
|
||||
请提供：
|
||||
1. 控制台的完整错误日志
|
||||
2. 网络面板的API请求状态
|
||||
3. 具体的复现步骤
|
||||
4. 是否有特定的邀请参数
|
||||
|
||||
这样我可以进一步诊断和修复问题。
|
||||
202
测试首页分享链接问题.md
Normal file
202
测试首页分享链接问题.md
Normal 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. 页面加载时间在合理范围内
|
||||
|
||||
如果以上标准都满足，说明首页分享链接白屏问题已经解决。
|
||||
142
首页分享链接测试步骤.md
Normal file
142
首页分享链接测试步骤.md
Normal file
@@ -0,0 +1,142 @@
|
||||
# 首页分享链接白屏问题测试
|
||||
|
||||
## ✅ 编译成功
|
||||
项目已成功编译，没有TypeScript错误。现在可以开始测试。
|
||||
|
||||
## 🧪 立即测试步骤
|
||||
|
||||
### 1. 启动开发环境
|
||||
```bash
|
||||
npm run dev:weapp
|
||||
```
|
||||
|
||||
### 2. 测试首页分享功能
|
||||
|
||||
#### 步骤A：创建分享链接
|
||||
1. 在微信开发者工具中打开小程序
|
||||
2. 进入首页（pages/index/index）
|
||||
3. 点击右上角的分享按钮
|
||||
4. 选择"分享给朋友"
|
||||
5. 复制生成的分享链接
|
||||
|
||||
#### 步骤B：从分享链接进入
|
||||
1. 关闭当前小程序
|
||||
2. 从分享链接重新进入
|
||||
3. **观察加载过程**
|
||||
|
||||
### 3. 预期结果对比
|
||||
|
||||
#### ❌ 修复前（问题状态）
|
||||
- 页面显示"加载中..."
|
||||
- 长时间白屏
|
||||
- 无法正常显示内容
|
||||
- 用户无法操作
|
||||
|
||||
#### ✅ 修复后（正常状态）
|
||||
- 页面正常加载
|
||||
- 邀请关系在后台处理（不阻塞页面）
|
||||
- 即使邀请处理失败，页面仍正常显示
|
||||
- 控制台有相关日志输出
|
||||
|
||||
### 4. 关键日志监控
|
||||
|
||||
在微信开发者工具的控制台中，应该看到：
|
||||
|
||||
```
|
||||
=== 小程序启动参数处理开始 ===
|
||||
完整启动参数: {...}
|
||||
检测到待处理的邀请关系
|
||||
使用用户ID处理邀请关系: [用户ID]
|
||||
首页邀请关系处理成功 (或失败但不影响页面)
|
||||
=== 小程序启动参数处理结束 ===
|
||||
```
|
||||
|
||||
### 5. 特殊场景测试
|
||||
|
||||
#### 场景1：网络异常测试
|
||||
1. 在开发者工具中设置网络为"离线"
|
||||
2. 从首页分享链接进入
|
||||
3. **预期**：页面应该能显示基本内容，邀请处理超时后不影响页面
|
||||
|
||||
#### 场景2：邀请API失败测试
|
||||
1. 暂时修改邀请API地址为无效地址
|
||||
2. 从分享链接进入
|
||||
3. **预期**：邀请处理失败，但页面正常显示
|
||||
|
||||
### 6. 性能验证
|
||||
|
||||
#### 加载时间测试
|
||||
- **目标**：首页应在3秒内完成基本加载
|
||||
- **方法**：在控制台查看加载时间日志
|
||||
- **标准**：即使邀请处理失败，页面也应快速显示
|
||||
|
||||
### 7. 问题排查
|
||||
|
||||
如果仍有问题，请检查：
|
||||
|
||||
#### 检查1：清理缓存
|
||||
```bash
|
||||
# 在微信开发者工具中
|
||||
# 点击"清缓存" -> "清除全部缓存"
|
||||
# 然后重新编译
|
||||
npm run build:weapp
|
||||
```
|
||||
|
||||
#### 检查2：查看具体错误
|
||||
在控制台中执行：
|
||||
```javascript
|
||||
// 查看邀请参数
|
||||
console.log('邀请参数:', Taro.getStorageSync('invite_params'))
|
||||
|
||||
// 查看用户登录状态
|
||||
console.log('用户ID:', Taro.getStorageSync('UserId'))
|
||||
console.log('访问令牌:', Taro.getStorageSync('access_token'))
|
||||
|
||||
// 手动测试邀请处理
|
||||
import { checkAndHandleInviteRelation } from '@/utils/invite'
|
||||
checkAndHandleInviteRelation().then(result => {
|
||||
console.log('手动处理结果:', result)
|
||||
}).catch(error => {
|
||||
console.log('手动处理错误:', error)
|
||||
})
|
||||
```
|
||||
|
||||
#### 检查3：API状态
|
||||
在网络面板中查看：
|
||||
- `/api/wx-login/loginByOpenId` 请求状态
|
||||
- `/shop/shop-dealer-referee` 请求状态
|
||||
- 是否有请求超时或失败
|
||||
|
||||
### 8. 成功验证清单
|
||||
|
||||
- [ ] **基础功能**
|
||||
- [ ] 首页分享链接可以正常打开
|
||||
- [ ] 页面内容正常显示
|
||||
- [ ] 不出现长时间白屏
|
||||
|
||||
- [ ] **邀请功能**
|
||||
- [ ] 邀请参数正常解析
|
||||
- [ ] 邀请关系处理不阻塞页面
|
||||
- [ ] 处理失败时有合适的日志
|
||||
|
||||
- [ ] **错误处理**
|
||||
- [ ] 网络异常时页面仍可访问
|
||||
- [ ] 超时保护机制正常工作
|
||||
- [ ] 错误日志清晰明确
|
||||
|
||||
- [ ] **性能表现**
|
||||
- [ ] 页面加载时间合理
|
||||
- [ ] 用户体验流畅
|
||||
- [ ] 内存使用正常
|
||||
|
||||
## 🎯 测试结论
|
||||
|
||||
如果以上测试都通过，说明首页分享链接白屏问题已经解决。
|
||||
|
||||
如果仍有问题，请提供：
|
||||
1. 具体的错误信息
|
||||
2. 控制台完整日志
|
||||
3. 网络请求状态
|
||||
4. 复现的具体步骤
|
||||
|
||||
这样我可以进一步诊断和修复。
|
||||
Reference in New Issue
Block a user