uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
问题分析:
有一种情况时必现:
用户一直在访问这个网站,停留在A页面;B页面没有访问过;
服务器更新后,用户准备打开B页面,这时必现;
用户一打开网站缓存了网站的页面路由映射关系,服务器更新后,用户访问的是缓存的映射关系,所以服务器端找不到文件;
解决方案:
1、可以使用不缓存的方式解决
2、通过代码捕捉错误的方式解决
【1】代码解决在App.vue通过onError 捕捉错误
import versionChecker from '@/utils/versionChecker.js';// 捕获 app erroronError (err) {// 页面显示时检测版本更新versionChecker.checkVersion();},
2、在versionChecker.js实现检测逻辑这里有很多种,可以自己写弹框的方式让用户触发刷新也可以自动刷新 versionChecker.js
import { getCurrentVersion, shouldShowUpdateTip } from '../version.js';/*** 全局版本检测器*/
class VersionChecker {constructor() {this.hasShownUpdateTip = false;this.checkInterval = null;}/*** 检测版本更新*/checkVersion() {// #ifdef H5try {// 如果已经显示过更新提示,不再重复检测if (this.hasShownUpdateTip) {return;}const currentVersion = getCurrentVersion();const storedVersion = uni.getStorageSync('app_version');if (shouldShowUpdateTip(storedVersion)) {console.log(`版本更新检测: ${storedVersion} -> ${currentVersion}`);this.showVersionUpdateTip();this.hasShownUpdateTip = true;} else if (!storedVersion) {// 首次访问,设置版本号uni.setStorageSync('app_version', currentVersion);console.log('首次访问,已设置版本号:', currentVersion);}} catch (error) {console.error('版本检测失败:', error);}// #endif}/*** 显示版本更新提示*/showVersionUpdateTip() {// uni.showModal({// title: '版本更新提示',// content: '检测到应用已更新,为确保最佳体验,请刷新页面获取最新版本',// confirmText: '立即刷新',// cancelText: '稍后处理',// success: (res) => {// if (res.confirm) {// // #ifdef H5// try {// uni.setStorageSync('app_version', getCurrentVersion());// console.log('用户确认刷新,已更新版本号');// // 强制刷新页面// window.location.reload(true);// } catch (error) {// console.error('刷新失败:', error);// }// // #endif// } else {// console.log('用户选择稍后处理版本更新');// // 用户选择稍后处理,重置标志,允许在下次页面显示时再次检测// this.hasShownUpdateTip = false;// }// }// });window.location.reload(true);}/*** 重置检测状态(用于测试或特殊情况)*/resetCheckState() {this.hasShownUpdateTip = false;}
}// 创建全局实例
const versionChecker = new VersionChecker();export default versionChecker;
3、version.js 应用版本配置文件
/*** 应用版本配置文件* 每次发版时请更新此文件中的版本号*/// 当前应用版本号
export const APP_VERSION = '1.1.2';// 获取当前版本号
export function getCurrentVersion() {return APP_VERSION;
}// 检查是否需要显示更新提示
export function shouldShowUpdateTip(storedVersion) {return storedVersion && storedVersion !== APP_VERSION;
}// 版本更新日志(可选)
export const VERSION_CHANGELOG = {'1.0.0': ['初始版本发布','基础功能实现']
};
每次发布的时候修改版本号即可,当出现连接服务器超时,点击屏幕重试时候在全局应用函数onError中触发,然后在onError中触发我们的刷新逻辑