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. 更好地管理页面状态