IT廉连看——Uniapp——Uniapp生命周期

[IT廉连看]

目标：

了解生命周期分为哪两种
了解两种生命周期的区别
熟练编写常见的生命周期代码
编写所有的生命周期代码

1、Uniapp生命周期

页面生命周期：页面生命周期指的是一个页面从创建到销毁的整个过程中所经历的各个阶段。

应用生命周期：应用生命周期指的是整个应用从启动到关闭的过程中所经历的各个阶段。

2、页面生命周期和应用生命周期的区别

页面生命周期关注于单个页面的生命周期管理，针对页面的加载、显示、隐藏等事件进行处理
应用生命周期关注于整个应用的生命周期管理，处理应用的初始化、前台展示、后台隐藏等事件

虽然页面生命周期和应用生命周期都是为了方便开发者在不同阶段执行相应的逻辑操作而设计的，但它们的执行时机和作用范围是不同的。

3、页面生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

3.1 页面生命周期中各个函数的用法

3.1.1 onload的用法及示例代码

在Uniapp中，onLoad生命周期函数是页面加载时触发的函数，它只会在页面加载时执行一次。开发者通常可以在这个生命周期函数中进行页面的初始化操作，如获取页面参数、初始化数据等。

示例代码：


<template>
  <view class="container">
    <text>{{ message }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      message: '' // 初始化一个空字符串，用于保存加载后的消息
    };
  },
  onLoad(options) {
    // 在页面加载时，获取页面参数，并更新页面数据
    const { name } = options; // 假设页面参数中有一个名为name的参数
    this.message = `Hello, ${name || 'World'}!`; // 如果没有传入name参数，则默认为'World'
  }
};
script>
<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}
style>

3.1.2 onShow的用法及示例代码

在Uniapp中，onShow生命周期函数是页面显示时触发的函数。它会在页面每次展示时都执行，包括页面首次加载时以及从其他页面返回到当前页面时。

通常情况下，开发者可以在onShow生命周期函数中执行一些需要在页面展示时更新的操作，比如刷新数据、重新加载页面等。

示例代码：


<template>
  <view class="container">
    <text>{{ message }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      message: 'Welcome to Uniapp!' // 初始化消息
    };
  },
  onShow() {
    // 页面每次展示时都执行，可以在这里进行数据刷新等操作
    // 这里简单地示范每次展示页面时更新消息
    this.message = 'Hello again!'; 
  }
};
script>
<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}
style>

3.1.3 onReady的用法及示例代码

在uni-app中，onReady生命周期函数是页面渲染完成时触发的函数。通常在onReady生命周期函数中可以进行一些页面渲染后的操作，比如获取 DOM 节点信息、发起数据请求等。

示例代码：


<template>
  <view>
    <text>{{ message }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      message: 'Hello, onReady!'
    }
  },
  onReady() {
    // 页面渲染完成后，修改 message 的值
    this.message = 'Page is ready!'
  }
}
script>

在这个示例中，页面渲染时会显示最初的文本“Hello, onReady!”，然后在onReady生命周期函数中，页面渲染完成后会将文本修改为“Page is ready!”。

这样，通过 onReady 生命周期函数，我们可以在页面渲染完成后执行一些额外的操作，以确保页面已经完全加载后再进行相关处理。

3.1.4 onHide的用法及示例代码

在 uni-app 中，onHide 生命周期函数是页面隐藏时触发的函数，通常在用户离开当前页面时执行一些操作。例如，在这个生命周期函数中可以停止一些定时任务、清理页面数据等。

示例代码：


<template>
  <view>
    <text>{{ message }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      message: 'Hello, onHide!'
    }
  },
  onHide() {
    // 当页面隐藏时，修改 message 的值
    this.message = 'Page is hidden!'
  }
}
script>

在这个示例中，当用户离开当前页面时，页面会显示最初的文本“Hello, onHide!”，然后在 onHide 生命周期函数中，页面隐藏时会将文本修改为“Page is hidden!”。

通过 onHide 生命周期函数，您可以在用户离开页面时执行一些清理操作或停止页面相关的任务，以提高应用的性能和用户体验。

3.1.5 onUnload的用法及示例代码

在uni-app中，onUnload生命周期函数是页面销毁时触发的函数。当页面被关闭或者跳转到其他页面时，onUnload函数会被调用，可以在这个函数中进行一些清理工作，如清除定时器、释放资源等操作。

示例代码：


<template>
  <view>
    <text>{{ message }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      message: 'Hello, onUnload!'
    }
  },
  onUnload() {
    // 当页面销毁时，修改message的值
    this.message = 'Page is unloaded!'
  }
}
script>

在这个示例中，当页面被销毁时，页面会显示最初的文本“Hello, onUnload!”，然后在onUnload生命周期函数中，页面销毁时会将文本修改为“Page is unloaded!”。

通过onUnload生命周期函数，我们可以在页面销毁前执行一些清理操作，确保页面关闭时资源得到释放，避免内存泄漏或其他问题的发生。

3.1.6 onResize的用法及示例代码

