Taro构建的H5页面路由切换返回上一页存在白屏页面过渡
目录
- 项目背景:Taro与Hybrid开发
- 问题描述:白屏现象
- 可能的原因包括:
- 解决方案
- 解决后的效果图
- 其他优化方案可参考:
项目背景:Taro与Hybrid开发
项目使用Taro框架同时开发微信小程序和H5页面,其中H5页面被嵌入到App中作为Hybrid开发的一部分。
问题描述:白屏现象
在H5页面中使用了taro-router进行页面跳转,整体体验上大部分情况下是流畅的。但在某些情况下,比如用户通过侧滑返回上一页时,会出现白色页面短暂的过渡现象。这个白屏问题严重影响了用户体验,特别是在用户希望快速返回时,白屏给人一种卡顿、未加载完全的感觉。以下是我在视频中捕捉到的问题现象:
- 用户在H5页面中侧滑返回时,页面先变为空白,然后再呈现上一页的内容。
- 白屏时间虽然很短,但对于频繁操作的用户来说,这种不流畅感很明显。
可能的原因包括:
-
页面状态未及时恢复:由于侧滑返回时,Taro可能未能在合适的时间点恢复之前页面的状态,导致页面需要重新渲染,从而产生白屏。
-
WebView渲染延迟:在一些设备上,嵌入的WebView对于页面的渲染有微小延迟,而这种延迟在页面状态切换时尤为明显。
-
动画过渡问题:Taro在页面过渡时的动画未能与侧滑返回的动画同步,从而导致视觉上出现白屏效果。
解决方案
app.config.ts
* h5 路由切换动画配置项* @see https://taro-docs.jd.com/docs/app-config#animation*/animation: {duration: 500,delay: 0,},
app.ts 中引入全局样式
div.taro_page_shade,
div.taro_router> .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {display: initial;
}div.taro_router > .taro_page {transition-timing-function: cubic-bezier(0.26, 1, 0.48, 1);// 修复 h5 首页中使用 useLoad 导致出现路由动画的问题&:first-child {transition: none;}
}
其taro-router源码地址
解决后的效果图
其他优化方案可参考:
优化侧滑返回体验
为了解决这个问题,我尝试了一些方案,并找到了有效的优化方法:
- 使用原生路由控制:
为了更好地处理侧滑返回的问题,可以尝试通过监听浏览器的popstate事件来手动控制页面的返回逻辑,而不是完全依赖taro-router。
可以结合Taro的生命周期函数,确保在页面卸载和返回时,页面状态能够及时恢复。例如:
window.addEventListener('popstate', () => {// 在这里添加逻辑,确保返回时页面状态保持一致
});
- 添加页面缓存,减少重新渲染:
利用页面缓存技术(如keep-alive机制)保持返回页面的状态,避免页面在返回时重新加载和渲染。
可以借助Taro的componentDidHide和componentDidShow生命周期钩子来处理页面缓存,确保页面在隐藏后不会被销毁,从而提高返回时的渲染速度。
- 优化过渡动画:
如果使用了自定义的过渡动画,可以调整动画的持续时间和缓动效果,尽量与系统侧滑的返回效果保持一致,减少视觉上不协调的感觉。
确保动画在页面返回时能够流畅过渡,而不是直接切换到空白页面。
- 减少页面体积和资源请求:
尽量减小页面的体积,减少不必要的资源请求,以加快页面的渲染速度。
使用懒加载和资源压缩等手段,提高页面的加载和渲染性能,从而减少返回时的白屏现象。
- 自定义路由堆栈管理:
可以尝试自己管理页面的路由堆栈,通过将各个页面状态存储在全局状态或缓存中,侧滑返回时根据当前的堆栈状态重新渲染页面,避免直接使用taro-router的默认行为。
- 减少网络请求延迟:
页面跳转时,尽量减少不必要的异步操作。通过提前缓存部分静态资源以及页面的初始状态,减少页面在返回时对服务器或其他网络资源的依赖,保证页面在极短时间内恢复显示。
- 使用Taro的预加载机制:
Taro提供了一些预加载页面数据的能力,利用componentWillPreload进行页面的预加载数据处理,可以让页面在用户触发返回前,已经做好准备,缩短白屏时间。
相关文章:

Taro构建的H5页面路由切换返回上一页存在白屏页面过渡
目录 项目背景:Taro与Hybrid开发问题描述:白屏现象可能的原因包括: 解决方案解决后的效果图 其他优化方案可参考: 项目背景:Taro与Hybrid开发 项目使用Taro框架同时开发微信小程序和H5页面,其中H5页面被嵌…...

【学习笔记】网络设备(华为交换机)基础知识 9 —— 堆叠配置
提示:学习华为交换机堆叠配置,含堆叠的概念、功能、角色、ID和优先级;堆叠的建立过程以及注意事项;包含堆叠的配置命令,以及堆叠的配置案例 一、前期准备 1.已经可以正常访问交换机的命令行接口 Console口本地访问教…...

jeston编译配置cuda加速版opencv
1.源码下载连接 opencv:Releases - OpenCV opencv-contrib: https://github.com/opencv/opencv_contrib 建议不要下最新版本 一般我会下4.5.4 // 4.5.6 // 4.6.0 opencv和opencv-contrib版本要对齐 将下好的opencv和opencv-contrib解压 将opencv-c…...

ApacheShiro反序列化 550 721漏洞
Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理个漏洞被称为 Shiro550 是因为在Apache Shiro的GitHub问题跟踪器中,该漏洞最初被标记为第550个问题,721漏洞名称也是由此而来 Shiro-550 CVE-2016-4437 Shiro反序列化Docker复现 …...

