uniapp手机息屏倒计时暂停如何解决

在uniapp开发中，当手机息屏时，倒计时功能会被暂停，导致计时不准确。请问如何实现在手机息屏或锁屏状态下，仍能保持倒计时的正常运行？需要兼容Android和iOS平台，是否有可行的解决方案或API可以调用？

2 回复

在uniapp中，息屏时倒计时暂停，可通过监听页面生命周期解决。在onHide中保存倒计时剩余时间，在onShow中恢复倒计时。或使用uni.onAppHide和uni.onAppShow全局监听。


在 UniApp 中，当手机息屏或应用进入后台时，倒计时可能会被系统暂停，导致计时不准确。这是因为系统为了省电会限制后台 JavaScript 执行。以下是解决方案：

1. 使用 plus 原生 API 监听应用状态变化

通过监听应用进入前台和后台的事件，手动暂停和恢复倒计时。

export default {
  data() {
    return {
      countdown: 60, // 倒计时秒数
      timer: null,
      isPaused: false
    };
  },
  onLoad() {
    this.startCountdown();
    this.setupAppStateListener();
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (!this.isPaused) {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(this.timer);
            // 倒计时结束处理
          }
        }
      }, 1000);
    },
    setupAppStateListener() {
      // 监听应用进入后台
      document.addEventListener('pause', () => {
        this.isPaused = true;
      });
      
      // 监听应用恢复到前台
      document.addEventListener('resume', () => {
        this.isPaused = false;
      });
    }
  },
  onUnload() {
    clearInterval(this.timer);
    // 移除事件监听（可选，UniApp 通常自动处理）
  }
};

2. 使用 uni.onAppHide 和 uni.onAppShow（HBuilderX 2.8.0+ 支持）

这是 UniApp 官方提供的应用状态监听 API，更简洁：

export default {
  data() {
    return {
      countdown: 60,
      timer: null,
      isPaused: false
    };
  },
  onLoad() {
    this.startCountdown();
    this.setupUniAppStateListener();
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (!this.isPaused) {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(this.timer);
            // 倒计时结束处理
          }
        }
      }, 1000);
    },
    setupUniAppStateListener() {
      // 应用进入后台
      uni.onAppHide(() => {
        this.isPaused = true;
      });
      
      // 应用切换到前台
      uni.onAppShow(() => {
        this.isPaused = false;
      });
    }
  },
  onUnload() {
    clearInterval(this.timer);
  }
};

3. 使用系统时间计算（更精确的方案）

通过记录开始时间和当前时间计算剩余时间，避免受后台暂停影响：

export default {
  data() {
    return {
      countdown: 60,
      endTime: 0, // 倒计时结束的时间戳
      timer: null
    };
  },
  onLoad() {
    this.startCountdownBySystemTime();
  },
  methods: {
    startCountdownBySystemTime() {
      this.endTime = Date.now() + this.countdown * 1000;
      this.timer = setInterval(() => {
        const now = Date.now();
        const remaining = Math.max(0, Math.ceil((this.endTime - now) / 1000));
        this.countdown = remaining;
        
        if (remaining <= 0) {
          clearInterval(this.timer);
          // 倒计时结束处理
        }
      }, 1000);
    }
  },
  onUnload() {
    clearInterval(this.timer);
  }
};

注意事项：

  • 兼容性：plus API 和 uni.onAppHide/Show 需在 App 端使用，H5 和小程序环境可能不支持。
  • 测试：在真机上测试，模拟器可能无法完全模拟息屏行为。
  • 性能：方案 3 最准确，但需考虑频繁计算对性能的影响。

选择方案 2 或 3 通常效果更好，能有效解决息屏导致的倒计时暂停问题。

回到顶部