微信小程序中的生命周期

一.页面的生命周期
onLoad: 页面加载时触发。
onShow: 页面显示时触发。
onReady: 页面初次渲染完成时触发。
onHide: 页面隐藏时触发。
onUnload: 页面卸载时触发。
还有一些选则是否需要
例如：
onPullDownRefresh() 用户下拉触顶时触发
onReachBottom() 页面触底时触发。
onPageScroll(event) 页面滚动时触发,event包含页面滚动的信息。
onResize(resizeOption) 页面尺寸变化时触发，resizeOption包含页面尺寸变化的信息。
onShareAppMessage(): 用户点击右上角分享按钮时触发。
onTabItemTap(item) (仅适用于 tab 页面的页面)：点击 tab 时触发。item包含 tab 的信息。
二.组件的生命周期
created: 组件实例刚刚被创建时触发。
attached: 组件被插入到页面节点树时触发。
ready: 组件布局完成后触发。
moved: 组件实例被移动到另外一个节点时触发。
detached: 组件实例被从页面节点树移除时触发。

总的来说，页面生命周期主要关注整个页面的加载、显示、渲染和卸载过程，而组件生命周期则更关注组件实例的创建、插入、布局、移动和移除等过程。因此，它们在使用和触发时机上有一定的差异。
onLoad(options):

触发时机: 页面加载时触发，一般在页面初始化时调用。
参数: options为页面跳转所带来的参数。
用途:
    进行页面初始化操作，例如获取数据。
    解析场景值（scene）等。

Page({
  onLoad: function(options) {
    console.log('Page loaded with options:', options);
    // Initialize page data or perform API requests here
  }
});

onShow():

触发时机: 页面显示或从后台切换到前台时触发。
用途:
    每次页面显示时需要的操作，例如刷新数据。
    可以用来统计页面展示次数等。

Page({
  onShow: function() {
    console.log('Page is now shown');
    // Perform actions every time the page is shown
  }
});

onReady():

触发时机: 页面初次渲染完成时触发，仅触发一次。
用途:
    页面初次渲染后执行的操作，例如与视图相关的操作，初始化图表等。

Page({
  onReady: function() {
    console.log('Page initial rendering completed');
    // Perform operations that require the view to be rendered, such as initializing a canvas
  }
});

onHide():

触发时机: 页面隐藏时触发，例如用户进入其他页面或小程序切入后台。
用途:
    暂停或保存当前页面状态。
    停止定时器，减少资源消耗。

Page({
  onHide: function() {
    console.log('Page is now hidden');
    // Pause ongoing tasks or save state
  }
});

onUnload():

触发时机: 页面卸载时触发，例如用户关闭当前页面或跳转到其他页面。
用途:
    清理资源，例如停止网络请求、删除定时器等。
    保存用户数据或状态。

Page({
  onUnload: function() {
    console.log('Page is now unloaded');
    // Clean up resources and save necessary data
  }
});

onPullDownRefresh() (可选):

触发时机: 用户下拉触顶时触发。
用途:
    实现下拉刷新功能，重新加载数据。

Page({
  onPullDownRefresh: function() {
    console.log('User triggered pull-down refresh');
    // Refresh data and stop pull-down refresh when done
    wx.stopPullDownRefresh();
  }
});

onReachBottom() (可选):

触发时机: 页面触底时触发。
用途:
    实现上拉加载更多功能，加载下一页数据。

Page({
  onReachBottom: function() {
    console.log('User reached the bottom of the page');
    // Load more data
  }
});

onPageScroll(event) (可选):

触发时机: 页面滚动时触发。
参数: event包含页面滚动的信息。
用途:
    监听页面滚动，进行相应的处理，例如显示/隐藏返回顶部按钮。

Page({
  onPageScroll: function(event) {
    console.log('Page scrolled', event.scrollTop);
    // Handle scroll event
  }
});

onResize(resizeOption) (可选):

触发时机: 页面尺寸变化时触发。
参数: resizeOption包含页面尺寸变化的信息。
用途:
    适配布局，响应窗口大小变化。

Page({
  onResize: function(resizeOption) {
    console.log('Page size changed', resizeOption.size);
    // Adjust layout
  }
});

onShareAppMessage():

触发时机: 用户点击右上角分享按钮时触发。
用途:
    定制页面分享内容。

Page({
  onShareAppMessage: function() {
    return {
      title: 'Custom Share Title',
      path: '/page/path'
    };
  }
});

onTabItemTap(item) (仅适用于 tab 页面的页面)：

触发时机: 点击 tab 时触发。
参数: item包含 tab 的信息。
用途:
    处理 tab 切换事件。

Page({
  onTabItemTap: function(item) {
    console.log('Tab item tapped', item);
    // Handle tab item tap
  }
});

组件生命周期
微信小程序中的组件生命周期方法类似于页面生命周期，但也有其独特之处。理解这些生命周期方法有助于在合适的时机执行代码，从而更好地控制组件的行为和状态。
created():

触发时机: 在组件实例刚刚被创建并初始化的时候触发。
用途:
    初始化组件的数据。
    与父组件或其他逻辑建立联系，但此时还不能操作 DOM。

Component({
  created() {
    console.log('Component instance created');
    // Initialize component data
  }
});

attached():

触发时机: 组件实例进入页面节点树时触发。
用途:
    可以获取节点信息，进行一些需要 DOM 节点的初始化操作。

Component({
  attached() {
    console.log('Component attached to the page');
    // Perform operations that require the component to be in the node tree
  }
});

ready():

触发时机: 组件布局完成并且可以交互时触发。
用途:
    操作 DOM，进行视图相关的初始化工作，例如绘制图表等。

Component({
  ready() {
    console.log('Component is ready');
    // Perform operations that require the component to be fully rendered
  }
});

moved():

触发时机: 当组件实例被移动到别的位置时触发。
用途:
    一般较少用到，主要用于处理组件移动后的逻辑。

Component({
  moved() {
    console.log('Component moved');
    // Handle the component being moved
  }
});

detached():

触发时机: 组件实例被从页面节点树移除时触发。
用途:
    清理资源，如定时器、事件监听器等。

Component({
  detached() {
    console.log('Component detached from the page');
    // Cleanup resources and perform teardown operations
  }
});