小程序中设置缓存过期的实现方法
前端  /  管理员 发布于 4年前   317
需求是两张图片在这个时间段内交替显示,当天只弹一次图片。 后端返回的数据格式: 小程序中缓存没有过期时间,也就是说存储进去的缓存要自己手动清除,那么如何保证两张图片能够交替显示呢? 需求分析 这里有个关键是,如何知道时间有没有到第二天? 思路 需要用到两个缓存: 为什么要用到两个? 因为这里有两个状态检测:一个是否在有效期内,一个是当天是否弹过弹窗。 如何判断时间有没有到第二天? 将所有天数的时间戳加上一天保存起来(ps:这个方法很蠢)。然后每次进入小程序都获取下当前的时间,对比下当天的时间是否大于保存的时间戳。如果超过就说明已经到了第二天。 为什么要加上一天? 因为后端返的开始时间是当天的凌晨,而真正要过完这一天是24点之后。一天的毫秒数:24 * 60 * 60 * 1000。 代码实现 变量的声明 声明需要使用的时间戳 声明需要一共多少天,以及当天是第几天;这里使用Math.ceil()向上取整 判断当前时间是否在时间有效期内内,如果在时间有效期内,就弹弹窗,如果不在就不弹 接下来开始写弹出弹窗的逻辑。 弹窗逻辑的实现 首先判断当天的时间戳是否大于前一天的时间戳,如果大于就说明到第二天了,如果小于说明今天还没有过去。 然后清除前一天的缓存 图片交替显示 检查当天广告是否弹出过 弹出广告,并设置缓存 一进入页面读下本地缓存,是否要弹出弹窗。 总结 这里最大的问题是如何判断当前的时间有没有过24点,自己一直没有想到比较好的解决方法,限于自己的水平,没有更好的方案,这里我只是记录下实现的过程,不喜勿喷,如果有更好的方案,欢迎指点。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。{ "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" } ]}
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()
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 = 0if (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})}
您可能感兴趣的文章:
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号