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

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);
}

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