UniApp 小程序嵌套 H5 页面显示隐藏监听实践

UniApp 小程序嵌套 H5 页面显示隐藏监听实践

一、背景介绍

在小程序嵌套 H5 页面的场景中，经常需要监听页面的显示和隐藏状态，以便于处理一些特定的业务逻辑，如暂停/继续定时器、暂停/继续视频播放等。

二、实现方案

1. 页面可见性 API

首先定义页面可见性属性：

let hiddenProperty = ('hidden' in document) ? 'hidden'
      : ('webkitHidden' in document) ? 'webkitHidden'
        : ('mozHidden' in document) ? 'mozHidden' : null;

2. 监听页面状态变化

methods: {
  initVisibilityListener() {
    if (hiddenProperty) {
      let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
      document.addEventListener(visibilityChangeEvent, () => {
        this.pageVisibility();
      });
    }
  },
  
  pageVisibility() {
    if (document[hiddenProperty]) {
      // 页面隐藏时的处理
      this.handlePageHidden();
    } else {
      // 页面显示时的处理
      this.handlePageVisible();
    }
  },
  
  handlePageHidden() {
    // 清理定时器等操作
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
    // 其他需要暂停的操作
  },
  
  handlePageVisible() {
    // 重新初始化数据
    this.initData();
    // 其他需要恢复的操作
  }
}

3. 生命周期中注册监听

mounted() {
  this.initVisibilityListener();
},

beforeDestroy() {
  // 清理监听器
  if (hiddenProperty) {
    let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    document.removeEventListener(visibilityChangeEvent, this.pageVisibility);
  }
}

三、应用场景

定时器控制

pageVisibility() {
  if (document[hiddenProperty]) {
    // 页面隐藏，清除定时器
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  } else {
    // 页面显示，重新获取数据
    this.getData();
  }
}

视频播放控制

pageVisibility() {
  if (document[hiddenProperty]) {
    // 页面隐藏，暂停视频
    this.$refs.video.pause();
  } else {
    // 页面显示，继续播放
    this.$refs.video.play();
  }
}

四、总结

通过合理使用页面可见性 API，我们可以：

1. 优化用户体验
2. 提高应用性能
3. 避免不必要的资源消耗
4. 更好地管理页面状态