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

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

ruisui881周前 (04-23)技术分析13

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

一、生命周期分类

  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
分享给朋友:

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

代码分支规范

一.gitflow工作流说明:主分支:master,稳定版本代码分支,对外可以随时编译发布的分支,不允许直接Push代码,只能请求合并(pull request),且只接受hotfix、release分支的代码合并。gitlab上做限制。热修复分支:hotfix,针对现场紧急问题、bug修复的代码分...

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置: 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置: 比如OA系统、多种角色的权限...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...

一套代码,多端运行——使用Vue3开发兼容多平台的小程序

介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发了一些多端兼容运行的开发框架,今天来体验一下使用Taro来体验一下使用Vue3开发多平台运行的小程序,以便于兼容各大...

uni-app基于vue开发小程序与标准vue开发新增点

1、路由跳转传参uni.navigateTo({ url: `/pages/transition/spreadTextAction?t=${this.options.t}&rt=${this.options.rt}&l=${this.options.l}`});uni.navigateBack({...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...