首页 > 编程语言 >【微信小程序】页面生命周期onShow,onLoad,onReady的差别

【微信小程序】页面生命周期onShow,onLoad,onReady的差别

时间:2024-07-05 14:21:28浏览次数:20  
标签:onLoad onShow 触发 onReady 加载 页面

1. 触发时机和条件

  • onLoad:
    • 触发时机:页面加载时触发,即当页面被创建并准备加载时。
    • 触发条件:首次打开页面时调用,之后页面再次打开(如通过页面跳转返回)则不会再次触发。
    • 作用:通常用于页面的数据初始化,如从服务器获取数据、设置页面的初始状态等。
  • onShow:
    • 触发时机:页面显示时触发,即页面每次出现在屏幕上时。
    • 触发条件:每次打开页面(包括首次打开和从其他页面返回)都会调用。
    • 作用:常用于页面显示时的数据更新、页面刷新、用户信息获取、数据统计和埋点等。
  • onReady:
    • 触发时机:页面初次渲染完成时触发,即页面的DOM结构已经渲染完成,但不一定所有的异步数据都已加载。
    • 触发条件:每个页面在其生命周期内只会调用一次onReady
    • 作用:用于在页面初次渲染完成后执行某些操作,如操作DOM、设置定时器、调用API等。

2. 使用场景

  • onLoad:适合用于数据初始化、页面状态设置等需要在页面加载时完成的操作。
  • onShow:适合用于页面显示时的数据更新、页面刷新、用户信息获取等需要在页面每次显示时进行的操作。
  • onReady:适合用于页面初次渲染完成后的DOM操作、定时器设置等。

3. 注意事项

  • onLoad中,可以通过参数options获取页面跳转时传递的参数。
  • onShowonLoad在触发时机上有明显的区别,前者在页面每次显示时都会触发,后者只在页面首次加载时触发。
  • onReady确保了在页面初次渲染完成后执行代码,但需要注意异步数据可能还未加载完成。

标签:onLoad,onShow,触发,onReady,加载,页面
From: https://www.cnblogs.com/lishuxuan/p/18285728

相关文章

  • Could not recover RibbonLoadBalancerClient.choose ServiceInstance
    org.springframework.retry.TryException:Couldnotrecover;nestedexceptionisjava.lang.AbstractMethodError:org.springframework.cloud.netflix.ribbon.RibbonLoadBalancerClient.choose(Ljava/lang/String;Lorg/springframework/cloud/client/loadbalancer/Request;......
  • JS之windows常见事件onload
    //window.onload=function(){//varbtn=document.querySelector('button');//btn.addEventListener('click',function(){//alert('点击我');//})//}//window.......
  • uni.setStorageSync在登录页面设置缓存,第一次进入首页在onload里面获取不到缓存数据的
    在onLoad里面获取不到缓存:onLoad(option){consttoken=uni.getStorageSync('token');if(!token){uni.showToast({title:"请先登录",icon:"error",......
  • 小程序更新版本(加载首页onLoad的时候调用)
    /***获取新版本信息*/exportfunctiongetNewVersionUpdateMessage(){console.log('版本更新!')constupdateManager=uni.getUpdateManager();updateManager.onCheckForUpdate(function(res){//请求完新版本信息的回调console.log(res.hasUpdate);......
  • 性能优化之window.onload
    前言最近在做一些性能优化相关的工作,相信大家在工作过程中也会遇到一些性能优化相关的场景,这对于前端开发者来讲是一项加分技能。为了我们的用户在使用我们的产品时能够有一个非常好的体验,我们需要对页面进行诊断优化。在行业中,我们的页面P90在两秒内算是达标,超过这个时间那么你......
  • 性能优化之window.onload
    前言最近在做一些性能优化相关的工作,相信大家在工作过程中也会遇到一些性能优化相关的场景,这对于前端开发者来讲是一项加分技能。为了我们的用户在使用我们的产品时能够有一个非常好的体验,我们需要对页面进行诊断优化。在行业中,我们的页面P90在两秒内算是达标,超过这个时间那么你就......
  • window.onload && window.addEventListener 区别
    window.onload&&window.addEventListener区别关于本节提到的:window.addEventListener('load',function(){alert('word')})window.onload=function(){alert('hello')}执行顺序addEventListener比onload先执行a......
  • 性能优化之window.onload
    前言最近在做一些性能优化相关的工作,相信大家在工作过程中也会遇到一些性能优化相关的场景,这对于前端开发者来讲是一项加分技能。为了我们的用户在使用我们的产品时能够有一个非常好的体验,我们需要对页面进行诊断优化。在行业中,我们的页面P90在两秒内算是达标,超过这个时间那么你......
  • SPI的插件化设计-->JDK的SPI(ServiceLoader)实现拓展、实现Dubbo的SPI(ExtensionLoade
    (目录)1.什么是SPI?SPI的全称是ServiceProviderInterface,直译过来就是"服务提供接口",为了降低耦合,实现在模块装配的时候动态指定具体实现类的一种服务发现机制。动态地为接口寻找服务实现。它的核心来自于ServiceLoader这个类。javaSPI应用场景很广泛,在Java底层和一些......
  • Unity中的InitializeOnLoad特性:深入解析与实践
    Unity中的InitializeOnLoad特性:深入解析与实践在Unity开发过程中,我们经常需要在编辑器启动时或脚本重新编译后执行一些操作,例如初始化数据、注册事件等。这时,我们可以使用InitializeOnLoad特性来实现这一需求。本文将详细介绍InitializeOnLoad特性的用法,并通过三个实际案例来展示......