当前位置: 首页 > backend >正文

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中触发我们的刷新逻辑

http://www.xdnf.cn/news/13169.html

相关文章:

  • Flv与Rtmp
  • Jetpack Compose 与 ViewModel 的完美结合
  • docker开启2375端口-docker开启api接口 ,实现远程访问,dockerapi官方文档
  • NIFI的处理器:SplitJson 2.4.0
  • 适配java8版本的langchian4j实战
  • 【黑客与安全】Linux的常用命令之系统架构信息获取系列命令
  • 深入解析C#表达式求值:优先级、结合性与括号的魔法
  • Tauri2学习笔记
  • 带传动---
  • git: early EOF
  • 自我堕落公式证明法:你为谁而活
  • 火山 RTC 引擎11----集成创建房间、加入房间、销毁引擎 到互动项目中
  • [Java 基础]Object 类
  • 【题解-洛谷】B4292 [蓝桥杯青少年组省赛 2022] 路线
  • R语言速释制剂QBD解决方案之二
  • 网站指纹识别
  • 博图 SCL 编程技巧:灵活实现上升沿与下降沿检测案例分享(下)
  • 交通自动气象站的作用
  • [Linux] 命令行管理文件
  • 国产三维CAD皇冠CAD(CrownCAD)建模教程:压力变送器
  • 如何开发ONLYOFFICE协作空间插件:完整教程
  • AI高考志愿助手应用架构设计并上线实施运行
  • 使用python进行图像处理—图像变换(6)
  • 前端开发面试题总结-vue2框架篇(一)
  • MES系统如何解决电机制造业自动化生产管理?
  • 回溯算法学习
  • PCIe-8622工业级网卡特性解析
  • Linux中《基础IO》详细介绍
  • leetcode刷题经验
  • 云安全与网络安全:核心区别与协同作用解析