uni-app 涉及到的生命周期小结

UniApp 中，除了常见的 Vue 生命周期（如 created、mounted 等），它还提供了特定于小程序和移动应用的页面生命周期和应用生命周期

UniApp 常见的页面生命周期

1、onLoad(options)

• 页面加载时触发。
• 常用于初始化页面数据，从页面 URL 的参数 options 获取数据。
• 只在页面首次加载时触发一次。

1
2
3
4

onLoad(options) {
  // 可以从options中拿到url查询参数
  console.log('页面加载', options);
}

2、onShow()

• 页面显示时触发，可能在页面首次加载后，也可能在页面重新显示时（如从后台切回前台）。
• 常用于刷新页面数据或 UI 状态。

1
2
3

onShow() {
  console.log('页面显示');
}

3、onReady()

• 页面初次渲染完成时触发，只触发一次。
• 页面结构加载和绘制完成后触发，可以在此进行与 UI 相关的操作。

1
2
3

onReady() {
  console.log('页面初次渲染完成');
}

4、onHide()

• 页面被隐藏时触发，比如跳转到其他页面或应用切换到后台时。
• 常用于暂停页面中的定时器或动画。

1
2
3

onHide() {
  console.log('页面隐藏');
}

5、onUnload()

• 页面卸载（离开）时触发，常用于清理资源（如关闭网络请求或销毁定时器）。

1
2
3

onUnload() {
  console.log('页面卸载');
}

6、onPullDownRefresh()

• 监听用户下拉动作的事件处理函数。
• 需要在 pages.json 中启用页面的下拉刷新功能。

1
2
3
4
5
6

{
  "path" : "goods_list/goods_list",
  "style": {
    "enablePullDownRefresh": true
  }
}

• 在处理完数据刷新后，调用 uni.stopPullDownRefresh() 来结束下拉刷新状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

export default {
  onPullDownRefresh() {
    console.log('用户触发了下拉刷新');
    
    // 模拟数据请求
    this.fetchData(() => {
      // 数据加载完成后，停止下拉刷新
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    fetchData(callback) {
      // 这里可以调用 API 或执行其他操作来获取新数据
      setTimeout(() => {
        console.log('数据刷新完成');
        callback && callback();
      }, 2000);  // 模拟延迟
    }
  }
}

在 UniApp 中，onReachBottom() 默认是在页面滚动到离底部 50px 位置时触发。不过在 pages.json 文件中，可以配置 onReachBottomDistance 属性来调整触底的距离。这个属性指定了页面滚动到底部时触发 onReachBottom() 事件的距离（单位 px）。例如，将触底距离设为 150px

1
2
3
4
5
6
7

{
  "path" : "goods_list/goods_list",
  "style": {
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 150
  }
}

7、onReachBottom()

• 页面上拉触底事件的处理函数。
• 用户上拉到页面底部时触发，常用于加载更多数据的场景。

8、onPageScroll(object

• 页面滚动时触发，可以获取页面的滚动距离。

1
2
3

onPageScroll(event) {
  console.log('页面滚动', event.scrollTop);
}

9、onShareAppMessage()

• 用户点击右上角分享时触发，返回自定义的分享内容。

1
2
3
4
5
6

onShareAppMessage() {
  return {
    title: '分享标题',
    path: '/pages/index/index'
  };
}

应用程序生命周期

这些生命周期钩子是针对整个应用程序的，在不同的应用场景下会被触发。

1、onLaunch()

• 当应用首次启动时触发，通常用于执行一些全局的初始化操作。

1
2
3

onLaunch(options) {
  console.log('应用启动');
}

2、onShow()

• 当应用从后台进入前台显示时触发。
• 类似页面生命周期中的 onShow，但是作用于整个应用。

1
2
3

onShow(options) {
  console.log('应用显示');
}

3、onHide()

• 当应用进入后台时触发。
• 可以在这里处理数据保存、暂停定时器等操作。

1
2
3

onHide() {
  console.log('应用隐藏');
}

4、onError()

• 当应用发生 JavaScript 错误时触发。
• 常用于全局错误监控。

1
2
3

onError(err) {
  console.error('应用出错', err);
}

5、onPageNotFound()

• 当页面路径不存在时触发，通常用于重定向到一个有效页面。

1
2
3
4
5

onPageNotFound(res) {
  uni.redirectTo({
    url: '/pages/404/404'
  });
}

小程序平台专属生命周期

1、onResize ()（小程序平台专属）

• 当小程序窗口尺寸发生变化时触发，通常在设备旋转时使用。

1
2
3

onResize(size) {
  console.log('窗口尺寸变化', size);
}

2、onTabItemTap (item)（小程序平台专属）

• 监听 tab 页点击的事件。

1
2
3

onTabItemTap(item) {
  console.log('Tab 被点击', item);
}

此笔记随时可能更新，总感觉还是见得少了……