当前位置：首页 > news >正文

Uniapp打包H5端弱网络环境下存在页面UI渲染错乱问题方案实现

news 来源：原创 2025/8/25 4:50:28

一.需求

uniapp打包的H5项目，首页模块的业务逻辑偏多，调用的接口数量庞大，在弱网络的情况下切换了页面或者网络较好但是页面的UI未渲染完成的情况下快速地切换了页面会出现UI渲染错乱的问题，针对该问题个人从两个方面来进行处理；
切换页面时取消对网络的请求显示UI的渲染；保证首页渲染结束之前，限制底部tab的切换；

二.代码实现

2.1.网络请求框架选型

基于Uview的http进行的封装,主动取消网络需要借助下方getTask中的task；
封装的网络请求代码如下，包含两个js文件，httpRequest.js和service.js：
httpRequest.js

//httpRequest.js
// 引入基路径
import {baseURL
} from "@/config/index.js"// 此vm参数为Vue 实例 或 页面实例 ，可以通过它引用vuex中的变量
module.exports = (vm) => {// 初始化请求配置uni.$u.http.setConfig((config) => {/* config 为默认全局配置*/config.baseURL = baseURLconfig.loadingText = '加载中...'config.header = {'Content-Type': 'application/json',Authorization: Authorization}return config})// 请求拦截uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作//根据需求自行改动======================================================var token = uni.getStorageSync('access_token') || vm.vuex_token || nullif (config?.custom?.auth == undefined) {if (token != null && token != '' && token != undefined) {config.header["Authorization"] = "Bearer " + token;} else {vm.$u.toast("您尚未登录，请先登录");uni.clearStorageSync();setTimeout(() => {//跳转到登录页面}, 1500);return false;}}// 这一步就是给baseUrl重新赋值 ！！！if (config?.custom?.changeBaseUrl != undefined) {config.baseURL = baseURL}// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}config.data = config.data || {}if (config.data && config.data.header) {config.header["content-type"] = config.data.header["content-type"];}//根据需求自行改动======================================================return config}, config => { // 可使用async await 做异步操作return Promise.reject(config)})// 响应拦截uni.$u.http.interceptors.response.use((response) => {/* 对响应成功做点什么 可使用async await 做异步操作*/const data = response.data//根据需求自行改动======================================================// 自定义参数const custom = response.config?.customif (data.code !== 200) {if (data.code == 401) { //token过期或者token为空if (custom?.tokenExpire) {return Promise.reject(data)} else {vm.$u.toast("您尚未登录，请先登录");uni.clearStorageSync();setTimeout(() => {//跳转到登录页面}, 1500);return false;}} else if (data.code == 444) { //账号在其它位置登录if (custom?.tokenExpire) {return Promise.reject(data)}}if (custom.toast !== false && data.msg != undefined && data.msg != '') {uni.$u.toast(data.msg)}// 如果需要catch返回，则进行rejectif (custom?.catch) {return Promise.reject(data)} else {// 否则返回一个pending中的promise，请求不会进入catch中return new Promise(() => {})}}//特殊处理if (custom?.defaultStructure === true) {return data === undefined ? {} : data} else {return data.data === undefined ? {} : data.data}//根据需求自行改动======================================================}, (response) => {// 对响应错误做点什么 （statusCode !== 200）return Promise.reject(response)})
}

service.js

// 引入基路径
import {baseURL
} from "@/config/index.js"let baseInfo2 = "service/baseInfo"
export const baseInfo = (config = {}) => http.post(baseInfo2, config)

页面中逻辑，引入service文件，定义baseInfo方法，onHide声明周期方法中调用取消网络请求

