今天就跟大家聊聊有關(guān)怎么在小程序中設(shè)置緩存過期，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，先為樂亭等服務(wù)建站，樂亭等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為樂亭企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

后端返回的數(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)清除，那么如何保證兩張圖片能夠交替顯示呢？

需求分析

1. 一天只彈一次廣告

2. 圖片輪流顯示

3. 只在時(shí)間范圍內(nèi)顯示

這里有個(gè)關(guān)鍵是，如何知道時(shí)間有沒有到第二天？

思路

需要用到兩個(gè)緩存：

1. showAdvert：用于檢測彈窗時(shí)間是否在有效期內(nèi)

2. showAdvert${currentDay}：用于檢測當(dāng)天是否彈過彈窗

為什么要用到兩個(gè)？

因?yàn)檫@里有兩個(gè)狀態(tài)檢測：一個(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})
}

看完上述內(nèi)容，你們對(duì)怎么在小程序中設(shè)置緩存過期有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章名稱：怎么在小程序中設(shè)置緩存過期-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://vcdvsql.cn/article46/cdjeeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、虛擬主機(jī)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)