首页 > 编程知识 正文

微信小程序组件的生命周期,小程序的生命周期包括哪些阶段

时间:2023-05-03 08:04:05 阅读:231591 作者:3819

1. 生命周期 App(全局)

位置:项目根目录app.js文件

App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(options) { console.log('监听小程序启动或切前台') }, onHide() { console.log('监听小程序切后台') }, onError(msg) { console.log('错误监听函数') }, onPageNotFound(res) { console.log('小程序要打开的页面不存在时触发'); wx.redirectTo({ // 重定向 url: 'pages/...' }) // 如果是 tabbar 页面,请使用 wx.switchTab } })

 

2. 页面生命周期 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 * 一个页面只会调用一次,可以在onLoad中获取当前页面从上一级页面带过来的参数 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 * 一个页面只会调用一次,代表当前页面已经准备妥当,可以和视图层进行交互 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 * 每次打开页面都会调用一次,如果需要每次进入页面时刷新数据,可在此方法中实现 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 * 当navigateTo或底部tab切换时调用 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 * 当redirectTo或navigateBack的时候调用 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})

 

3. 组件生命周期 // pages/myComponent.jsComponent({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { }, /*组件生命周期*/ lifetimes: { created() { console.log("在组件实例刚刚被创建时执行") }, attached() { console.log("在组件实例进入页面节点树时执行") }, ready() { console.log("在组件在视图层布局完成后执行") }, moved() { console.log("在组件实例被移动到节点树另一个位置时执行") }, detached() { console.log("在组件实例被从页面节点树移除时执行") }, error() { console.log("每当组件方法抛出错误时执行") }, /*组件所在页面的生命周期 */ pageLifetimes: { show: function () { // 页面被展示 console.log("页面被展示") }, hide: function () { // 页面被隐藏 console.log("页面被隐藏") }, resize: function (size) { // 页面尺寸变化 console.log("页面尺寸变化") } } } })

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。