小程序中設置緩存過時

需求是兩張圖片在這個時間段內交替顯示，當天只彈一次圖片。

後端返回的數據格式：

{
    "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"
        }
    ]
}

小程序中緩存沒有過時時間，也就是說存儲進去的緩存要本身手動清除，那麼如何保證兩張圖片可以交替顯示呢？

需求分析

1. 一天只彈一次廣告
2. 圖片輪流顯示
3. 只在時間範圍內顯示

這裏有個關鍵是，如何知道時間有沒有到次日？

思路

須要用到兩個緩存：

1. showAdvert：用於檢測彈窗時間是否在有效期內
2. 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)
})

一進入頁面讀下本地緩存，是否要彈出彈窗。

onShow(){
    const showAdvert = wx.getStorageSync('showAdvert')
    this.setData!({showAdvert})
}

總結

這裏最大的問題是如何判斷當前的時間有沒有過24點，本身一直沒有想到比較好的解決方法，限於本身的水平，沒有更好的方案，這裏我只是記錄下實現的過程，不喜勿噴，若是有更好的方案，歡迎指點。

另外可添加微信ttxbg180218交流