用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 資訊/觀點 查看內容

小程序中設置緩存過期

Rolan 2020-1-15 00:23

需求是兩張圖片在這個時間段內交替顯示,當天只彈一次圖片。 后端返回的數據格式: { "start": "2019/10/08 00:00:00", "end": "2019/10/30 23:59:59", "ads": } 復制代碼小程序中緩存沒有過期時間,也就是說存儲進 ...

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

后端返回的數據格式:

{
    "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交流


鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 天天天天天 來自: 掘金
便民服務

400-8826-226

電話服務熱線時間:9:00 - 21:00

關注我們

微信公眾號

梦幻单人赚钱方法