目录
- 项目背景：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进行页面的预加载数据处理，可以让页面在用户触发返回前，已经做好准备，缩短白屏时间。
