微信小程序-生命周期

一、生命周期的作用

• 控制资源加载与释放（如数据初始化、定时器清理）
• 管理页面状态（如页面显示/隐藏时的数据更新）
• 优化性能（避免不必要的重复操作）

二、 应用生命周期（App Lifetime）

（一）核心生命周期函数

// app.js  
App({  
  // 应用初始化时触发（全局只触发一次）  
  onLaunch(options) {  
    console.log('应用初始化', options);  
    // 用途：获取场景值、初始化全局数据、登录校验  
  },  

  // 应用显示到前台时触发（从后台切换回前台）  
  onShow(options) {  
    console.log('应用显示', options);  
    // 用途：更新全局数据、恢复定时任务  
  },  

  // 应用隐藏到后台时触发（切到后台或小程序被销毁前）  
  onHide() {  
    console.log('应用隐藏');  
    // 用途：暂停定时器、保存临时数据  
  },  

  // 全局错误监听（脚本错误或API调用失败）  
  onError(error) {  
    console.error('全局错误', error);  
  }  
});  

（二） 执行顺序与场景

• 用户首次打开小程序 → onLaunch → onShow
• 点击右上角关闭 → onHide
• 再次从微信发现栏进入 → onShow
• 全局脚本报错 → onError

注意事项：

• onLaunch 和 onShow 的 options 参数包含场景值（scene）和启动路径（path）。
• 避免在 onLaunch 中执行耗时操作，防止启动白屏。

三、页面生命周期（Page Lifetime）

（一）核心生命周期函数

// pages/index/index.js  
Page({  
  // 页面加载时触发（一个页面只调用一次）  
  onLoad(options) {  
    console.log('页面加载', options);  
    // 用途：接收路由参数、初始化页面数据  
  },  

  // 页面初次渲染完成时触发（一个页面只调用一次）  
  onReady() {  
    console.log('页面就绪');  
    // 用途：操作页面DOM（如初始化地图组件）  
  },  

  // 页面显示时触发（从其他页面返回或应用切回前台）  
  onShow() {  
    console.log('页面显示');  
    // 用途：刷新数据（如实时价格）  
  },  

  // 页面隐藏时触发（跳转到其他页面或应用切到后台）  
  onHide() {  
    console.log('页面隐藏');  
    // 用途：暂停页面动画、取消监听  
  },  

  // 页面卸载时触发（页面被关闭或路由跳离）  
  onUnload() {  
    console.log('页面卸载');  
    // 用途：清理定时器、取消订阅  
  },  

  // 页面下拉刷新时触发  
  onPullDownRefresh() {  
    console.log('下拉刷新');  
    // 用途：重新加载数据，完成后调用 wx.stopPullDownRefresh()  
  },  

  // 页面上拉触底时触发  
  onReachBottom() {  
    console.log('触底加载');  
    // 用途：加载更多数据（分页）  
  },  

  // 页面滚动时触发  
  onPageScroll(e) {  
    console.log('页面滚动', e.scrollTop);  
    // 用途：根据滚动位置控制UI（如返回顶部按钮）  
  }  
});  

（二） 生命周期执行流程

• 页面首次加载：
  onLoad → onShow → onReady

• 页面跳转：
  A页面跳转到B页面：
  A.onHide → B.onLoad → B.onShow → B.onReady

• 返回A页面：
  B.onUnload → A.onShow

• 页面卸载：
  onUnload（如调用 wx.redirectTo 或关闭当前页面）

四、组件生命周期（Component Lifetime）

（一）核心生命周期函数

Component({  
  // 组件生命周期（新版写法，推荐）  
  lifetimes: {  
    // 组件实例被创建时触发（不能调用setData）  
    created() {  
      console.log('组件创建');  
    },  
    // 组件被添加到页面节点树时触发  
    attached() {  
      console.log('组件挂载');  
      // 用途：初始化数据、获取页面上下文  
    },  
    // 组件渲染完成时触发  
    ready() {  
      console.log('组件就绪');  
      // 用途：操作组件DOM  
    },  
    // 组件被移动到节点树其他位置时触发  
    moved() {  
      console.log('组件移动');  
    },  
    // 组件被移除时触发  
    detached() {  
      console.log('组件卸载');  
      // 用途：清理资源  
    }  
  },  

  // 旧版生命周期（兼容写法，不推荐）  
  attached() { /* ... */ },  
  detached() { /* ... */ }  
});  

（二）页面生命周期对组件的影响

• 当页面触发 onHide 时，组件不会自动销毁。
• 当页面触发 onUnload 时，页面内的所有组件会触发 detached。

（三）组件与页面生命周期联动

Component({  
  pageLifetimes: {  
    // 组件所在页面显示时触发  
    show() {  
      console.log('页面显示 → 组件活跃');  
    },  
    // 组件所在页面隐藏时触发  
    hide() {  
      console.log('页面隐藏 → 组件休眠');  
    }  
  }  
});