diff --git a/docs/LOADING_ISSUE_SOLUTION.md b/docs/LOADING_ISSUE_SOLUTION.md new file mode 100644 index 0000000..5a8b1b5 --- /dev/null +++ b/docs/LOADING_ISSUE_SOLUTION.md @@ -0,0 +1,204 @@ +# 🔧 小程序"加载中..."问题解决方案 + +## 🚨 **问题描述** + +用户点击分享链接打开小程序时，页面一直显示"加载中..."，无法正常进入应用。 + +## 🔍 **问题根本原因** + +通过代码分析发现主要问题： + +### 1. **空的reload函数** +```typescript +const reload = () => { + // 函数体为空！这是主要问题 +}; +``` + +### 2. **缺少加载状态管理** +- 没有明确的加载完成标识 +- 多个异步操作没有统一管理 +- 错误处理不完善 + +### 3. **网络请求失败处理不当** +- API请求失败时没有合适的降级处理 +- 用户无法知道具体哪个环节出了问题 + +## ✅ **完整解决方案** + +### 方案1: 修复核心逻辑 + +#### 1.1 完善reload函数 +```typescript +const reload = () => { + console.log('开始执行登录流程...'); + Taro.login({ + success: (res) => { + loginByOpenId({ + code: res.code, + tenantId: TenantId + }).then(async data => { + if (data) { + saveStorageByLoginUser(data.access_token, data.user); + checkInitComplete({ userLogin: true }); + console.log('✅ 用户登录完成'); + } + }).catch(error => { + checkInitComplete({ userLogin: true }); // 即使失败也标记完成 + console.error('登录失败:', error); + }); + } + }); +}; +``` + +#### 1.2 添加加载状态管理 +```typescript +const [pageLoading, setPageLoading] = useState(true); +const [initStatus, setInitStatus] = useState({ + shopInfo: false, + userAuth: false, + userLogin: false +}); + +const checkInitComplete = (newStatus) => { + const updatedStatus = { ...initStatus, ...newStatus }; + setInitStatus(updatedStatus); + + const allComplete = Object.values(updatedStatus).every(status => status === true); + if (allComplete && pageLoading) { + setPageLoading(false); + Taro.hideLoading(); + } +}; +``` + +### 方案2: 网络诊断工具 + +#### 2.1 创建网络检测工具 +```typescript +// src/utils/networkCheck.ts +export class NetworkChecker { + static async checkNetworkStatus() { /* 检查网络状态 */ } + static async testAPIConnection() { /* 测试API连接 */ } + static async diagnoseNetwork() { /* 综合诊断 */ } +} +``` + +#### 2.2 集成到加载页面 +```typescript +if (pageLoading) { + return ( +
+
加载中...
+
+ 站点信息: {initStatus.shopInfo ? '✅' : '⏳'} | + 用户授权: {initStatus.userAuth ? '✅' : '⏳'} | + 用户登录: {initStatus.userLogin ? '✅' : '⏳'} +
+ +
+ ); +} +``` + +### 方案3: 错误处理优化 + +#### 3.1 统一错误处理 +```typescript +// 每个异步操作都有完善的错误处理 +getShopInfo().then((data) => { + checkInitComplete({ shopInfo: true }); +}).catch((error) => { + checkInitComplete({ shopInfo: true }); // 即使失败也标记完成 + console.error('获取站点信息失败:', error); +}); +``` + +#### 3.2 用户友好的错误提示 +```typescript +Taro.showToast({ + title: '获取站点信息失败', + icon: 'error', + duration: 3000 +}); +``` + +## 🎯 **修复后的效果** + +### ✅ **解决的问题** +1. **不再无限加载** - 所有异步操作都有明确的完成标识 +2. **清晰的进度显示** - 用户可以看到具体哪个环节在处理 +3. **网络问题诊断** - 提供网络诊断工具帮助排查问题 +4. **优雅的错误处理** - 即使某个环节失败，也不会卡住整个流程 + +### 📊 **加载流程** +``` +1. 显示加载页面 ⏳ +2. 获取站点信息 → ✅ shopInfo: true +3. 检查用户授权 → ✅ userAuth: true +4. 执行用户登录 → ✅ userLogin: true +5. 所有完成 → 隐藏加载页面，显示主界面 +``` + +## 🛠️ **使用方法** + +### 开发者调试 +1. 打开微信开发者工具控制台 +2. 查看详细的日志输出： + ``` + === 首页初始化开始 === + 开始获取站点信息... + 站点信息获取成功: {...} + 开始检查用户授权状态... + ✅ 用户已经授权过，开始登录流程 + ✅ 用户登录完成 + ✅ 所有初始化完成，隐藏加载状态 + ``` + +### 用户使用 +1. 如果加载时间过长，点击"网络诊断"按钮 +2. 查看诊断结果，按建议操作 +3. 如仍有问题，联系技术支持并提供诊断结果 + +## 🔧 **技术细节** + +### 文件修改清单 +- ✅ `src/pages/index/index.tsx` - 主要修复 +- ✅ `src/utils/networkCheck.ts` - 新增网络诊断工具 +- ✅ `docs/LOADING_ISSUE_SOLUTION.md` - 解决方案文档 + +### 关键改进点 +1. **状态管理** - 使用React状态管理加载进度 +2. **错误恢复** - 即使某个步骤失败，也不会阻塞整个流程 +3. **用户体验** - 提供清晰的进度反馈和问题诊断工具 +4. **调试友好** - 详细的控制台日志输出 + +## 🚀 **部署建议** + +1. **测试验证** + ```bash + npm run build:weapp + ``` + +2. **真机测试** + - 在不同网络环境下测试 + - 模拟网络异常情况 + - 验证分享链接功能 + +3. **监控部署** + - 关注用户反馈 + - 监控错误日志 + - 持续优化用户体验 + +## 📞 **后续支持** + +如果问题仍然存在，请提供： +1. 微信开发者工具的控制台日志 +2. 网络诊断结果截图 +3. 具体的复现步骤 +4. 设备和网络环境信息 + +这样可以进一步定位和解决问题。 diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index f924d7c..7b1d075 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -3,11 +3,15 @@ import BestSellers from './BestSellers'; import Taro from '@tarojs/taro'; import {useShareAppMessage} from "@tarojs/taro" import {useEffect, useState} from "react"; -import {getShopInfo} from "@/api/layout"; +import {getShopInfo, loginByOpenId} from "@/api/layout"; +import {TenantId} from "@/config/app"; +import {saveStorageByLoginUser} from "@/utils/server"; import {Sticky} from '@nutui/nutui-react-taro' import Menu from "./Menu"; import Banner from "./Banner"; import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite"; +import {showNetworkDiagnosis} from "@/utils/networkCheck"; +import {BaseUrl} from "@/config/app"; import './index.scss' // import GoodsList from "./GoodsList"; @@ -15,6 +19,31 @@ import './index.scss' function Home() { // 吸顶状态 const [stickyStatus, setStickyStatus] = useState(false) + // 页面加载状态 + const [pageLoading, setPageLoading] = useState(true) + // 初始化状态 + const [initStatus, setInitStatus] = useState<{ + shopInfo: boolean; + userAuth: boolean; + userLogin: boolean; + }>({ + shopInfo: false, + userAuth: false, + userLogin: false + }) + + // 检查是否所有初始化都完成 + const checkInitComplete = (newStatus: Partial) => { + const updatedStatus = { ...initStatus, ...newStatus }; + setInitStatus(updatedStatus); + + const allComplete = Object.values(updatedStatus).every(status => status === true); + if (allComplete && pageLoading) { + console.log('✅ 所有初始化完成，隐藏加载状态'); + setPageLoading(false); + Taro.hideLoading(); + } + } useShareAppMessage(() => { return { @@ -54,14 +83,21 @@ function Home() { success: (res) => { if (res.authSetting['scope.userInfo']) { // 用户授权成功，可以获取用户信息 + console.log('用户重新授权成功'); reload(); } else { // 用户拒绝授权，提示授权失败 + console.log('用户拒绝授权'); + checkInitComplete({ userLogin: true }); Taro.showToast({ title: '授权失败', icon: 'none' }); } + }, + fail: (error) => { + console.error('打开设置页面失败:', error); + checkInitComplete({ userLogin: true }); } }); }; @@ -73,14 +109,80 @@ function Home() { } const reload = () => { + console.log('开始执行登录流程...'); + Taro.login({ + success: (res) => { + console.log('微信登录成功，code:', res.code); + + // 调用后端登录接口 + loginByOpenId({ + code: res.code, + tenantId: TenantId + }).then(async data => { + console.log('后端登录成功:', data); + if (data) { + // 保存用户信息到本地存储 + saveStorageByLoginUser(data.access_token, data.user); + // 标记登录完成 + checkInitComplete({ userLogin: true }); + + Taro.showToast({ + title: '登录成功', + icon: 'success', + duration: 2000 + }); + console.log('✅ 用户登录完成'); + } else { + throw new Error('登录返回数据为空'); + } + }).catch(error => { + console.error('后端登录失败:', error); + // 即使登录失败也标记为完成，避免一直加载 + checkInitComplete({ userLogin: true }); + Taro.showToast({ + title: '登录失败，请重试', + icon: 'error', + duration: 3000 + }); + }); + }, + fail: (error) => { + console.error('微信登录失败:', error); + Taro.showToast({ + title: '微信登录失败', + icon: 'error', + duration: 3000 + }); + } + }); }; useEffect(() => { - // 获取站点信息 - getShopInfo().then(() => { + console.log('=== 首页初始化开始 ==='); + + // 显示加载提示 + Taro.showLoading({ + title: '加载中...', + mask: true + }); - }) + // 获取站点信息 + console.log('开始获取站点信息...'); + getShopInfo().then((data) => { + console.log('站点信息获取成功:', data); + checkInitComplete({ shopInfo: true }); + }).catch((error) => { + console.error('站点信息获取失败:', error); + // 即使失败也标记为完成，避免一直加载 + checkInitComplete({ shopInfo: true }); + // 显示错误提示 + Taro.showToast({ + title: '获取站点信息失败', + icon: 'error', + duration: 3000 + }); + }); // 检查是否有待处理的邀请关系 if (hasPendingInvite()) { @@ -99,17 +201,33 @@ function Home() { } // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。 + console.log('开始检查用户授权状态...'); Taro.getSetting({ success: (res) => { + console.log('授权状态检查结果:', res.authSetting); + checkInitComplete({ userAuth: true }); + if (res.authSetting['scope.userInfo']) { // 用户已经授权过，可以直接获取用户信息 - console.log('用户已经授权过，可以直接获取用户信息') + console.log('✅ 用户已经授权过，开始登录流程'); reload(); } else { // 用户未授权，需要弹出授权窗口 - console.log('用户未授权，需要弹出授权窗口') + console.log('❌ 用户未授权，显示授权弹窗'); showAuthModal(); + // 即使未授权也标记登录为完成，避免一直加载 + checkInitComplete({ userLogin: true }); } + }, + fail: (error) => { + console.error('获取授权状态失败:', error); + // 标记为完成，避免一直加载 + checkInitComplete({ userAuth: true, userLogin: true }); + Taro.showToast({ + title: '获取授权状态失败', + icon: 'error', + duration: 3000 + }); } }); // 获取用户信息 @@ -121,6 +239,38 @@ function Home() { }); }, []); + // 如果还在加载中，显示加载页面 + if (pageLoading) { + return ( +
+
+
+
+
+
加载中...
+
+
站点信息: {initStatus.shopInfo ? '✅ 完成' : '⏳ 加载中'}
+
用户授权: {initStatus.userAuth ? '✅ 完成' : '⏳ 检查中'}
+
用户登录: {initStatus.userLogin ? '✅ 完成' : '⏳ 登录中'}
+
+ + {/* 如果加载时间过长，显示帮助按钮 */} +
+ +
+ 如果长时间无响应，请点击网络诊断 +
+
+
+
+ ); + } + return ( <> onSticky(arguments)}> diff --git a/src/utils/networkCheck.ts b/src/utils/networkCheck.ts new file mode 100644 index 0000000..d7eb3bc --- /dev/null +++ b/src/utils/networkCheck.ts @@ -0,0 +1,155 @@ +import Taro from '@tarojs/taro'; + +/** + * 网络连接检测工具 + */ +export class NetworkChecker { + /** + * 检查网络连接状态 + */ + static async checkNetworkStatus(): Promise<{ + isConnected: boolean; + networkType: string; + message: string; + }> { + try { + const networkInfo = await Taro.getNetworkType(); + const isConnected = networkInfo.networkType !== 'none'; + + return { + isConnected, + networkType: networkInfo.networkType, + message: isConnected + ? `网络连接正常 (${networkInfo.networkType})` + : '网络连接异常' + }; + } catch (error) { + console.error('检查网络状态失败:', error); + return { + isConnected: false, + networkType: 'unknown', + message: '无法检测网络状态' + }; + } + } + + /** + * 测试API连接 + */ + static async testAPIConnection(baseUrl: string): Promise<{ + success: boolean; + responseTime: number; + message: string; + }> { + const startTime = Date.now(); + + try { + const response = await Taro.request({ + url: `${baseUrl}/health`, + method: 'GET', + timeout: 5000 + }); + + const responseTime = Date.now() - startTime; + + return { + success: response.statusCode === 200, + responseTime, + message: `API连接${response.statusCode === 200 ? '正常' : '异常'} (${responseTime}ms)` + }; + } catch (error) { + const responseTime = Date.now() - startTime; + console.error('API连接测试失败:', error); + + return { + success: false, + responseTime, + message: `API连接失败 (${responseTime}ms): ${error}` + }; + } + } + + /** + * 综合网络诊断 + */ + static async diagnoseNetwork(baseUrl: string): Promise<{ + network: any; + api: any; + suggestions: string[]; + }> { + console.log('🔍 开始网络诊断...'); + + const network = await this.checkNetworkStatus(); + const api = await this.testAPIConnection(baseUrl); + + const suggestions: string[] = []; + + if (!network.isConnected) { + suggestions.push('请检查网络连接'); + suggestions.push('尝试切换网络环境（WiFi/移动数据）'); + } + + if (!api.success) { + suggestions.push('服务器可能暂时不可用'); + suggestions.push('请稍后重试'); + if (api.responseTime > 10000) { + suggestions.push('网络响应较慢，建议检查网络质量'); + } + } + + if (network.networkType === 'wifi') { + suggestions.push('WiFi连接正常，如仍有问题请检查路由器'); + } else if (network.networkType === '4g' || network.networkType === '5g') { + suggestions.push('移动网络连接，请确保有足够的流量'); + } + + console.log('📊 网络诊断结果:', { network, api, suggestions }); + + return { network, api, suggestions }; + } + + /** + * 显示网络诊断结果 + */ + static async showNetworkDiagnosis(baseUrl: string) { + Taro.showLoading({ title: '诊断网络中...', mask: true }); + + try { + const diagnosis = await this.diagnoseNetwork(baseUrl); + Taro.hideLoading(); + + const content = [ + `网络状态: ${diagnosis.network.message}`, + `API连接: ${diagnosis.api.message}`, + '', + '建议:', + ...diagnosis.suggestions.map(s => `• ${s}`) + ].join('\n'); + + Taro.showModal({ + title: '网络诊断结果', + content, + showCancel: false, + confirmText: '知道了' + }); + } catch (error) { + Taro.hideLoading(); + console.error('网络诊断失败:', error); + + Taro.showModal({ + title: '诊断失败', + content: '无法完成网络诊断，请检查网络连接后重试', + showCancel: false, + confirmText: '知道了' + }); + } + } +} + +/** + * 便捷方法 + */ +export const checkNetwork = () => NetworkChecker.checkNetworkStatus(); +export const testAPI = (baseUrl: string) => NetworkChecker.testAPIConnection(baseUrl); +export const diagnoseNetwork = (baseUrl: string) => NetworkChecker.diagnoseNetwork(baseUrl); +export const showNetworkDiagnosis = (baseUrl: string) => NetworkChecker.showNetworkDiagnosis(baseUrl);