uniapp项目如何监听页面显示和页面隐藏

在uni-app项目中，监听页面的显示和隐藏事件主要通过`onShow`和` onHide`生命周期钩子函数来实现。这两个函数分别会在页面加载显示和关闭隐藏时被调用。

以下是具体的步骤：

1. **在Page组件中添加生命周期钩子**：
在你的Page文件中（如pages/index/index.vue），在`data`选项内定义一个变量来存储当前状态，然后在`created`、`mounted`或你需要监控的状态改变时添加这两个生命周期方法：

<template>
  <!-- ... -->
</template>

<script>
export default {
  data() {
    return {
      isShowing: false, // 标记页面是否显示
    };
  },
  created() {
    this.handlePageShowHide();
  },
  mounted() {
    // 如果你想在组件挂载后立即开始监听
    this.handlePageShowHide();
  },
  methods: {
    handlePageShowHide() {
      uni.onShow(() => {
        this.isShowing = true;
        console.log('页面已显示');
      });
      uni.onHide(() => {
        this.isShowing = false;
        console.log('页面已隐藏');
      });
    }
  },
  onUnload() { // 页面卸载前调用，如果需要清理监听
      uni.offShow(this.handlePageShowHide);
      uni.offHide(this.handlePageShowHide);
    }
}
</script>

2. **移除监听（可选）**：
当不再需要监听时，在`onUnload`生命周期钩子中移除监听，以防止内存泄漏：

   onUnload() {
     uni.offShow(this.handlePageShowHide); // 移除显示监听
     uni.offHide(this.handlePageShowHide); // 移除隐藏监听
   }