uniapp-页面生命周期

作者: 前端AC | 原文: https://juejin.cn/post/7426994375057211444

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。以下是 uni-app 页面生命周期的详细介绍，包括一些简单的示例：

初始化阶段

onLoad(options)

触发时机：页面加载时触发，且只触发一次。
参数：options 是一个包含页面路径参数的对象。
示例：从上一个页面传递参数到当前页面。

onLoad(options) {
  console.log(options.id); // 输出上一个页面传递的 id 参数
}

onShow()

触发时机：页面显示时触发，包括页面加载和从后台切到前台。
示例：更新页面数据。

onShow() {
  this.fetchData(); // 调用方法获取最新数据
}

渲染阶段

onReady()

触发时机：页面初次渲染完成时触发，且只触发一次。
示例：初始化页面中的图表。

onReady() {
  this.initChart(); // 初始化图表
}

运行阶段

onHide()

触发时机：页面隐藏时触发，如页面跳转或应用切入后台等。
示例：停止视频播放。

onHide() {
  this.video.pause(); // 停止视频播放
}

销毁阶段

onUnload()

触发时机：页面卸载时触发，如页面关闭。
示例：清除定时器。

onUnload() {
  clearInterval(this.timer); // 清除定时器
}

事件处理

onPullDownRefresh()

触发时机：监听用户下拉动作，用于下拉刷新。
示例：重新加载数据。

onPullDownRefresh() {
  this.fetchData().then(() => {
    uni.stopPullDownRefresh(); // 停止下拉刷新动画
  });
}

onReachBottom()

触发时机：页面滚动到底部时触发。
示例：加载更多数据。

onReachBottom() {
  this.loadMoreData(); // 加载更多数据
}

onShareAppMessage(options)

触发时机：用户点击右上角分享时触发。
参数：options 是一个包含分享配置的对象。
示例：自定义分享内容。

onShareAppMessage(options) {
  return {
    title: '分享标题',
    path: '/pages/index/index?id=123'
  };
}

onPageScroll(Object)

触发时机：监听页面滚动。
参数：Object 包含 scrollTop 属性。
示例：实现返回顶部按钮的显示与隐藏。

onPageScroll(e) {
  if (e.scrollTop > 100) {
    this.showToTop = true; // 显示返回顶部按钮
  } else {
    this.showToTop = false; // 隐藏返回顶部按钮
  }
}

onTabItemTap(Object)

触发时机：点击 tab 时触发。
参数：Object 包含 index、pagePath、text 等字段。
示例：记录用户点击的 tab。

onTabItemTap(item) {
  console.log(item.index); // 输出点击的 tab 索引
}

在 uni-app 中，以下是你提到的几个生命周期函数和事件的详细说明：

onNavigationBarButtonTap

触发时机：当点击自定义导航栏按钮时触发。
用途：可以用于处理自定义导航栏按钮的点击事件。
示例：

export default {

  onNavigationBarButtonTap(e) {
    console.log('导航栏按钮被点击', e.index);
    // e.index 是按钮在数组中的索引
  }

};

onBackPress

触发时机：当用户点击返回按钮时触发。
用途：可以用于拦截返回行为，进行一些自定义操作，比如弹窗确认是否退出。
返回值：如果返回值为 true，则不会返回上一页。
示例：

export default {

  onBackPress(options) {
    // 显示确认对话框
    uni.showModal({
      title: '提示',
      content: '确定要退出吗？',
      success: function (res) {
        if (res.confirm) {
          // 用户点击确定，执行退出操作
          uni.navigateBack();
        } else if (res.cancel) {
          // 用户点击取消，不执行退出操作
        }
      }
    });
    // 返回 true 表示不执行默认的返回行为
    return true;
  }

};

onNavigationBarSearchInputChanged

触发时机：当自定义导航栏的搜索框输入内容变化时触发。
用途：可以用于实现搜索框的实时搜索功能。
示例：

export default {

  onNavigationBarSearchInputChanged(e) {
    console.log('搜索框内容变化', e.text);
    // e.text 是搜索框中的文本内容
  }

};

onNavigationBarSearchInputConfirmed

触发时机：当用户确认搜索时触发（通常是在搜索框输入完成后点击键盘的搜索按钮）。
用途：可以用于处理搜索逻辑。
示例：

export default {
  // ...
  onNavigationBarSearchInputConfirmed(e) {
    console.log('搜索确认', e.text);
    // 执行搜索操作
  }

};

onNavigationBarSearchInputClicked

触发时机：当用户点击自定义导航栏的搜索框时触发。
用途：可以用于处理搜索框的点击事件，比如弹出搜索历史。
示例：

export default {
  // ...
  onNavigationBarSearchInputClicked() {
    console.log('搜索框被点击');
    // 弹出搜索历史等操作
  }

};

onShareTimeline

触发时机：当用户点击右上角菜单中的“分享到朋友圈”按钮时触发。
用途：可以用于自定义分享到朋友圈的内容。
示例：

export default {
  // ...
  onShareTimeline() {
    return {
      title: '分享到朋友圈的标题',
      imageUrl: '分享到朋友圈的图片URL',
      query: '分享参数'
    };
  }

};

onAddToFavorites

触发时机：当用户点击右上角菜单中的“收藏”按钮时触发。
用途：可以用于自定义收藏的内容。
示例：

export default {
  // ...
  onAddToFavorites(options) {
    return {
      title: '收藏的标题',
      imageUrl: '收藏的图片URL',
      query: '收藏参数'
    };
  }

};

特别注意的是，这些事件和生命周期函数的使用可能会根据不同的平台（如小程序、H5、App）有所差异，差异入下图：