资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

小程序中怎么设置缓存过期-创新互联

这篇文章将为大家详细讲解有关小程序中怎么设置缓存过期,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

站在用户的角度思考问题,与客户深入沟通,找到黄骅网站设计与黄骅网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖黄骅地区。

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

后端返回的数据格式:

{  "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. 一天只弹一次广告图片轮流显示只在时间范围内显示

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

思路

需要用到两个缓存:

  1. 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 = 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]}`) || falseif (!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})}

关于小程序中怎么设置缓存过期就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网页题目:小程序中怎么设置缓存过期-创新互联
分享地址:http://cdkjz.cn/article/ghdgs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220