需求是两张图片在这个时间段内交替显示,当天只弹一次图片。
后端返回的数据格式:
{ "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" } ] }
小程序中缓存没有过期时间,也就是说存储进去的缓存要自己手动清除,那么如何保证两张图片能够交替显示呢?
需求分析
- 一天只弹一次广告
- 图片轮流显示
- 只在时间范围内显示
这里有个关键是,如何知道时间有没有到第二天?
思路
需要用到两个缓存:
- showAdvert:用于检测弹窗时间是否在有效期内
- 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 + `"htmlcode">onShow(){ const showAdvert = wx.getStorageSync('showAdvert') this.setData!({showAdvert}) }总结
这里最大的问题是如何判断当前的时间有没有过24点,自己一直没有想到比较好的解决方法,限于自己的水平,没有更好的方案,这里我只是记录下实现的过程,不喜勿喷,如果有更好的方案,欢迎指点。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]