微信小程序生命周期——让你的应用更加高效

前端

2024-02-10 10:33:30

微信小程序的生命周期

微信小程序的生命周期由以下几个阶段组成：

页面生命周期

onLoad(): 当页面首次加载时触发
onShow(): 当页面显示时触发
onReady(): 当页面准备就绪时触发
onHide(): 当页面隐藏时触发
onUnload(): 当页面销毁时触发

事件生命周期

触控事件（onTap、onLongPress 等）：当用户与页面元素交互时触发
硬件事件（onAccelerometerChange、onCompassChange 等）：当设备硬件发生变化时触发
媒体事件（onPlay、onPause 等）：当媒体文件播放或暂停时触发

自定义生命周期

小程序还支持自定义生命周期，允许开发者定义自己的事件触发器，例如：

onPageLoad(): 与 onLoad() 类似，但仅在页面首次加载时触发
onPageShow(): 与 onShow() 类似，但仅在页面从后台切换到前台时触发
onPageHide(): 与 onHide() 类似，但仅在页面切换到后台时触发

利用生命周期优化应用

合理利用小程序生命周期可以优化你的应用程序：

延迟加载非关键数据，在 onReady() 中加载
在 onUnload() 中清除定时器和事件监听器，释放资源
在 onPageShow() 中刷新数据，确保最新数据显示
通过自定义生命周期，创建针对特定场景的事件处理机制

示例

以下示例演示了如何使用页面生命周期来优化身份验证流程：

Page({
  onLoad() {
    // 判断是否已登录
    const isLoggedIn = wx.getStorageSync('isLoggedIn');
    if (!isLoggedIn) {
      // 显示登录弹窗
      this.setData({ showLoginModal: true });
    }
  },

  onShow() {
    // 从后台切换到前台，重新判断是否登录
    const isLoggedIn = wx.getStorageSync('isLoggedIn');
    if (!isLoggedIn) {
      // 再次显示登录弹窗
      this.setData({ showLoginModal: true });
    }
  },
});