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

2023-08-03 03:56:03 163

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

后端返回的数据格式：

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

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

需求分析

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

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

思路

需要用到两个缓存：

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

为什么要用到两个？

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

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

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

为什么要加上一天？

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

代码实现

变量的声明

声明需要使用的时间戳

conststartTempStamp=newDate(item.start).getTime()
constendTempStamp=newDate(item.end).getTime()
constoneDayTempStamp=24*60*60*1000//一天的时间戳
constnow=(newDate('2019/09/2800:00:01')).getTime()

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

constallDay=Math.ceil((endTempStamp-startTempStamp)/oneDayTempStamp)
constcurrentDay=Math.ceil((now-startTempStamp)/oneDayTempStamp)

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

if(now>startTempStamp&&now
接下来开始写弹出弹窗的逻辑。
弹窗逻辑的实现


首先判断当天的时间戳是否大于前一天的时间戳，如果大于就说明到第二天了，如果小于说明今天还没有过去。
然后清除前一天的缓存
consttable=[]
for(leti=1;i<=allDay;i++){
table.push(startTempStamp+oneDayTempStamp*i)
}
if(now>table[currentDay-2]){
wx.removeStorageSync(`showAdvert${table[currentDay-2]}`)
}

图片交替显示
letn=0
if(currentDay%item.ads.length===0){
n=1
}elseif(currentDay%item.ads.length===1){
n=0
}

检查当天广告是否弹出过
constadvert=wx.getStorageSync(`showAdvert${table[currentDay-1]}`)||false
if(!advert){
this.setData!({showAdvert:true})
wx.setStorageSync('showAdvert',true)
}

弹出广告，并设置缓存
consttimeStamp=Math.floor(newDate().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(){
constshowAdvert=wx.getStorageSync('showAdvert')
this.setData!({showAdvert})
}

总结


这里最大的问题是如何判断当前的时间有没有过24点，自己一直没有想到比较好的解决方法，限于自己的水平，没有更好的方案，这里我只是记录下实现的过程，不喜勿喷，如果有更好的方案，欢迎指点。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