小程序弹层精确控制显示时间

2023-11-04 19:12:14

小程序弹窗控制技巧

很多时候，我们需要控制小程序的弹出框在某个时间段内只显示一次。例如，当用户进入小程序时，我们可能想显示一个欢迎消息，但我们只希望在当天显示一次。或者，我们可能想显示一个促销信息，但我们只希望在用户访问某个页面时显示一次。

小程序的存储功能可以帮助我们实现弹出框的控制。我们可以将一个键值对存储在小程序的缓存中，键名可以是弹框的唯一标识，键值可以是一个时间戳，表示弹框的显示时间。

然后，当用户进入小程序时，我们可以检查缓存中是否有该键值对。如果有，我们就可以比较时间戳来判断弹框是否应该显示。如果没有，我们可以将键值对添加到缓存中，并设置一个过期时间。

例如，我们可以使用以下代码来控制弹框的显示：

// 获取当前时间戳
const now = Date.now();

// 检查缓存中是否有弹框的键值对
const key = 'welcomeMessage';
const cachedValue = wx.getStorageSync(key);

// 如果缓存中没有弹框的键值对，则显示弹框并将其添加到缓存中
if (!cachedValue) {
  wx.showModal({
    title: '欢迎来到小程序',
    content: '这是您第一次访问小程序，欢迎您！',
    success: (res) => {
      if (res.confirm) {
        wx.setStorage({
          key: key,
          data: now,
          expires: 86400, // 过期时间为一天
        });
      }
    },
  });

// 如果缓存中有弹框的键值对，则比较时间戳来判断弹框是否应该显示
} else {
  const cachedTime = cachedValue;
  const diff = now - cachedTime;

  // 如果弹框的显示时间已经过期，则显示弹框并更新缓存中的时间戳
  if (diff > 86400000) { // 过期时间为一天
    wx.showModal({
      title: '欢迎回来',
      content: '您已经很久没有访问小程序了，欢迎您回来！',
      success: (res) => {
        if (res.confirm) {
          wx.setStorage({
            key: key,
            data: now,
            expires: 86400, // 过期时间为一天
          });
        }
      },
    });
  }
}