当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    小程序中设置缓存过期的实现方法

    栏目:代码类 时间:2020-01-14 12:08

    需求是两张图片在这个时间段内交替显示,当天只弹一次图片。

    后端返回的数据格式:

    {
      "start": "2019/10/08 00:00:00",
      "end": "2019/10/30 23:59:59",
      "ads": [
        {
          "image": "xxxx",
          "uri": "wechat:zhizhuxy666"
        },
        {
          "image": "xxx",
          "uri": "wechat:zhizhuxy666"
        }
      ]
    }
    

    小程序中缓存没有过期时间,也就是说存储进去的缓存要自己手动清除,那么如何保证两张图片能够交替显示呢?

    需求分析

    一天只弹一次广告 图片轮流显示 只在时间范围内显示

    这里有个关键是,如何知道时间有没有到第二天?

    思路

    需要用到两个缓存:

    showAdvert:用于检测弹窗时间是否在有效期内 showAdvert${currentDay}:用于检测当天是否弹过弹窗

    为什么要用到两个?

    因为这里有两个状态检测:一个是否在有效期内,一个是当天是否弹过弹窗。

    如何判断时间有没有到第二天?

    将所有天数的时间戳加上一天保存起来(ps:这个方法很蠢)。然后每次进入小程序都获取下当前的时间,对比下当天的时间是否大于保存的时间戳。如果超过就说明已经到了第二天。

    为什么要加上一天?

    因为后端返的开始时间是当天的凌晨,而真正要过完这一天是24点之后。一天的毫秒数:24 * 60 * 60 * 1000。

    代码实现

    变量的声明

    声明需要使用的时间戳

    const startTempStamp = new Date(item.start).getTime()    
    const endTempStamp = new Date(item.end).getTime()
    const oneDayTempStamp = 24 * 60 * 60 * 1000   // 一天的时间戳
    const now = (new Date('2019/09/28 00:00:01')).getTime()
    

    声明需要一共多少天,以及当天是第几天;这里使用Math.ceil()向上取整

    const allDay = Math.ceil((endTempStamp - startTempStamp) / oneDayTempStamp)
    const currentDay = Math.ceil((now - startTempStamp) / oneDayTempStamp)
    

    判断当前时间是否在时间有效期内内,如果在时间有效期内,就弹弹窗,如果不在就不弹

    if (now > startTempStamp && now < endTempStamp) {
      ... //下面弹窗逻辑的实现
    }else {
      this.setData!({showAdvert: false})
      wx.setStorageSync('showAdvert', false) 
    }
    

    接下来开始写弹出弹窗的逻辑。

    弹窗逻辑的实现

    首先判断当天的时间戳是否大于前一天的时间戳,如果大于就说明到第二天了,如果小于说明今天还没有过去。

    然后清除前一天的缓存

    const table = []
    for (let i = 1; i <= allDay; i++) {
      table.push(startTempStamp + oneDayTempStamp * i)
    }
    if (now > table[currentDay - 2]) {
      wx.removeStorageSync(`showAdvert${table[currentDay - 2]}`)
    }
    

    图片交替显示

    let n = 0
    if (currentDay % item.ads.length === 0) {
      n = 1
    } else if (currentDay % item.ads.length === 1) {
      n = 0
    }
    

    检查当天广告是否弹出过

    const advert = wx.getStorageSync(`showAdvert${table[currentDay - 1]}`) || false    
    if (!advert) {
      this.setData!({showAdvert: true})
      wx.setStorageSync('showAdvert', true)
    }
    

    弹出广告,并设置缓存

    const timeStamp = Math.floor(new Date().getTime() / 10000).toString()
    this.setData!({
      advertLink: item.ads[n].image + `?timeStamp=${timeStamp}`,
      copyWechat: item.ads[n].uri,
    }, () => {
      wx.setStorageSync(`showAdvert${table[currentDay - 1]}`, true)
    })
    
    
    下一篇:没有了