为初学者解析微信小程序的生命周期

微信小程序是一种可以在微信平台上运行的应用程序，它具有自己的生命周期。了解小程序的生命周期非常重要，可以帮助开发者更好地管理小程序的运行过程和资源。

小程序的生命周期包括以下几个阶段：

1. App 在打开小程序时，会触发 App 的生命周期。在 App 的生命周期中，可以进行全局的初始化操作，比如注册全局的数据、监听全局的事件等。

2. Page Page 是小程序的页面，每个小程序至少包含一个 Page。当小程序打开一个页面时，会触发该页面的生命周期。在 Page 的生命周期中，可以进行页面的初始化操作，比如获取页面的参数、设置页面的数据等。

3. Component Component 是小程序的组件，可以在不同的页面中被复用。当一个页面中使用了某个组件时，会触发该组件的生命周期。在 Component 的生命周期中，可以进行组件的初始化操作，比如设置组件的数据、监听组件的事件等。

下面将详细介绍每个生命周期的具体内容和代码案例。

1. App 的生命周期

App 的生命周期包括以下几个阶段：

1.1. onLaunch：小程序初始化时触发，可以在这里进行全局的初始化操作，如注册全局的数据、监听全局的事件等。

App({
  onLaunch: function(options) {
    // 初始化操作
    console.log('App onLaunch');

    // 注册全局数据
    this.globalData.userInfo = {
      name: '小明',
      age: 18
    };

    // 监听全局事件
    this.eventBus.on('login', function(data) {
      console.log('登录事件', data);
    });
  },
  globalData: {
    userInfo: null
  },
  eventBus: new EventBus()
});

1.2. onShow：小程序启动或从后台进入前台显示时触发，可以在这里进行页面跳转、获取用户信息等操作。

App({
  onShow: function(options) {
    // 判断来源，并进行相应的操作
    if (options.scene === 1001) {
      wx.reLaunch({
        url: '/pages/index/index'
      });
    }

    // 获取用户信息
    wx.getUserInfo({
      success: function(res) {
        console.log('用户信息', res.userInfo);
      }
    });
  }
});

1.3. onHide：小程序从前台进入后台时触发，可以在这里进行资源释放、保存数据等操作。

App({
  onHide: function() {
    // 保存数据
    wx.setStorageSync('token', this.globalData.token);

    // 释放资源
    this.eventBus.off('login');
  }
});

1. Page 的生命周期

Page 的生命周期包括以下几个阶段：

2.1. onLoad：页面加载时触发，可以在这里进行页面的初始化操作，如获取参数、设置数据等。

Page({
  onLoad: function(options) {
    // 获取参数
    console.log('页面参数', options);

    // 设置数据
    this.setData({
      title: '首页'
    });
  }
});

2.2. onReady：页面初次渲染完成时触发，可以在这里进行页面相关的操作，如获取元素信息、设置动画等。

Page({
  onReady: function() {
    // 获取元素信息
    const query = wx.createSelectorQuery();
    query.select('.box').boundingClientRect(function(res) {
      console.log('元素信息', res);
    });
    query.exec();

    // 设置动画
    const animation = wx.createAnimation();
    animation.rotate(360).step();
    this.setData({
      animationData: animation.export()
    });
  }
});

2.3. onShow：页面显示时触发，可以在这里进行页面显示相关的操作，如刷新数据、监听事件等。

Page({
  onShow: function() {
    // 刷新数据
    this.refreshData();

    // 监听事件
    this.eventBus.on('login', this.onLogin);
  },
  refreshData: function() {
    // 刷新数据
    // ...
  },
  onLogin: function(data) {
    console.log('登录事件', data);
  }
});

2.4. onHide：页面从前台进入后台时触发，可以在这里进行一些准备操作，如保存数据、暂停播放等。

Page({
  onHide: function() {
    // 保存数据
    this.saveData();

    // 暂停播放
    wx.pauseBackgroundAudio();
  },
  saveData: function() {
    // 保存数据
    // ...
  }
});

2.5. onUnload：页面被关闭时触发，可以在这里进行资源释放、清理数据等。

Page({
  onUnload: function() {
    // 释放资源
    this.eventBus.off('login');

    // 清理数据
    this.setData({
      title: ''
    });
  }
});

1. Component 的生命周期

Component 的生命周期包括以下几个阶段：

3.1. created：组件实例被创建时触发，可以在这里进行组件的初始化操作，如设置数据、监听事件等。

Component({
  created: function() {
    // 设置数据
    this.setData({
      title: '组件',
      content: '这是一个组件'
    });

    // 监听事件
    this.eventBus.on('login', this.onLogin);
  },
  onLogin: function(data) {
    console.log('登录事件', data);
  }
});

3.2. attached：组件实例被添加到页面节点树时触发，可以在这里进行组件的相关操作，如获取父组件实例、更新数据等。

Component({
  attached: function() {
    // 获取父组件实例
    const parent = this.getRelationNodes('../parent/parent')[0];
    console.log('父组件实例', parent);

    // 更新数据
    this.setData({
      title: '新标题'
    });
  }
});

3.3. ready：组件首次渲染完成时触发，可以在这里进行组件的相关操作。

Component({
  ready: function() {
    // 获取元素信息
    const query = wx.createSelectorQuery();
    query.select('.box').boundingClientRect(function(res) {
      console.log('元素信息', res);
    });
    query.exec();
  }
});

3.4. detached：组件实例从页面节点树中被移除时触发，可以在这里进行资源释放、清理数据等。

Component({
  detached: function() {
    // 释放资源
    this.eventBus.off('login');

    // 清理数据
    this.setData({
      title: '',
      content: ''
    });
  }
});

以上是微信小程序的生命周期内容的详细解析和代码案例，希望能帮助到初学者更好地理解和使用微信小程序的生命周期。