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

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

[IT廉连看]  

目标：

• 了解APP.vue这个页面

• 了解所有的应用生命周期

• 熟练编写常用的应用生命周期

1、App.vue：

在UniApp中，App.vue是应用的根组件。它类似于其他前端框架中的根组件，如Vue.js中的App.vue或React中的App.js。

App.vue通常包含应用级别的配置、样式和逻辑，以及应用的全局导航栏、底部栏等元素。它负责整个应用的初始化、路由管理以及全局状态的管理。在App.vue中，你可以定义应用的全局生命周期函数、全局样式，以及一些全局配置。

在App.vue中，我们可以通过生命周期函数来管理应用的初始化、前后台切换等事件。同时，你可以在这里定义全局的样式、全局的组件（如导航栏、底部栏）以及其他一些全局的配置。

总之，App.vue是UniApp应用的根组件，负责管理整个应用的初始化和全局配置。

2、应用生命周期

uni-app 支持如下应用生命周期函数：

函数名	说明	平台兼容
onLaunch	当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发	app-uvue 不支持
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

3、应用生命周期函数的使用及示例代码：

3.1 onLaunch的用法及示例代码

在UniApp中，onLaunch是全局应用生命周期函数之一，用于应用初始化完成时触发。它只会在应用初始化时执行一次。你可以在App.vue文件中的onLaunch函数中执行应用初始化的相关操作。

示例代码：

// App.vue
​
<script>
export default {
  // 应用初始化完成时触发的生命周期函数
  onLaunch(options) {
    console.log('应用初始化完成', options);
​
    // 在这里可以执行一些应用初始化的操作，如获取用户信息、初始化全局变量等
    // 示例：获取设备信息
    uni.getSystemInfo({
      success: function(res) {
        console.log('设备信息', res);
      }
    });
  },
​
  // 应用进入前台时触发的生命周期函数
  onShow(options) {
    console.log('应用进入前台', options);
  },
​
  // 应用进入后台时触发的生命周期函数
  onHide() {
    console.log('应用进入后台');
  }
}
</script>

在这个示例中，当应用初始化完成时，onLaunch生命周期函数会被触发。在这个函数中，我们可以执行一些应用初始化的操作，比如获取设备信息、初始化全局变量等。在示例中，我们使用uni.getSystemInfo方法获取设备信息，并在成功回调中打印出来。

这样，你可以在onLaunch生命周期函数中进行应用初始化的相关操作，确保应用在初始化阶段完成所需的配置和准备工作。

3.2 onShow的用法及示例代码

在UniApp中，onShow是全局应用生命周期函数之一，用于应用进入前台时触发。它会在应用启动、或从后台进入前台时执行。你可以在App.vue文件中的onShow函数中执行一些在应用进入前台时需要处理的操作。

示例代码：

<script>
export default {
  // 应用初始化完成时触发的生命周期函数
  onLaunch(options) {
    console.log('应用初始化完成', options);
​
    // 在这里可以执行一些应用初始化的操作
  },
​
  // 应用进入前台时触发的生命周期函数
  onShow(options) {
    console.log('应用进入前台', options);
​
    // 在这里可以执行一些在应用进入前台时需要处理的操作
    // 示例：检查用户登录状态
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      console.log('用户已登录');
    } else {
      console.log('用户未登录');
    }
  },
​
  // 应用进入后台时触发的生命周期函数
  onHide() {
    console.log('应用进入后台');
  }
}
</script>

在这个示例中，当应用进入前台时，onShow生命周期函数会被触发。在这个函数中，我们可以执行一些在应用进入前台时需要处理的操作。在示例中，我们通过uni.getStorageSync方法获取本地缓存中的用户信息，判断用户是否已登录，并在控制台输出相应的信息。

这样，你可以在onShow生命周期函数中处理一些与应用前台展示相关的逻辑，比如检查用户登录状态、刷新页面数据等。

3.3 onHide的用法及示例代码

