微信小程序｜案例 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。