uniapp+vue3项目中如何全局监听 页面显示以及页面隐藏

在 UniApp（原DCloud）项目中结合 Vue3 开发，如果你想全局监听页面的显示和隐藏事件，你可以使用 Vue 的生命周期钩子 `beforeRouteEnter` 和 `beforeRouteLeave`。这两个钩子分别会在路由进入和离开某个组件前触发。

以下是基本步骤：

1. **设置全局守卫（Global Guards）**：
首先，在你的 App.vue 或者 main.js 中，配置路由守卫。创建一个全局的 beforeEach 函数，用于进入和离开任何页面之前执行自定义操作。

// main.js 或者 App.vue 中
const router = new Router({
  // 其他配置...
})

router.beforeEach((to, from, next) => {
  // 在这里添加你的全局监听逻辑
  if (to.name === 'yourTargetPage') { // 替换为你要监听的页面名
    window.addEventListener('visibleChange', handleVisibleChange)
  }
  next()
})

router.afterEach((to, from) => {
  // 路由离开时移除监听
  if (from.name === 'yourTargetPage') {
    window.removeEventListener('visibleChange', handleVisibleChange)
  }
})

2. **处理显示和隐藏事件**：
创建一个函数 `handleVisibleChange` 来处理页面显示（visibleChange 事件触发）和隐藏（hiddenChange 事件触发）的逻辑。

function handleVisibleChange(isVisible) {
  if (isVisible) {
    console.log('页面已显示')
    // 在这里执行你需要在页面显示时执行的操作
  } else {
    console.log('页面已隐藏')
    // 在这里执行你需要在页面隐藏时执行的操作
  }
}

记住替换 `'yourTargetPage'` 为你想要监听的具体页面名称。这样，每当指定的页面显示或隐藏时，你就会收到通知并执行相应的回调。