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

Taro构建的H5页面路由切换返回上一页存在白屏页面过渡

目录

      • 项目背景:Taro与Hybrid开发
        • 问题描述:白屏现象
          • 可能的原因包括:
      • 解决方案
        • 解决后的效果图
      • 其他优化方案可参考:

项目背景:Taro与Hybrid开发

项目使用Taro框架同时开发微信小程序和H5页面,其中H5页面被嵌入到App中作为Hybrid开发的一部分。

问题描述:白屏现象

在H5页面中使用了taro-router进行页面跳转,整体体验上大部分情况下是流畅的。但在某些情况下,比如用户通过侧滑返回上一页时,会出现白色页面短暂的过渡现象。这个白屏问题严重影响了用户体验,特别是在用户希望快速返回时,白屏给人一种卡顿、未加载完全的感觉。以下是我在视频中捕捉到的问题现象:

  1. 用户在H5页面中侧滑返回时,页面先变为空白,然后再呈现上一页的内容。
  2. 白屏时间虽然很短,但对于频繁操作的用户来说,这种不流畅感很明显。

在这里插入图片描述

可能的原因包括:
  1. 页面状态未及时恢复:由于侧滑返回时,Taro可能未能在合适的时间点恢复之前页面的状态,导致页面需要重新渲染,从而产生白屏。

  2. WebView渲染延迟:在一些设备上,嵌入的WebView对于页面的渲染有微小延迟,而这种延迟在页面状态切换时尤为明显。

  3. 动画过渡问题: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源码地址

解决后的效果图

在这里插入图片描述

其他优化方案可参考:

优化侧滑返回体验

为了解决这个问题,我尝试了一些方案,并找到了有效的优化方法:

  1. 使用原生路由控制:

为了更好地处理侧滑返回的问题,可以尝试通过监听浏览器的popstate事件来手动控制页面的返回逻辑,而不是完全依赖taro-router。

可以结合Taro的生命周期函数,确保在页面卸载和返回时,页面状态能够及时恢复。例如:

window.addEventListener('popstate', () => {// 在这里添加逻辑,确保返回时页面状态保持一致
});
  1. 添加页面缓存,减少重新渲染:

利用页面缓存技术(如keep-alive机制)保持返回页面的状态,避免页面在返回时重新加载和渲染。

可以借助Taro的componentDidHide和componentDidShow生命周期钩子来处理页面缓存,确保页面在隐藏后不会被销毁,从而提高返回时的渲染速度。

  1. 优化过渡动画:

如果使用了自定义的过渡动画,可以调整动画的持续时间和缓动效果,尽量与系统侧滑的返回效果保持一致,减少视觉上不协调的感觉。

确保动画在页面返回时能够流畅过渡,而不是直接切换到空白页面。

  1. 减少页面体积和资源请求:

尽量减小页面的体积,减少不必要的资源请求,以加快页面的渲染速度。

使用懒加载和资源压缩等手段,提高页面的加载和渲染性能,从而减少返回时的白屏现象。

  1. 自定义路由堆栈管理:

可以尝试自己管理页面的路由堆栈,通过将各个页面状态存储在全局状态或缓存中,侧滑返回时根据当前的堆栈状态重新渲染页面,避免直接使用taro-router的默认行为。

  1. 减少网络请求延迟:

页面跳转时,尽量减少不必要的异步操作。通过提前缓存部分静态资源以及页面的初始状态,减少页面在返回时对服务器或其他网络资源的依赖,保证页面在极短时间内恢复显示。

  1. 使用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类似于开关闭…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...

Robots.txt 文件

什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后,命令 changeCase.commands 可预览转换效果 EmmyLua…...

PLC入门【4】基本指令2(SET RST)

04 基本指令2 PLC编程第四课基本指令(2) 1、运用上接课所学的基本指令完成个简单的实例编程。 2、学习SET--置位指令 3、RST--复位指令 打开软件(FX-TRN-BEG-C),从 文件 - 主画面,“B: 让我们学习基本的”- “B-3.控制优先程序”。 点击“梯形图编辑”…...

MyBatis-Plus 常用条件构造方法

1.常用条件方法 方法 说明eq等于 ne不等于 <>gt大于 >ge大于等于 >lt小于 <le小于等于 <betweenBETWEEN 值1 AND 值2notBetweenNOT BETWEEN 值1 AND 值2likeLIKE %值%notLikeNOT LIKE %值%likeLeftLIKE %值likeRightLIKE 值%isNull字段 IS NULLisNotNull字段…...

OpenHarmony标准系统-HDF框架之I2C驱动开发

文章目录 引言I2C基础知识概念和特性协议&#xff0c;四种信号组合 I2C调试手段硬件软件 HDF框架下的I2C设备驱动案例描述驱动Dispatch驱动读写 总结 引言 I2C基础知识 概念和特性 集成电路总线&#xff0c;由串网12C(1C、12C、Inter-Integrated Circuit BUS)行数据线SDA和串…...

多模态大语言模型arxiv论文略读(112)

Assessing Modality Bias in Video Question Answering Benchmarks with Multimodal Large Language Models ➡️ 论文标题&#xff1a;Assessing Modality Bias in Video Question Answering Benchmarks with Multimodal Large Language Models ➡️ 论文作者&#xff1a;Jea…...