微信小程序|案例 3.3 生命周期函数完整学习

发布时间:2026/9/24 4:57:39
微信小程序|案例 3.3 生命周期函数完整学习 一、什么是生命周期生命周期就是程序/页面从创建、显示、隐藏到销毁整个完整过程在不同阶段框架会自动调用对应的回调函数我们就可以在回调里面写业务代码。分为两大类应用生命周期控制整个小程序写在app.js的App({})里面。页面生命周期控制单个页面写在每个页面的.js文件Page({})里面。二、实验测试步骤将全部代码写入对应文件编译小程序打开开发者工具的Console控制台场景1首次编译启动小程序观察日志场景2点击底部tab在首页和其他页面来回切换场景3模拟器右上角…→模拟操作→Home模拟小程序切后台再切回前台观察每一步控制台打印的日志。三、运行现象与执行顺序第一次打开小程序App.onLaunch→App.onShow→ 首页onLoad→onShow→onReadyonLaunch整个小程序一辈子只跑一次。首次切换Tab首页 → 其他页面首页执行onHide其他页面执行onLoad→onShow→onReady切回首页其他页面 → 首页其他页面执行onHide首页只执行onShow⚠️重点首页已经存在内存中onLoad、onReady不会再次执行重复来回切换Tab只会触发页面的onHide和onShow全程不会触发onUnload。tabBar页面常驻内存切换tab不会销毁页面onUnload不会执行。小程序切后台Home键App触发onHide当前页面触发onHide小程序从后台恢复到前台App触发onShow当前页面触发onShow四、生命周期函数总结表✨应用生命周期 App函数触发时机执行次数onLaunch小程序初始化全局仅1次onShow小程序显示后台切回前台可多次onHide小程序进入后台可多次✨页面生命周期 Page函数触发时机执行次数常用场景onLoad页面加载页面仅1次获取页面参数、页面初始化请求接口onShow页面显示每次可见都执行每次打开页面刷新数据onReady页面初次渲染完成页面仅1次获取页面DOM节点onHide页面被隐藏可多次页面隐藏时暂停定时器onUnload页面销毁卸载销毁时执行清理定时器释放资源六、开发踩坑与心得tab页面切换不会卸载页面所以不要把每次都要刷新的代码写在onLoad要写在onShow。onReady代表页面渲染完成才能获取页面组件。onUnload在tab切换不会执行只有wx.redirectTo、wx.navigateBack页面关闭销毁才会触发。定时器记得在onUnload/onHide清除避免内存泄漏。小结只执行一次onLaunch、onLoad、onReady反复执行onShow、onHidetabBar页面常驻内存切换tab不会触发onUnload。

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询