当前位置:首页 > 技术分析 > 正文内容

微信小程序生命周期的详细说明

ruisui882个月前 (04-23)技术分析25

以下是微信小程序生命周期的详细说明,按不同维度分类:

一、生命周期分类

  1. 应用生命周期
    管理整个小程序的生命周期,包含以下核心函数:
  2. onLaunch:首次启动时触发,全局只执行一次
  3. onShow:从后台进入前台时触发(冷启动/热启动)
  4. onHide:从前台进入后台时触发(如点击右上角关闭)
  5. 页面生命周期
    管理单个页面的生命周期,关键函数包括:
  6. onLoad:页面加载时触发,用于获取路由参数
  7. onShow:页面显示时触发(每次进入前台)
  8. onReady:页面初次渲染完成时触发(仅一次)
  9. onHide:页面隐藏时触发(跳转其他页面或进入后台)
  10. onUnload:页面销毁时触发(如关闭或路由返回)
  11. 组件生命周期
    针对自定义组件的生命周期函数:
  12. created:组件实例创建时触发
  13. attached:组件被添加到页面节点树时触发
  14. detached:组件从页面节点树移除时触发

二、生命周期运行机制

  1. 启动方式
  2. 冷启动:首次打开或销毁后重新打开,需完整初始化
  3. 热启动:后台切换回前台,保留原有状态
  4. 状态切换规则
  5. 前台→后台:触发页面 onHide 和应用 onHide
  6. 挂起:后台持续5秒后停止JS线程,保留内存状态
  7. 销毁:挂起30分钟或系统资源不足时触发,释放内存

三、生命周期执行顺序

  1. 应用与页面联动
  2. 启动流程:App.onLaunch → Page.onLoad → Page.onShow → Page.onReady
  3. 切换后台:Page.onHide → App.onHide46
  4. 组件与页面联动
  5. 组件所在页面的生命周期函数优先于组件自身生命周期执行

四、核心注意事项

  1. 资源管理
  2. 在 onUnload 或组件 detached 中清理定时器、事件监听等资源
  3. 避免在 onHide 阶段执行耗时操作,可能被系统强制终止
  4. 数据初始化
  5. 页面参数传递需在 onLoad 中通过 options 接收
  6. 动态数据更新应在 onShow 中处理,确保每次进入前台时同步

通过合理利用生命周期函数,开发者可精准控制小程序资源加载、状态切换和数据更新,提升用户体验与性能。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3557.html

标签: onpageshow
分享给朋友:

“微信小程序生命周期的详细说明” 的相关文章

Java教程:gitlab-使用入门

1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作GitLab简介GitLab环境搭建GitLab基本使用(组、权限、用户、项目)2 GitLab简介GitLab是整个DevOps生命周期...

身体越柔软越好?刻苦拉伸可能反而不健康 | 果断练

坐下伸直膝盖,双手用力向前伸,再用力……比昨天前进了一厘米,又进步了! 这么努力地拉伸,每个人都有自己的目标,也许是身体健康、线条柔美、放松肌肉、体测满分,也可能为了随时劈个叉,享受一片惊呼。 不过,身体柔软,可以享受到灵活的福利,也可能付出不稳定的代价,并不是越刻苦拉伸越好。太硬或者太软,都不安全...

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...

Vue进阶(幺叁捌):vue路由传参的几种基本方式

1、动态路由(页面刷新数据不丢失)methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,...

Vue页面传参详解

一、两种方式方法1:name跳转页面this.$router.push({name:'anotherPage',params:{id:1}})另一页面接收参数方式:this.$route.params.id示例:控制台展示:方法2:path跳转页面this.$router.push(...

基于微信小程序+springboot+vue技术构建的开源微信商城

介绍基于 微信小程序 + springboot + vue 技术构建 ,支持单店铺,多店铺入驻的商城平台。项目包含 微信小程序,管理后台。基于java后台语言,已功能闭环,且达到商用标准的一套项目体系。技术栈平台功能介绍小程序演示图管理后端演示图小程序体验码演示地址1.0版演示地址说明后台管理端演示...