昨天在看自己写的小程序项目,无意中打开了CSDN APP,突然间觉得,我去,如果在小程序中加个“签到”功能,岂不美哉!(好吧,其实是买的书昨天没到货,然后闲着无事,就想起了大明湖畔的“签到”)
但是吧,又不想写和服务器交互的,本着“简单点”的原则,我想起了曾经的挚爱—— 本地存储 。
先说说相关注意吧:
其一就是 storage中只能存放字符串!
我去,昨晚大部分时间都是在搞这个。以前一直认为存放的是对象,兴致勃勃写完发现点击以后出现了“NAN”…
觉得 事情并没有这么简单。
仔细回去看了一下曾经Vue写过的localStorage,发现一直弄错了,应该存放字符串!
搞清楚这个以后,又有一个问题:你要“ 点击加1 ”,这里总是把数字和字符串弄反,甚至想了用数组形式存放。。。最终想到了解决办法:把存放的字符串转为数字,加1后再转为字符串存放到storage中 。
想到这我不禁喜形于色,终于可以了!
但是当我无意中狂点16下的时候,我又哭了…
new Date()函数控制日期——一分钟/一天/…只能点一次:
var D=(new Date()).getDate().toString(); if(D != wx.getStorageSync('D')){ //判断是否过了当天 //如果是新的一天,则... }else{ //否则,例如: wx.showToast({ title: '今日打卡已完成!', icon:'loading', duration:1200, mask:true }) }
这里又出现一个问题,我在当前页面开始时onLoad里面加了一段代码:把当前时间存放到storage中,但是我发现,这样以后就点不了了(当天),为什么?
因为冲突了啊,加载页面时存放此时时间,那么你如果在这个事件内(本例:一天)去点击,如上面代码第一、二行,它不成立——都是“今天”,所以会执行else语句。
解决办法: 去掉onLoad函数,这样开始执行if时候会发现storage中没有存储,也就“!=”了。
下面放上示例代码:
hello.wxml
<view class="container"> <view class="mxc1"> <text>您已签到 {{firstTime}} 次</text> </view> <view class="{{flag" bindtap="onBindTap"> <text>我要签到</text> </view> </view>
hello.wxss
.container{ background-color: ghostwhite; width: 100%; height: 100%; flex-direction: column; display: flex; align-items: center; min-height: 100vh; } .mxc1{ position: relative; width: 100%; height: 400rpx; border-top: 1px solid #000; border-bottom: 1px solid #000; margin-top: -70rpx; flex-direction: column; display: flex; align-items: center; background-color: #efeff4; } .mxc1 text{ font-size: 30rpx; font-weight: bold; line-height: 400rpx; } .mxc2-1{ position: absolute; width: 60%; height: 74rpx; border: 1px solid rgba(247, 2, 2, 0.959); background-color: rgba(247, 2, 2, 0.959); border-radius: 3px; flex-direction: column; display: flex; align-items: center; margin-top: 396rpx; } .mxc2-1 text{ color: white; font-size: 32rpx; line-height: 74rpx; } .mxc2-2{ position: absolute; width: 60%; height: 74rpx; border: 1px solid rgba(182, 177, 177, 0.959); background-color: rgba(182, 177, 177, 0.959); border-radius: 3px; flex-direction: column; display: flex; align-items: center; margin-top: 396rpx; } .mxc2-2 text{ color: #000; font-size: 32rpx; line-height: 74rpx; }
hello.js
Page({ data:{ firstTime:'0', flag:true }, onBindTap:function(){ var D=(new Date()).getDate().toString(); if(D != wx.getStorageSync('D')){ wx.setStorageSync('D', D); wx.setStorage({ key: 'FirstTime', data: (parseInt(this.data.firstTime) + 1).toString(), }) var that = this; var firstTime = wx.getStorage({ key: 'FirstTime', success: function (res) { that.setData({ firstTime: res.data, flag:false }) wx.showToast({ title: '签到成功!', icon: 'success', duration: 1200, mask: true }) }, }) }else{ wx.showToast({ title: '今日打卡已完成!', icon:'loading', duration:1200, mask:true }) } }, onShow:function(options){ var that = this; var firstTime = wx.getStorage({ key: 'FirstTime', success: function (res) { that.setData({ firstTime: res.data }) }, }) var D = (new Date()).getDate().toString(); if (D != wx.getStorageSync('D')){ this.setData({ flag:true }) }else{ this.setData({ flag:false }) } }, })
hello.json
{ "navigationBarTitleText": "签到", "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "ghostwhite" }
扩展时刻:
刚刚实现了简单的签到功能,那么,怎么实现连续签到呢?
我想了一晚上,因为刚开始时思路跑到了“误区”——判断点击后加1的事件是否匹配。但是你点击后加1是个被动事件,唯一条件就是点击,拿这个判断岂不是很难受?
于是,我们同样可以用parseInt()函数来把当前日期(时间)和缓存日期(时间)作比较 ,判断他们是否满足:
var D=(new Date()).getDate().toString();
在点击事件onBindTap里:
var DT=wx.getStorageSync('D'); if(parseInt(D)!=parseInt(DT)+1){ //非连续签到 对应的操作 }else{ //连续签到 }
易错点提示:
上面 hello.js 代码中有这么一行:this.data.firstTime
那有没有人想过 只写firstTime?
小程序中用data中的数据(变量)必须加上“this.data.”前缀!
总结
以上所述是小编给大家介绍的微信小程序本地存储实现每日签到、连续签到功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
- 黑帝斯哈迪斯2姊妹双刃图鉴及附魔效果一览 黑帝斯哈迪斯2全武器图文介绍
- 刘文正.2013-金典歌展2CD【南方】【WAV+CUE】
- 刘珺儿.2001-标准心上人【P.TMUSIC】【WAV+CUE】
- 谭小环.1997-自主【BMG】【WAV+CUE】
- WBG入选沙特电竞世界杯!角逐多个电竞项目
- 《小谢尔顿》最终季大结局首曝片段 成年谢米回归!
- 鸣潮凌阳声骸怎么选择 凌阳声骸搭配及词条选择攻略
- 鸣潮莫特斐声骸怎么选择 莫特斐声骸搭配及词条选择攻略
- 黑帝斯哈迪斯2月石之斧图鉴及附魔效果一览 哈迪斯斧头介绍及祝福推荐
- 甲子慧.2015-最爱【乾坤唱片】【WAV+CUE】
- 甲子慧.2007-红线情【乾坤唱片】【WAV+CUE】
- 周翠玲.2010-JZ8爵士八号【久乐实业】【WAV+CUE】
- 《家园3》公布最新预告片 高级版玩家已可抢先体验!
- 《地狱之刃2》预告对比:精心打磨三年 画质显著提升
- 《生化危机4:重制版》路径光追Mod:帧数遭暴降 画面大提升