Github + 自定义域名搭建个人静态站点
Github 自定义域名搭建个人静态站点 使用 Github 部署一个自己的免费站点给你的站点添加上自定义域名 本文基于腾讯云基于二级域名, 作用于 Github 实现自定义域名站点 使用 Github 部署一个自己的免费站点 首先你得有一个 Github 账号, 没有就去注册一个,网上有教程,本文跳…...

使用OpenCV进行视频边缘检测:案例Python版江南style
1. 引言 本文将演示如何使用OpenCV库对视频中的每一帧进行边缘检测,并将结果保存为新的视频文件。边缘检测是一种图像处理技术,它可以帮助我们识别出图像中不同区域之间的边界。在计算机视觉领域,这项技术有着广泛的应用,比如物体…...

DataWhale10月动手实践——Bot应用开发task04学习笔记
一、图像流 1. 什么是图像流? 图像流是一种直观的图像处理流程工具,用户可以灵活组合各类图像处理模块。该系统将不同的图像处理工具模块化,并通过可视化界面,将这些模块以拖拽方式组合,构建完整的处理流程。用户可以…...

关于 IntelliJ IDEA 2024 安装使用
补丁文件...

React是如何工作的?
从编写组件到最后屏幕生成界面,如上图所示,我们现在需要知道的就是后面几步是如何运行的。 概述 这张图解释了 React 渲染过程的几个阶段: 渲染触发:通过更新某处的状态来触发渲染。渲染阶段:React 调用组件函数&…...

llama.cpp 去掉打印,只显示推理结果
llama.cpp 去掉打印,只显示推理结果 1 llama.cpp/common/log.h #define LOG_INF(...) LOG_TMPL(GGML_LOG_LEVEL_INFO, 0, __VA_ARGS__) #define LOG_WRN(...) LOG_TMPL(GGML_LOG_LEVEL_WARN, 0, __VA_ARGS__) #define LOG_ERR(…...
Word、PDF转换为图片Java
Word、PDF转换为图片Java 需求要在小程序端展示文档内容,所以将文档每页转换为图片后显示 参考和其他等方案: https://blog.csdn.net/strggle_bin/article/details/140599514 https://www.modb.pro/db/566986 https://blog.csdn.net/spring_is_comin…...

iOS IPA上传到App Store Connect的三种方案详解
引言 在iOS应用开发中,完成开发后的重要一步就是将IPA文件上传到App Store Connect以便进行测试或发布到App Store。无论是使用Xcode进行原生开发,还是通过uni-app、Flutter等跨平台工具生成的IPA文件,上传到App Store的流程都是类似的。苹果…...
Java中的Arrays类
java.util.Arrays是一个非常实用的类,提供了许多静态方法来操作数组,如排序、查找、复制和填充等。 1. toString - 将数组转换为字符串 // 导入java.util.Arrays类 import java.util.Arrays;public class ArraysExample {public static void main(Stri…...

GUI编程
GUI编程 【Java从0到架构师课程】笔记 GUI简介 GUI:图形用户界面,在计算机中采用图形的方式显示用户界面 java的GUI开发 AWT:java最早推出的GUI编程开发包,界面风格跟随操作系统SWT:eclipse就是java使用SWT开发的Sw…...
(multi)map和set--C++
文章目录 一、序列式容器和关联式容器二、set系列的使用1、set和multiset参考文档2、set类的介绍3、set的构造和迭代器4、set的增删查5、insert和迭代器遍历使用样例:6、find和erase使用样例:7、multiset和set的差异 三、map系列的使用1、map和multimap参…...

jmeter响应断言放进csv文件遇到的问题
用Jmeter的json 断言去测试http请求响应结果,发现遇到中文时出现乱码,导致无法正常进行响应断言,很影响工作。于是,察看了其他测试人员的解决方案,发现是jmeter本身对编码格式的设置导致了这一问题。解决方案是在jmete…...

复旦大学全球供应链研究中心揭牌,合合信息共话大数据赋能
10月13日,复旦大学全球供应链研究中心(以下简称“中心”)揭牌仪式在复旦大学管理学院政立院区隆重举行。我国的供应链体系庞大复杂,在百年未有之大变局下,保障产业链供应链安全已成为我国的重要战略目标。中心的设立旨…...

达那福发布新品音致系列:以顶尖降噪技术,开启清晰聆听新篇章
近日,国际知名助听器品牌达那福推出其最新研发的音致系列助听器。该系列产品旨在通过顶尖的声音处理技术,直面助听器市场中普遍存在的挑战——如何在噪声环境中提供清晰的语音辨识。 根据助听器行业协会2022年的调查数据,高达86%的佩戴者认为…...
当物理学奖遇上机器学习:创新融合的里程碑
作为一名程序员,看到 2024 年诺贝尔物理学奖颁发给机器学习与神经网络领域研究者,心中满是感慨与思考。 从编程技术角度出发,这意味着传统编程理念与物理思维有了更紧密的结合。在以往的编程中,算法优化多侧重于数据结构和计算效率…...

模拟电路2
BJT双极性晶体管 1.1 BJT共射特性曲线 输入特性: iB f(uBE)|UceC 定量分析,确定只有一个变量 输出特性 放大区:发射结正偏,集电结反偏 截至区:双结反偏 CE断路 饱和区:双结正偏 UCEs0.3 CE类似于开关闭…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...

基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...

Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...