小程序中設(shè)置緩存過期的實(shí)現(xiàn)方法
需求是兩張圖片在這個(gè)時(shí)間段內(nèi)交替顯示，當(dāng)天只彈一次圖片。
后端返回的數(shù)據(jù)格式：
{
"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"
}
]
}
小程序中緩存沒有過期時(shí)間，也就是說存儲(chǔ)進(jìn)去的緩存要自己手動(dòng)清除，那么如何保證兩張圖片能夠交替顯示呢？
需求分析
- 一天只彈一次廣告
- 圖片輪流顯示
- 只在時(shí)間范圍內(nèi)顯示
這里有個(gè)關(guān)鍵是，如何知道時(shí)間有沒有到第二天？
思路
需要用到兩個(gè)緩存：
- showAdvert：用于檢測(cè)彈窗時(shí)間是否在有效期內(nèi)
- showAdvert${currentDay}：用于檢測(cè)當(dāng)天是否彈過彈窗
為什么要用到兩個(gè)？
因?yàn)檫@里有兩個(gè)狀態(tài)檢測(cè)：一個(gè)是否在有效期內(nèi)，一個(gè)是當(dāng)天是否彈過彈窗。
如何判斷時(shí)間有沒有到第二天？
將所有天數(shù)的時(shí)間戳加上一天保存起來（ps：這個(gè)方法很蠢）。然后每次進(jìn)入小程序都獲取下當(dāng)前的時(shí)間，對(duì)比下當(dāng)天的時(shí)間是否大于保存的時(shí)間戳。如果超過就說明已經(jīng)到了第二天。
為什么要加上一天？
因?yàn)楹蠖朔档拈_始時(shí)間是當(dāng)天的凌晨，而真正要過完這一天是24點(diǎn)之后。一天的毫秒數(shù)：24 * 60 * 60 * 1000。
代碼實(shí)現(xiàn)
變量的聲明
聲明需要使用的時(shí)間戳
const startTempStamp = new Date(item.start).getTime()
const endTempStamp = new Date(item.end).getTime()
const oneDayTempStamp = 24 * 60 * 60 * 1000 // 一天的時(shí)間戳
const now = (new Date('2019/09/28 00:00:01')).getTime()
聲明需要一共多少天，以及當(dāng)天是第幾天；這里使用Math.ceil()向上取整
const allDay = Math.ceil((endTempStamp - startTempStamp) / oneDayTempStamp) const currentDay = Math.ceil((now - startTempStamp) / oneDayTempStamp)
判斷當(dāng)前時(shí)間是否在時(shí)間有效期內(nèi)內(nèi)，如果在時(shí)間有效期內(nèi)，就彈彈窗，如果不在就不彈
if (now > startTempStamp && now < endTempStamp) {
... //下面彈窗邏輯的實(shí)現(xiàn)
}else {
this.setData!({showAdvert: false})
wx.setStorageSync('showAdvert', false)
}
接下來開始寫彈出彈窗的邏輯。
彈窗邏輯的實(shí)現(xiàn)
首先判斷當(dāng)天的時(shí)間戳是否大于前一天的時(shí)間戳，如果大于就說明到第二天了，如果小于說明今天還沒有過去。
然后清除前一天的緩存
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
}
檢查當(dāng)天廣告是否彈出過
const advert = wx.getStorageSync(`showAdvert${table[currentDay - 1]}`) || false
if (!advert) {
this.setData!({showAdvert: true})
wx.setStorageSync('showAdvert', true)
}
彈出廣告，并設(shè)置緩存
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)
})
一進(jìn)入頁面讀下本地緩存，是否要彈出彈窗。
onShow(){
const showAdvert = wx.getStorageSync('showAdvert')
this.setData!({showAdvert})
}
總結(jié)
這里最大的問題是如何判斷當(dāng)前的時(shí)間有沒有過24點(diǎn)，自己一直沒有想到比較好的解決方法，限于自己的水平，沒有更好的方案，這里我只是記錄下實(shí)現(xiàn)的過程，不喜勿噴，如果有更好的方案，歡迎指點(diǎn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多張圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
IE事件對(duì)象（The Internet Explorer Event Object）
不同于DOM事件對(duì)象，基于Event Handler授權(quán)這種方式，IE事件對(duì)象可以用不同的方式進(jìn)行訪問。當(dāng)一個(gè)事件Handler通過DOM 0 級(jí)的方式被授權(quán)，則這個(gè)事件對(duì)象將作為window對(duì)象的屬性而存在2012-06-06
javascript簡(jiǎn)單實(shí)現(xiàn)命名空間效果
這篇文章主要介紹了javascript簡(jiǎn)單的實(shí)現(xiàn)命名空間效果的方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
一起來學(xué)習(xí)JavaScript的BOM操作
這篇文章主要為大家詳細(xì)介紹了JavaScript BOM操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
JS 日期驗(yàn)證正則附asp日期格式化函數(shù)
JS 日期驗(yàn)證正則 asp日期格式化函數(shù)，大家以后的日期就是能通過驗(yàn)證的了。2009-09-09
這篇文章主要介紹了ES6中Math對(duì)象新增的方法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Math對(duì)象的各種常用數(shù)學(xué)函數(shù)與新增方法相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
我最開始寫過一個(gè)富交互的頁面，其中的JavaScript代碼包含了很多html標(biāo)簽2012-09-09
微信小程序?qū)崿F(xiàn)全局狀態(tài)管理的方法整理
已知微信小程序中如果要做到全局狀態(tài)共享，常用的有四種方式，分別是globalData、本地緩存、mobx-miniprogram和westore，本文將帶大家看看mobx-miniprogram是如何實(shí)現(xiàn)的小程序的全局狀態(tài)管理，需要的可以收藏一下2023-06-06
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法,涉及javascript操作圖片與數(shù)組的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
日常我們?cè)陂_發(fā)小程序的時(shí)候，總是希望把數(shù)據(jù)提交回?cái)?shù)據(jù)庫進(jìn)行存儲(chǔ)，那在小程序中該如何訪問數(shù)據(jù)庫呢？本篇我們就介紹一下具體的思路2022-08-08