当前位置：首页 > article >正文

微信小程序记录用户在图书详情页面停留时间--即阅读时间，如果超过两小时，则每小时提醒用户一次

article 2025/2/27 5:07:25

在微信小程序中记录用户在图书详情页面的停留时间，并根据条件（如超过两小时）进行提醒，可以通过以下步骤实现。以下是详细的实现方案：

1. 实现思路

记录进入页面的时间：当用户进入图书详情页面时，记录当前时间。
记录离开页面的时间：当用户离开页面时，计算停留时间。
定时提醒：如果用户停留时间超过两小时，则每小时触发一次提醒。

2. 代码实现

(1) 页面初始化：记录进入时间

在 onLoad 或 onShow 生命周期函数中记录用户进入页面的时间。

Page({
  data: {
    startTime: null, // 用户进入页面的时间
    timer: null,     // 定时器
    isReminded: false, // 是否已经提醒过
  },

  onLoad() {
    // 记录用户进入页面的时间
    this.setData({
      startTime: Date.now(), // 获取当前时间戳（毫秒）
    });
    console.log('用户进入页面时间:', this.data.startTime);

    // 启动定时器，用于检测停留时间
    this.startTimer();
  },

  startTimer() {
    const that = this;
    this.setData({
      timer: setInterval(() => {
        that.checkReadingTime();
      }, 60000), // 每分钟检查一次
    });
  },
});

(2) 检查阅读时间并提醒

在定时器中检查用户的停留时间，如果超过两小时，则每小时提醒一次。

checkReadingTime() {
  const currentTime = Date.now(); // 当前时间
  const startTime = this.data.startTime; // 用户进入页面的时间
  const elapsedTime = (currentTime - startTime) / 1000 / 60; // 停留时间（分钟）

  if (elapsedTime > 120 && !this.data.isReminded) { // 如果超过两小时且未提醒过
    this.remindUser();
    this.setData({
      isReminded: true, // 标记已提醒
    });
  } else if (elapsedTime > 120 && Math.floor(elapsedTime / 60) > 2) { // 如果超过两小时后每小时提醒
    const hoursPassed = Math.floor(elapsedTime / 60);
    if (hoursPassed % 1 === 0 && hoursPassed > 2) { // 每整小时提醒一次
      this.remindUser();
    }
  }
},

(3) 提醒用户

使用 wx.showToast 或其他方式提醒用户。

remindUser() {
  wx.showToast({
    title: '您已阅读超过两小时，请注意休息！',
    icon: 'none',
    duration: 3000,
  });
},

(4) 页面卸载：清理定时器

在用户离开页面时（如切换到其他页面或关闭小程序），清理定时器以避免内存泄漏。

onUnload() {
  clearInterval(this.data.timer); // 清除定时器
  console.log('用户离开页面，清除定时器');
},

3. 注意事项

时间精度：
- 使用 Date.now() 获取时间戳，精确到毫秒。
- 如果需要更高的精度，可以考虑使用 performance.now()，但微信小程序可能不支持。
定时器管理：
- 在 onUnload 中清除定时器，确保资源释放。
- 如果用户频繁切换页面，可能需要在 onHide 和 onShow 中暂停和恢复定时器。
用户体验：
- 提醒消息应简洁明了，避免打扰用户。
- 可以提供选项让用户关闭提醒功能。
多端适配：
- 如果小程序需要适配多个平台（如微信、支付宝等），请确保 API 兼容性。

4. 示例完整代码

以下是完整的代码示例：

Page({
  data: {
    startTime: null, // 用户进入页面的时间
    timer: null,     // 定时器
    isReminded: false, // 是否已经提醒过
  },

  onLoad() {
    this.setData({
      startTime: Date.now(), // 获取当前时间戳
    });
    console.log('用户进入页面时间:', this.data.startTime);

    this.startTimer();
  },

  startTimer() {
    const that = this;
    this.setData({
      timer: setInterval(() => {
        that.checkReadingTime();
      }, 60000), // 每分钟检查一次
    });
  },

  checkReadingTime() {
    const currentTime = Date.now(); // 当前时间
    const startTime = this.data.startTime; // 用户进入页面的时间
    const elapsedTime = (currentTime - startTime) / 1000 / 60; // 停留时间（分钟）

    if (elapsedTime > 120 && !this.data.isReminded) { // 如果超过两小时且未提醒过
      this.remindUser();
      this.setData({
        isReminded: true, // 标记已提醒
      });
    } else if (elapsedTime > 120 && Math.floor(elapsedTime / 60) > 2) { // 如果超过两小时后每小时提醒
      const hoursPassed = Math.floor(elapsedTime / 60);
      if (hoursPassed % 1 === 0 && hoursPassed > 2) { // 每整小时提醒一次
        this.remindUser();
      }
    }
  },

  remindUser() {
    wx.showToast({
      title: '您已阅读超过两小时，请注意休息！',
      icon: 'none',
      duration: 3000,
    });
  },

  onUnload() {
    clearInterval(this.data.timer); // 清除定时器
    console.log('用户离开页面，清除定时器');
  },
});