async getBaseInfo() {
await baseInfo({getTask: (task, options) => {that.requestTask = task//定义变量console.log("personInfo requestTask")},}).then((res) => {//省略//渲染UI逻辑})
}onHide() {if (requestTask != null && requestTask.abort) {requestTask.abort()}
},async onShow() {await this.getBaseInfo()uni.showTabBar(); // 显示底部 tabBar
},

2.2.保证首页渲染结束之前，限制底部tab的切换

onLoad() {// 隐藏底部 tabBaruni.hideTabBar();
},

三.总结

通过以上两个方面的处理，弱网络环境下出现的页面UI渲染错乱问题有个较好的解决。

Uniapp打包H5端弱网络环境下存在页面UI渲染错乱问题方案实现

一.需求 uniapp打包的H5项目，首页模块的业务逻辑偏多，调用的接口数量庞大，在弱网络的情况下切换了页面或者网络较好但是页面的UI未渲染完成的情况下快速地切换了页面会出现UI渲染错乱的问题，针对该问题个人从两个方面来进行处理&…...

编程日记 2025/8/25 4:50:28

Dify+DeepSeek | Excel数据一键可视化（创建步骤案例）（echarts助手.yml）（文档表格转图表、根据表格绘制图表、Excel绘制图表）

Dify部署参考：Dify Rag部署并集成在线Deepseek教程（Windows、部署Rag、安装Ragan安装、安装Dify安装、安装ollama安装） DifyDeepSeek - Excel数据一键可视化（创建步骤案例）-DSL工程文件（可直接导入&#x…...

编程日记 2025/8/24 23:22:01

## DeepSeek写水果记忆配对手机小游戏

DeepSeek写水果记忆配对手机小游戏提问根据提的要求，让DeepSeek整理的需求，进行提问，内容如下： 请生成一个包含以下功能的可运行移动端水果记忆配对小游戏H5文件： 要求可以重新开始游戏可以暂停游戏卡片里的水果…...

编程日记 2025/8/25 16:46:36

Windows系统编程（八）线程同步

线程安全问题每个线程都有自己独立的堆栈，局部变量是存储在栈中的，这就意味着每个线程都会有一份自己的局部变量，当线程仅仅访问自己的局部变量时就不存在线程安全问题。但是全局变量是存储在全局区的，多线程共享全局变量&#…...

编程日记 2025/8/25 16:46:37

create_react_agent 函数，根据创建的 chat 模型实例和工具列表 tools 构造一个“反应式代理”（react agent）

graph create_react_agent(chat, tools)1. create_react_agent 函数的作用 create_react_agent 是一个工厂函数，它接收两个参数： chat 模型实例（这里是 ChatOpenAI 的对象）：它负责生成语言模型的回复，也…...

编程日记 2025/8/25 16:46:14

Unity ECS与MonoBehaviour混合架构开发实践指南

一、混合架构设计背景 1. 技术定位差异 ECS（Entity Component System）：面向数据设计（DOD），适用于大规模实体计算（如10万单位战斗） MonoBehaviour：面向对象设计&#x…...

编程日记 2025/8/22 8:18:29

在Linux中开发OpenGL——检查开发环境对OpenGL ES的支持

由于移动端GPU规模有限，厂商并没有实现完整的OpenGL特性，而是实现了它的子集——OpenGL ES。因此如果需要开发的程序要支持移动端平台，最好使用OpenGL ES开发。 1、下载支持库、OpenGL ES Demo 1.1、下载PowerVRSDK支持库作为准备&#xff…...

编程日记 2025/8/21 17:21:03

「DataX」数据迁移-IDEA运行DataX方法总结

背景业务需求希望把Oracle数据库中的数据，迁移至MySql数据库中，因为需要迁移全量和增量的数据，所以希望想用数据迁移工具进行操作。经过一些调研查询，最终打算使用DataX进行数据的迁移。 DataX简单介绍 DataX 是阿里云 DataW…...

编程日记 2025/8/21 5:28:21

python从入门到精通（二十六）：python文件操作之Word全攻略（基于python-docx）

python文件操作之word技巧大全 word技巧基础到高级操作大全A.准备工作1. 安装python-docx库2. 导入库 B.基础操作1. 创建Word文档1.1 创建文档对象1.2 添加word标题1.3 添加word段落1.4 设置段落样式1.5 创建有序列表1.6 创建无序列表1.7添加word分页1.8 添加word图片1.9 添加w…...

编程日记 2025/8/23 14:53:53

STM32 ST-LINK Utility 切换 NRST_MODE 后下载失败问题

在使用 STM32 ST-LINK Utility 烧录时，有需要改变芯片选择复位的时候需要修改 Option Bytes 中的 NRST_MODE 选项，可能会遇见 “Programming error 0x8000200!” 的错误，后面不管是取消读写加密还是复位都不能下载，包括再用 keil …...

编程日记 2025/8/22 23:59:04

【算法】010、合并两个有序链表

【算法】010、合并两个有序链表文章目录一、合并两个有序链表1.1 思路1.2 多语言解法一、合并两个有序链表 1.1 思路 // go package mainimport ("fmt""strconv" )type ListNode struct {Val intNext *ListNode }func (n *ListNode) String() (ans s…...

编程日记 2025/8/24 20:04:52

FreeRTOS任务状态查询

一.任务相关API vTaskList（），创建一个表格描述每个任务的详细信息 char biaoge[1000]; //定义一个缓存 vTaskList(biaoge); //将表格存到这缓存中 printf("%s /r/n",biaoge); 1.uxTaskPriorityGet（&#xf…...

编程日记 2025/8/25 6:44:22

Django小白级开发入门

1、Django概述 Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。 Django 框架的核心组件有： 用于创建模型的对象关系映射为最终用户设计较好的管理界面URL 设计设计者友好的模板…...

编程日记 2025/8/22 12:09:43

R语言的基础命令及实例操作

> T & F [1] FALSE > T & T [1] TRUE > T | F [1] TRUE > F | F [1] FALSE > a <- c(T,F,T) > b <- c(F,F,T) > a & b [1] FALSE FALSE TRUE > a | b [1] TRUE FALSE TRUE 在 R 中，大小写是敏感的，也就是说…...

编程日记 2025/8/23 7:28:56

通用信息抽取大模型PP-UIE开源发布，强化零样本学习与长文本抽取能力，全面适配多场景任务

背景与简介信息抽取（information extraction）是指，从非结构化或半结构化数据（如自然语言文本）中自动识别、提取并组织出结构化信息。通常包含多个子任务，例如：命名实体识别（NER&am…...

编程日记 2025/8/23 1:27:47

【玩转正则表达式】将正则表达式中的分组（group）与替换进行结合使用

在文本处理和数据分析领域，正则表达式（Regular Expressions，简称regex）是一种功能强大的工具。它不仅能够帮助我们匹配和搜索字符串中的特定模式，还能通过分组（Grouping）和替换（Subs…...

编程日记 2025/8/20 2:34:45

Kotlin和Java区别

哈哈哈，前段时间，面试的时候，突然问到我Kotlin和Java的区别，一下子把我问懵逼了，确实没遇到问这个的，想了下，说了下Kotlin的编译时空检查机制，代码更简洁，很多封装好的AP…...

编程日记 2025/8/16 13:04:59

大语言模型进化论：从达尔文到AI的启示与展望

文章大纲引言大语言模型中的“进化论”思想体现遗传变异过度繁殖和生存斗争大模型“过度繁殖”与“生存竞争”机制解析**一、过度繁殖：技术迭代的指数级爆发****二、生存竞争：计算资源的达尔文战场****三、生存竞争胜出关键要素****四、行业竞争格局演化趋势**核心结论自然选…...

编程日记 2025/8/16 12:39:17

Django系列教程（5）——Django模型详解

目录模型定义小案例模型的组成模型的字段基础字段关系字段 on_delete删除选项 related_name选项模型的META选项模型的方法标准方法示例一：自定义方法示例二：自定义Manager方法完美的高级Django模型示例小结 Model (模型) 简而…...

编程日记 2025/8/24 17:23:53

2008-2024年中国手机基站数据/中国移动通信基站数据

2008-2024年中国手机基站数据/中国移动通信基站数据 1、时间：2008-2024年 2、来源：OpenCelliD 3、指标：网络类型、网络代数、移动国家/地区、移动网络代码、区域代码、小区标识、单元标识、坐标经度、坐标纬度、覆盖范围、测量样本数、坐标…...

编程日记 2025/8/24 18:11:44

Java在word中动态增加表格行并写入数据

SpringBoot项目中在word中动态增加表格行并写入数据，不废话，直接上配置和代码：模板内容如下图所示：模板是一个空word表格即可，模板放在resources下的自定义目录下，如下图示例。实体类定义如下： @Data @AllArgsConstructor @NoArgsConstructor public class Person …...

编程日记 2025/8/21 23:41:17

记录小白使用 Cursor 开发第一个微信小程序（二）：创建项目、编译、预览、发布（250308）

文章目录记录小白使用 Cursor 开发第一个微信小程序（二）：创建项目、编译、预览、发布（250308）一、创建项目1.1 生成提示词1.2 生成代码二、编译预览2.1 导入项目2.2 编译预览三、发布3.1 在微信开发者工具进行上传3…...

编程日记 2025/8/18 5:19:52

JavaScript基础-比较运算符

在JavaScript编程中，比较运算符用于比较两个值，并返回一个布尔值（true或false），这对于我们进行条件判断和逻辑控制至关重要。掌握这些运算符不仅有助于编写高效的代码，也是处理复杂逻辑的基础。本文将详细介…...

编程日记 2025/8/25 6:41:42

1.确保安装了docker和docker-compose sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-composesudo chmod x /usr/local/bin/docker-compose2.编写 Docker Compose 文…...

编程日记 2025/8/22 2:09:38

【大学生体质】智能 AI 旅游推荐平台(Vue+SpringBoot3)-完整部署教程

智能 AI 旅游推荐平台开源文档项目前端地址 ☀️项目介绍智能 AI 旅游推荐平台（Intelligent AI Travel Recommendation Platform）是一个利用 AI 模型和数据分析为用户提供个性化旅游路线推荐、景点评分、旅游攻略分享等功能的综合性系统。该系统融合…...

编程日记 2025/8/21 15:20:22

【定制开发】碰一碰发视频系统定制开发，支持OEM

在短视频营销爆发的2025年，"碰一碰发视频"技术已成为实体商家引流标配。某连锁餐饮品牌通过定制化开发，单月视频发布量突破10万条，获客成本降低80%！本文将深入解析该系统的技术架构与开发要点，助你快速搭建高…...

编程日记 2025/8/21 15:41:23

模型的原始输出为什么叫 logits

模型的原始输出为什么叫 logits flyfish 一、Logarithm（对数 log） 定义：对数是指数运算的逆运算，表示某个数在某个底数下的指数。公式：若 b x a b^x a bxa，则 log ⁡ b ( a ) x \log_b(a) x logb…...

编程日记 2025/8/23 7:58:18

YOLOv8改进SPFF-LSKA大核可分离核注意力机制

YOLOv8改进------------SPFF-LSKA 1、LSAK.py代码2、添加YAML文件yolov8_SPPF_LSKA.yaml3、添加SPPF_LSKA代码4、ultralytics/nn/modules/__init__.py注册模块5、ultralytics/nn/tasks.py注册模块6、导入yaml文件训练 1、LSAK.py代码论文代码 LSKA.py添加到ultralytics/nn/…...

编程日记 2025/8/22 4:07:40

Unity, AssetBundle的一些“隐藏”方法

只分享实战，理论不多说了，网上都烂大街了在Project View可以通## 标题过输入“b:” 找到所有带assetbundleName的物件 AssetBundle打包前的查找和管理方法若需要获取每个AssetBundle名称对应的所有具体资源文件路径（类似AssetBundle Browser工具的功能），可以…...

编程日记 2025/8/24 9:25:52

分布式存储学习——HBase概述

1.1 HBase概述 1.1.1 理解大数据背景 1.1.2 HBase是什么 1.1.3 HBase与Hadoop的关系 1.1.4 HBase的核心功能模块 1.1.5 HBase的应用场景和经典案例 1.1.6 小结本文参考于学校《HBase应用于开发》教材 1.1 HBase概述本节将介绍大数据背景和HBase的基本概念&#xff0c…...

编程日记 2025/8/16 0:28:23

Mysql表的复合查询

1.基本查询使用scott案列 ----来源csdn： Mysql下-scott用户表的创建_风泊月mysql 员工表-CSDN博客案列1：查询工资高于500或岗位为MANAGER的雇员，同时还要满足他们的姓名首字母为大小的J 查询雇员，从emp表中查询，s…...

编程日记 2025/8/20 21:45:47

RAG技术的PDF智能问答系统

关键要点系统基于RAG（检索增强生成）技术，允许用户上传PDF并进行智能问答。使用Ollama的deepseek-r1模型和FAISS向量数据库，支持普通对话和基于PDF的问答模式。提供简洁的Web界面，支持文件拖拽上传和多轮对话。研…...

编程日记 2025/8/21 14:26:18

【Java基础-52】Java中URL类的openConnection()方法：原理与应用场景

在Java编程中，java.net.URL类是一个非常重要的类，用于表示统一资源定位符（URL）。通过URL类，我们可以方便地访问网络资源。其中，openConnection()方法是URL类中一个非常强大的方法，它允许我们与U…...

编程日记 2025/8/22 20:47:16

android为第三方提供部分系统接口

文章目录 Settings - 亮灭屏Settings - 恢复出厂设置Settings - 数字锁屏/解锁Settings - 设置系统时间PackageInstaller - 安装/卸载第三方应用摘要：本文对系统模块进行改造，提供广播等形式的接口对外提供无法直接调用的系统级别接口，实现部分功能的集合。如果是广播形式，…...

编程日记 2025/8/16 12:02:48

C#控制台应用程序学习——3.8

一、语言概述 1、平台相关性 C# 主要运行在.NET 平台上。.NET 提供了一个庞大的类库，C# 程序可以方便地调用这些类库来实现各种功能，如文件操作、数据库访问、网络通信等。 2、语法风格 C# 的语法与 C、C 和 Java 有一定的相似性。例如，它使用…...

编程日记 2025/8/16 12:05:47

钣金加工行业数字化转型MES方案

一、行业痛点：钣金加工行业普遍面临以下挑战： 订单多样化、小批量、定制化需求增多：传统生产模式难以适应快速变化的市场需求。生产流程复杂、工序繁多：涉及切割、折弯、焊接、表面处理等多个环节，协同效率低。生产…...

编程日记 2025/8/24 20:36:08

算法-回溯算法总结

回溯与递归的区别回溯的本质是穷举，回溯一定代表有递归递归就一直往深处递归就好了，但是回溯还伴随着递归结束之后的”回溯操作“，例如递归中处理的1，在回溯中要-1。回溯的算法思路一般都是返回void,参数不能一下子全部想定…...

编程日记 2025/8/22 7:10:32

ORACLE 执行查询语句慢（不走对应索引）

1. 索引未被创建或未正确创建确保为查询中涉及的列创建了索引。例如，如果你经常需要按column_name列进行查询，确保已经为该列创建了索引,索引创建语句 CREATE INDEX idx_column_name ON table_name(column_name); 2、索引不可用原因:索引可能被标记为不…...

编程日记 2025/8/16 11:42:03

零售交易流程相关知识（top-down拆解）

引入关于POS机交易时的后台数据交互模块之间数据交换，都可以能被窃取或篡改。由此引入加密、解密机制和签名、验签机制经典的加密、解密机制： 对称加密：DES\ TDES\ AES\ RC4 非对称加密：RSA\ DSA\ ECC 经典的签名、验签…...

编程日记 2025/8/22 11:19:39

在人工智能软件的帮助下学习编程实例

1 引言本文记录在人工智能软件的帮助下学习一种全新的编程环境的实例，之所以提人工智能软件而不是单指DeepSeek，一方面DeepSeek太火了，经常服务器繁忙，用本机本地部署的最多运行70b模型，又似乎稍差。另一方面也作为一…...

编程日记 2025/8/24 16:53:03

C语言_数据结构总结5：顺序栈

纯C语言代码，不涉及C 想了解链式栈的实现，欢迎查看这篇文章：C语言_数据结构总结6：链式栈-CSDN博客这里分享插入一下个人觉得很有用的习惯： 1. 就是遇到代码哪里不理解的，你就问豆包，C知道&a…...

编程日记 2025/8/21 6:06:35

c++ 游戏入门指南

在C++游戏开发中，你需要结合高性能编程、图形学、数学和游戏设计等多方面的知识。以下是C++游戏开发的核心步骤、工具和资源整理，帮助你从入门到进阶： 1. 开发环境搭建编译器：MSVC（Visual Studio）、GCC、Clang。IDE：Visual Studio（Windows）、JetBrains CLion（跨平台…...

编程日记 2025/8/23 10:41:26

npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。

1、在 vscode 终端执行 get-ExecutionPolicy 返回 Restricted 状态是禁止的返回 RemoteSigned 状态是可正常执行npm命令 2、更改状态 set-ExecutionPolicy RemoteSigned 如果提示需要管理员权限，可加参数运行 Set-ExecutionPolicy -Scope CurrentUser RemoteSi…...

编程日记 2025/8/19 8:46:57

STM32项目分享：智能家居语音系统（ASRPRO版）

目录一、前言二、项目简介 1.功能详解 2.主要器件三、原理图设计四、PCB硬件设计 PCB图五、程序设计六、实验效果七、资料内容项目分享一、前言项目成品图片： 哔哩哔哩视频链接： STM32智能家居语音系统（ASRPRO版&am…...

编程日记 2025/8/23 2:14:36

vue2实现组件库的自动按需引入，unplugin-auto-import，unplugin-vue-components

1.使用ant-design-vue或者element-ui时，如何每个组件都去import导入组件，大大降低了开发效率，如果全局一次性注册会增加项目体积，那么如何实现既不局部引入，也不全局注册？ 2.在element-plus官网看到有说明…...

编程日记 2025/8/23 6:57:03

前端安全面试题汇总及参考答案

目录简述 XSS 攻击的原理及三种常见类型（存储型、反射型、DOM 型）如何在前端防御 XSS 攻击？列举编码、过滤、CSP 策略的具体实现方式富文本编辑器场景下如何安全处理用户输入的 HTML 内容？如何通过 HttpOnly 属性增强 Cookie 安全性？它与 XSS 防御的关系是什么？ …...

编程日记 2025/8/21 10:27:35

《打造视频同步字幕播放网页：从0到1的技术指南》

《打造视频同步字幕播放网页：从0到1的技术指南》为什么要制作视频同步字幕播放网页在数字化信息飞速传播的当下，视频已然成为内容输出与获取的核心载体，其在教育、娱乐、宣传推广等诸多领域发挥着举足轻重的作用。制作一个视频同步字幕播…...

编程日记 2025/8/16 1:35:59

Redis 篇

一、数据结构二、持久化方式 Redis 提供了两种主要的持久化方式，分别是 RDB（Redis Database）和 AOF（Append Only File），此外，还可以同时使用这两种方式以增强数据安全性，以下为你…...

编程日记 2025/8/22 14:46:50

STM32常见外设的驱动示例和代码解析

以下是针对STM32常见外设的驱动示例和代码解析，基于HAL库实现，适用于大多数STM32系列（如F1/F4/H7等），可根据具体型号调整引脚和时钟配置。 1. GPIO驱动应用场景：控制LED、按键检测、继电器开关等。示例代码： // 初始化LED（推挽输出） void LED_Init(void) {GPIO_In…...

编程日记 2025/8/16 19:46:56

docker-compose Install reranker(fastgpt支持) GPU模式

前言BGE-重新排名器与 embedding 模型不同，reranker 或 cross-encoder 使用 question 和 document 作为输入，直接输出相似性而不是 embedding。为了平衡准确性和时间成本，cross-encoder 被广泛用于对其他简单模型检索到的前 k 个文档进行重新排序。例如，使用 bge 嵌入模…...

编程日记 2025/8/21 5:43:57

一.需求

二.代码实现

2.1.网络请求框架选型

2.2.保证首页渲染结束之前，限制底部tab的切换

三.总结

相关文章：