onResize 是 Uniapp 页面生命周期中的一个钩子函数，用于监听页面尺寸变化事件。当页面尺寸发生变化时（例如横屏切换、窗口大小改变等），onResize 会被触发。

示例代码：


<template>
  <view>
    
    <text>{{ windowWidth }} x {{ windowHeight }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0,
    };
  },
  onResize(size) {
    // 页面尺寸变化时触发的回调函数
    this.windowWidth = size.windowWidth;
    this.windowHeight = size.windowHeight;
  },
  mounted() {
    // 在页面加载完成后，可以通过 uni.getSystemInfo 获取当前窗口大小
    uni.getSystemInfo({
      success: (res) => {
        this.windowWidth = res.windowWidth;
        this.windowHeight = res.windowHeight;
      },
    });
  },
};
script>
<style>
/* 样式可以根据实际需求进行自定义 */
view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
style>

在这个示例中，onResize 方法用于监听页面尺寸变化，将新的尺寸信息更新到组件的数据中，然后在模板中通过数据绑定显示当前窗口的宽度和高度。在 mounted 钩子中，使用 uni.getSystemInfo 获取页面加载完成后的窗口大小，并初始化数据。

请注意，在使用 onResize 钩子时，确保页面配置文件（如 pages.json）中已经设置了 "resize": true，以便启用页面的尺寸变化监听功能。

3.1.7 onPullDownRefresh的用法及示例代码

onPullDownRefresh 是 Uniapp 页面生命周期中的一个钩子函数，用于监听用户下拉刷新操作。当用户在页面顶部下拉时，此钩子函数会被触发，你可以在这里执行一些刷新数据的操作。

示例代码：


<template>
  <view>
    
    <text v-if="isRefreshing">正在刷新...text>
    <text v-else>下拉刷新text>
    
    <scroll-view :style="{ height: '100vh' }">
      <view v-for="(item, index) in dataList" :key="index">{{ item }}view>
    scroll-view>
  view>
template>
<script>
export default {
  data() {
    return {
      isRefreshing: false,
      dataList: [],
    };
  },
  methods: {
    // 模拟异步数据加载
    loadData() {
      setTimeout(() => {
        this.dataList = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);
        this.isRefreshing = false; // 数据加载完成后结束刷新状态
      }, 1500);
    },
    onPullDownRefresh() {
      // 用户下拉刷新时触发的回调函数
      this.isRefreshing = true; // 开始刷新状态
      this.loadData(); // 执行刷新操作
    },
  },
  mounted() {
    // 初始化页面数据
    this.loadData();
  },
};
script>
<style>
/* 样式可以根据实际需求进行自定义 */
view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}
text {
  font-size: 16px;
  margin-bottom: 10px;
}
style>

在这个示例中，通过监听 onPullDownRefresh 钩子来实现下拉刷新功能。isRefreshing 用于控制刷新状态的显示，当用户下拉刷新时，设置为 true，在数据加载完成后，再设置为 false 结束刷新状态。在 loadData 方法中，模拟了异步加载数据的过程。

请注意，若要在页面启用下拉刷新功能，需要确保页面配置文件（如 pages.json）中设置了 "enablePullDownRefresh": true。

3.1.8 onReachBottom的用法及示例代码

onReachBottom 是 Uniapp 页面生命周期中的一个钩子函数，用于监听页面滚动到底部事件。当页面滚动到底部时，此钩子函数会被触发，你可以在这里执行加载更多数据的操作。

示例代码：


<template>
  <view>
    
    <scroll-view :style="{ height: '100vh' }" @scrolltolower="loadMore">
      <view v-for="(item, index) in dataList" :key="index">{{ item }}view>
      <view v-if="isReachBottom" style="text-align: center; padding: 10px;">正在加载更多...view>
    scroll-view>
  view>
template>
<script>
export default {
  data() {
    return {
      isReachBottom: false, // 是否正在加载更多
      dataList: [], // 存放列表数据
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页数据条数
      totalPage: 5, // 总页数，假设为5页
    };
  },
  methods: {
    // 模拟异步加载更多数据
    loadMore() {
      if (this.currentPage < this.totalPage) {
        // 如果当前页数小于总页数，表示还有数据可加载
        this.isReachBottom = true; // 开始加载更多状态
        setTimeout(() => {
          // 模拟异步加载数据
          const newData = Array.from({ length: this.pageSize }, (_, index) => `Item ${this.dataList.length + index + 1}`);
          this.dataList = this.dataList.concat(newData); // 将新数据拼接到原数据列表中
          this.currentPage++; // 当前页数加一
          this.isReachBottom = false; // 加载更多完成，结束加载状态
        }, 1500);
      }
    },
  },
};
script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
scroll-view {
  height: 100vh;
  overflow-y: auto;
}
style>

在这个示例中，通过监听 scrolltolower 事件来实现页面滚动到底部时加载更多数据的功能。isReachBottom 用于控制加载更多状态的显示，当滚动到底部时设置为 true，加载完成后再设置为 false 结束加载状态。

loadMore 方法模拟了异步加载更多数据的过程，当当前页数小于总页数时，表示还有数据可加载。setTimeout 模拟了异步加载的过程，在加载完成后将新数据拼接到原数据列表中，并更新当前页数。

