小程序的生命周期

        小程序的生命周期分为 应用生命周期（整个小程序）和 页面生命周期（单个页面），由框架自动触发，开发者可以通过对应的钩子函数进行逻辑处理。

1. 应用生命周期（App 生命周期）

在 app.js 中定义，管理整个小程序的生命周期。

 示例代码（app.js）

App({
  onLaunch(options) {
    console.log('小程序初始化', options);
    // 获取用户信息、初始化全局数据
  },
  onShow(options) {
    console.log('小程序显示', options);
    // 重新加载数据
  },
  onHide() {
    console.log('小程序隐藏');
    // 清理操作
  },
  onError(error) {
    console.error('小程序出错:', error);
    // 错误上报
  },
  onPageNotFound(res) {
    console.log('页面不存在:', res.path);
    wx.redirectTo({ url: '/pages/home/index' }); // 跳转到首页
  }
});

2. 页面生命周期（Page 生命周期）

在 page.js 中定义，管理单个页面的生命周期。

 示例代码（page.js）

Page({
  data: { text: 'Hello' },
  
  onLoad(options) {
    console.log('页面加载', options); // 获取路由参数
    this.loadData();
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    console.log('下拉刷新');
    this.loadData(() => wx.stopPullDownRefresh());
  },
  
  // 上拉触底
  onReachBottom() {
    console.log('触底加载');
    this.loadMoreData();
  },
  
  // 页面滚动
  onPageScroll(e) {
    console.log('滚动位置:', e.scrollTop);
  },
  
  // 分享
  onShareAppMessage() {
    return { title: '分享标题', path: '/pages/index/index' };
  },
  
  loadData(callback) {
    // 模拟异步请求
    setTimeout(() => {
      this.setData({ text: '数据已更新' });
      callback?.();
    }, 1000);
  }
});

3. 组件生命周期（Component 生命周期）

自定义组件也有自己的生命周期，类似 Page，但更细化：

 

示例代码（自定义组件） 

Component({
  lifetimes: {
    created() { console.log('组件创建'); },
    attached() { console.log('组件挂载'); },
    ready() { console.log('组件渲染完成'); },
    detached() { console.log('组件移除'); }
  },
  methods: {
    // 自定义方法
  }
});

总结

• 应用生命周期（App）：管理整个小程序（初始化、前后台切换）。

• 页面生命周期（Page）：管理单个页面（加载、显示、卸载、滚动、分享等）。

• 组件生命周期（Component）：管理自定义组件（创建、挂载、销毁）。

        掌握生命周期有助于在合适的时机执行逻辑（如初始化数据、清理资源、优化性能）。