uniapp项目中如何全局新增 页面显示以及页面隐藏 触发时间

在uni-app项目中，你可以利用Vue的生命周期钩子或者Vuex来实现在全局范围内监控页面的显示和隐藏。以下是两种常见的做法：

**1. 使用Vue生命周期钩子（如created和mounted）**

// 在每个页面的main.js或者App.vue文件中
export default {
  created() {
    document.addEventListener('pageshow', () => {
      console.log('页面显示');
      // 在这里添加你需要的全局显示操作
    });
    
    document.addEventListener('pagehide', () => {
      console.log('页面隐藏');
      // 在这里添加你需要的全局隐藏操作
    });
  },
  beforeDestroy() {
    document.removeEventListener('pageshow', handlePageShow);
    document.removeEventListener('pagehide', handlePageHide);
  },
  
  methods: {
    handlePageShow() { /* 具体操作 */ },
    handlePageHide() { /* 具体操作 */ }
  }
}

在这里，`pageshow`事件会在页面首次进入时触发，而`pagehide`事件会在页面离开时触发。

**2. 使用Vuex**

创建一个store，在其中定义状态并监听`navigationChange`（页面切换）事件，然后在actions中处理显示和隐藏逻辑：

// store/modules/pageStatus.js
import Vue from 'vue';

const state = {
  isShowing: false,
};

const mutations = {
  setIsShowing(state, payload) {
    state.isShowing = payload;
  },
};

const actions = {
  setShow(context) {
    context.commit('setIsShowing', true);
    // 页面显示时的操作
  },
  hideShow(context) {
    context.commit('setIsShowing', false);
    // 页面隐藏时的操作
  },
};

export default {
  state,
  mutations,
  actions,
};

然后在组件中注入store并监听状态变化：

// 组件内
import { mapActions } from 'vuex';
import { pageStatus } from '@/store/modules/pageStatus';

export default {
  computed: {
    ...mapState(pageStatus, ['isShowing']),
  },
  methods: {
    ...mapActions(['show', 'hide']),
  },
  mounted() {
    if (this.isShowing) {
      this.show();
    }
  },
  beforeDestroy() {
    this.hide();
  },
};

这样，每次页面切换时，都会通过Vuex的状态管理来同步显示和隐藏操作。