欢迎来到本网站

全国统一咨询热线:158-2196-7367

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:158-2196-7367

邮箱:amy@hanett.com

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

当前位置:明翔网络 > 行业新闻 > 小程序中设置缓存过期

小程序中设置缓存过期

文章出处:http://www.ucunicom.com/a/986.html 阅读量:32 发表时间:01-15 11:54
行业新闻

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

后端返回的数据格式:

{     "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"         }     ] } 复制代码

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

需求分析

  1. 一天只弹一次广告

  2. 图片轮流显示

  3. 只在时间范围内显示

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

思路

需要用到两个缓存:

  1. showAdvert:用于检测弹窗时间是否在有效期内

  2. 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 + `?timeStamp=${timeStamp}`,     copyWechat: item.ads[n].uri, }, () => {     wx.setStorageSync(`showAdvert${table[currentDay - 1]}`, true) }) 复制代码

一进入页面读下本地缓存,是否要弹出弹窗。

onShow(){     const showAdvert = wx.getStorageSync('showAdvert')     this.setData!({showAdvert}) } 复制代码

总结

这里最大的问题是如何判断当前的时间有没有过24点,自己一直没有想到比较好的解决方法,限于自己的水平,没有更好的方案,这里我只是记录下实现的过程,不喜勿喷,如果有更好的方案,欢迎指点。


全国咨询热线:158-2196-7367

二维码

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

cache
Processed in 0.003934 Second.