在UniApp中，onHide是全局应用生命周期函数之一，用于应用进入后台时触发。它会在应用从前台进入后台时执行。你可以在App.vue文件中的onHide函数中执行一些在应用进入后台时需要处理的操作。

示例代码：

<script>
export default {
  // 应用初始化完成时触发的生命周期函数
  onLaunch(options) {
    console.log('应用初始化完成', options);
​
    // 在这里可以执行一些应用初始化的操作
  },
​
  // 应用进入前台时触发的生命周期函数
  onShow(options) {
    console.log('应用进入前台', options);
​
    // 在这里可以执行一些在应用进入前台时需要处理的操作
  },
​
  // 应用进入后台时触发的生命周期函数
  onHide() {
    console.log('应用进入后台');
​
    // 在这里可以执行一些在应用进入后台时需要处理的操作
    // 示例：保存数据到本地缓存
    const dataToSave = { key: 'value' };
    uni.setStorageSync('cachedData', dataToSave);
  }
}
</script>

在这个示例中，当应用进入后台时，onHide生命周期函数会被触发。在这个函数中，我们可以执行一些在应用进入后台时需要处理的操作。在示例中，我们通过uni.setStorageSync方法将一些数据保存到本地缓存，以便在应用下次启动时可以使用。

这样，你可以在onHide生命周期函数中处理一些与应用进入后台相关的逻辑，比如保存数据、清理资源等。

3.4 onError的用法及示例代码

在UniApp中，onError是全局应用生命周期函数之一，用于监听应用运行时的错误信息。当应用发生未捕获的错误时，onError函数会被调用，你可以在这个函数中处理错误信息或进行相应的记录。

示例代码：

<script>
export default {
  // 应用初始化完成时触发的生命周期函数
  onLaunch(options) {
    console.log('应用初始化完成', options);
​
    // 在这里可以执行一些应用初始化的操作
  },
​
  // 应用进入前台时触发的生命周期函数
  onShow(options) {
    console.log('应用进入前台', options);
​
    // 在这里可以执行一些在应用进入前台时需要处理的操作
  },
​
  // 应用进入后台时触发的生命周期函数
  onHide() {
    console.log('应用进入后台');
​
    // 在这里可以执行一些在应用进入后台时需要处理的操作
  },
​
  // 监听应用运行时的错误信息
  onError(error) {
    console.error('应用发生错误', error);
​
    // 在这里可以处理错误信息，如向服务器发送错误日志
    // 示例：上报错误信息到服务器
    uni.request({
      url: 'https://example.com/log/error',
      method: 'POST',
      data: {
        error: error.message,
        stack: error.stack
      },
      success: function(res) {
        console.log('错误日志上报成功', res);
      },
      fail: function(err) {
        console.error('错误日志上报失败', err);
      }
    });
  }
}

在这个示例中，当应用发生未捕获的错误时，onError生命周期函数会被调用，并传入错误信息作为参数。在这个函数中，我们可以处理错误信息，比如向服务器发送错误日志。在示例中，我们通过uni.request方法向服务器上报错误信息，并在控制台打印出上报结果。

这样，咱们可以在onError生命周期函数中处理应用运行时的错误信息，以便及时发现和解决问题。

3.5 onUniNViewMessage的用法及示例代码

在UniApp中，onUniNViewMessage是用于接收来自nvue页面或uni.createInnerAudioContext等组件发出的消息的生命周期函数。通过onUniNViewMessage，可以在页面之间传递消息或者与原生组件进行通信。

示例代码：

