在微信小程序中,页面的生命周期函数按照特定的顺序依次执行。以下是常见的生命周期函数及其执行顺序,以及一个简单的代码示例:
生命周期执行顺序:
onLoad(options): 页面加载时触发,options为页面跳转所带来的参数。
onShow(): 页面显示时触发,每次页面展示都会调用。
onReady(): 页面初次渲染完成时触发,表示页面已经准备就绪,可以和视图层进行交互。
onHide(): 页面隐藏时触发,例如用户切换到了其他小程序、后台运行等。
onUnload(): 页面卸载时触发,如redirectTo或navigateBack到其他页面时。
onPullDownRefresh(): 用户下拉页面时触发,需要在app.json的window选项中或页面配置中设置enablePullDownRefresh为true。
onReachBottom(): 页面上拉触底时触发,可以用来实现下拉加载更多数据。
onPageScroll(Object): 页面滚动时触发,Object参数中包含scrollTop表示页面在垂直方向已滚动的距离。
onShareAppMessage(Object): 用户点击右上角分享时触发,需要在页面配置中设置shareAppMessage返回自定义分享内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // pages/index/index.js Page({ onLoad: function (options) { console.log( '页面加载' , options); }, onShow: function () { console.log( '页面显示' ); }, onReady: function () { console.log( '页面初次渲染完成' ); }, onHide: function () { console.log( '页面隐藏' ); }, onUnload: function () { console.log( '页面卸载' ); }, onPullDownRefresh: function () { console.log( '用户下拉页面' ); // 停止下拉刷新动画 wx.stopPullDownRefresh(); }, onReachBottom: function () { console.log( '页面上拉触底' ); // 加载更多数据 }, onPageScroll: function (event) { console.log( '页面滚动' , event.scrollTop); }, onShareAppMessage: function () { return { title: '分享标题' , path: '/pages/index/index' , imageUrl: '/images/share.jpg' }; } }); |
在上述示例中,我们展示了如何在微信小程序中使用生命周期函数,并通过控制台输出展示各生命周期函数的调用顺序及参数。根据实际需求,可以在每个生命周期函数中添加相应的业务逻辑,实现页面的初始化、数据加载、用户交互等功能。