3.1.9 onTabItemTap的用法及示例代码

在 Uniapp 中，onTabItemTap 是页面生命周期中的一个钩子函数，用于监听当用户点击 Tab 时的事件。这个钩子函数主要用于处理底部 Tab 切换时的逻辑。

示例代码：


<template>
  <view>
    
    <text>这是一个 Uniapp 页面text>
  view>
template>
<script>
export default {
  onTabItemTap(item) {
    // 当用户点击底部 Tab 时触发的回调函数
    console.log('点击了底部 Tab:', item.index, item.pagePath, item.text);
    // 可以在这里添加相应的逻辑处理
  },
};
script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
text {
  font-size: 16px;
}
style>

在示例代码中，当用户点击底部 Tab 时，onTabItemTap 方法会被触发。它接收一个参数 item，包含了关于被点击的 Tab 的信息，如 index（Tab 的索引）、pagePath（页面路径）和 text（Tab 的文本内容）等。你可以根据这些信息执行相应的逻辑操作。

通过这个钩子函数，你可以实现在用户点击底部 Tab 时切换页面内容、执行特定操作等功能。

3.1.10 onShareAppMessage的用法及示例代码

在 Uniapp 中，onShareAppMessage 是页面生命周期中的一个钩子函数，用于自定义页面转发分享的内容。

示例代码：


<template>
  <view>
    
    <text>这是一个 Uniapp 页面text>
  view>
template>
<script>
export default {
  onShareAppMessage() {
    // 返回自定义分享内容
    return {
      title: '分享标题',
      path: '/pages/index', // 分享的页面路径
      imageUrl: '/static/share.jpg', // 分享的封面图片
      success() {
        // 分享成功的回调函数
        console.log('分享成功');
      },
      fail() {
        // 分享失败的回调函数
        console.error('分享失败');
      }
    };
  },
};
script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
text {
  font-size: 16px;
}
style>

在示例代码中，通过定义 onShareAppMessage 方法来自定义页面的转发分享内容。在该方法中，我们返回一个对象，包含了分享的标题 title、分享的页面路径 path、分享的封面图片 imageUrl 等信息。你可以根据实际需求自行设置分享内容。

在 onShareAppMessage 方法中，还可以处理分享成功和分享失败的回调函数。当用户成功分享时，将会执行 success 函数，你可以在这里添加相应的逻辑。当分享失败时，将会执行 fail 函数，你也可以在这里处理相应的逻辑。

通过这个钩子函数，你可以实现自定义页面转发分享的功能，使用户能够分享页面到社交平台或好友。

3.1.11 onPageScroll的用法及示例代码

在 Uniapp 中，onPageScroll 是页面生命周期中的一个钩子函数，用于监听页面滚动事件。当页面滚动时，此钩子函数会被触发，你可以在这里执行一些响应滚动的操作。

示例代码：


<template>
  <view>
    
    <text>{{ scrollPosition }}text>
  view>
template>
<script>
export default {
  data() {
    return {
      scrollPosition: 0, // 存储页面滚动位置
    };
  },
  onPageScroll(e) {
    // 当页面滚动时触发的回调函数
    this.scrollPosition = e.scrollTop; // 更新滚动位置数据
    // 在这里可以执行一些响应滚动的操作
  },
};
script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
text {
  font-size: 16px;
}
style>

在示例代码中，通过监听 onPageScroll 钩子函数，当页面滚动时，onPageScroll 方法会被触发。它接收一个参数 e，其中包含了页面滚动的信息，如 scrollTop 表示页面滚动的位置。

在这个例子中，我们使用 scrollPosition 数据来存储页面的滚动位置，并在页面中展示出来。你可以根据实际需求，在 onPageScroll 方法中执行一些响应滚动的操作，比如改变页面样式、加载更多数据等。

通过 onPageScroll 钩子函数，你可以方便地获取页面滚动信息，从而实现一些与滚动相关的交互效果。

3.1.12 onNavigationBarButtonTap的用法及示例代码

在 UniApp 中，onNavigationBarButtonTap 是页面生命周期函数之一，用于监听导航栏按钮的点击事件。当用户点击导航栏的按钮时，该函数会被调用。

示例代码：


<template>
  <view>
    <view>这是一个示例页面view>
  view>
template>
<script>
export default {
  // 页面加载完成时执行
  onLoad() {
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '示例页面'
    });
  },
  methods: {
    // 导航栏按钮点击事件处理函数
    onNavigationBarButtonTap() {
      // 处理导航栏按钮点击事件的逻辑
      console.log('导航栏按钮被点击了');
    }
  }
};
script>

在上面的示例中，我们创建了一个包含一个视图的示例页面。在页面加载完成时，我们使用 uni.setNavigationBarTitle 来设置导航栏的标题为 "示例页面"。然后，我们在 methods 中定义了一个 onNavigationBarButtonTap 函数，用于处理导航栏按钮的点击事件。当用户点击导航栏按钮时，控制台会输出 "导航栏按钮被点击了"。

要注意的是，为了使 onNavigationBarButtonTap 正常工作，需要在页面配置（