<script>
export default {
  // 应用初始化完成时触发的生命周期函数
  onLaunch(options) {
    console.log('应用初始化完成', options);
​
    // 在这里可以执行一些应用初始化的操作
  },
​
  // 应用进入前台时触发的生命周期函数
  onShow(options) {
    console.log('应用进入前台', options);
​
    // 在这里可以执行一些在应用进入前台时需要处理的操作
  },
​
  // 应用进入后台时触发的生命周期函数
  onHide() {
    console.log('应用进入后台');
​
    // 在这里可以执行一些在应用进入后台时需要处理的操作
  },
​
  // 监听来自nvue页面或组件的消息
  onUniNViewMessage(message) {
    console.log('收到来自nvue页面或组件的消息', message);
​
    // 在这里可以根据收到的消息进行相应的处理
    // 示例：根据消息内容更新页面数据
    if (message.type === 'updateData') {
      this.updateData(message.data);
    }
  },
​
  methods: {
    // 更新页面数据的方法
    updateData(data) {
      console.log('更新页面数据', data);
      // 在这里可以更新页面的数据或进行其他操作
    }
  }
}
</script>

在这个示例中，当收到来自nvue页面或组件的消息时，onUniNViewMessage生命周期函数会被调用，并传入消息对象作为参数。在这个函数中，我们可以根据消息的内容进行相应的处理，例如更新页面数据。

这样，可以通过onUniNViewMessage生命周期函数实现不同页面之间的消息传递和通信。

3.6 onLastPageBackPress的用法及示例代码

onLastPageBackPress不是 UniApp 的标准生命周期函数。然而，UniApp 提供了一种机制，允许监听页面返回事件，可以在页面返回时触发相应的逻辑。

可以通过监听beforeEnter生命周期函数来实现类似于onLastPageBackPress的功能。在这个生命周期函数中，你可以判断当前页面是否是栈中的最后一个页面，如果是则执行相应的逻辑。

示例代码：

// 在需要监听返回事件的页面中，例如 A 页面
​
<script>
export default {
  beforeEnter(to, from, next) {
    // 判断当前页面是否是栈中的最后一个页面
    if (this.$route.path === '/') {
      // 如果是最后一个页面，执行相应的逻辑
      console.log('这是栈中的最后一个页面，可以执行返回时的逻辑');
      // 这里可以执行返回逻辑，比如弹出确认框等
    }
    next();
  }
}
</script>

在这个示例中，我们在页面的beforeEnter生命周期函数中监听页面的返回事件。通过判断当前页面是否是栈中的最后一个页面，来确定是否执行返回时的逻辑。

可以根据实际需求在beforeEnter生命周期函数中执行相应的逻辑，比如弹出确认框、执行数据保存操作等。这样就可以实现在 UniApp 中类似于onLastPageBackPress的功能。

3.7 onExit的用法及示例代码

UniApp 中并没有名为 onExit 的生命周期函数。但是，你可以通过监听全局的 beforeUnload 事件来实现类似于 onExit 的功能，该事件在用户关闭页面或离开页面时触发。

示例代码：

<template>
  <view>
    <!-- 应用内容 -->
    <router-view />
  </view>
</template>
​
<script>
export default {
  beforeMount() {
    // 在组件挂载前监听 beforeUnload 事件
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    // 在组件销毁前移除 beforeUnload 事件监听
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  methods: {
    handleBeforeUnload(event) {
      // 处理应用退出逻辑
      console.log('应用即将退出');
      // 可以在这里进行一些清理工作或者向服务器发送退出事件
      // 如果需要阻止默认的退出行为，可以调用 event.preventDefault()
    }
  }
};
</script>

在这个示例中，我们在 App.vue 中监听了 beforeUnload 事件，通过 window.addEventListener 和 window.removeEventListener 方法来添加和移除事件监听器。当用户关闭页面或者离开页面时，会触发 beforeUnload 事件，从而执行 handleBeforeUnload 方法中的逻辑。在 handleBeforeUnload 方法中，你可以进行一些清理工作或者向服务器发送退出事件。

需要注意的是，在 handleBeforeUnload 方法中，如果需要阻止默认的退出行为，可以调用 event.preventDefault() 方法。但是需要注意，并非所有浏览器都支持阻止用户退出操作，具体行为可能因浏览器而异。

[IT廉连看]  

小结：

• APP.vue 是负责哪些配置

• 应用生命周期函数有几个，常用的有哪些？

• 编写应用生命周期函数代码并查看效果