微信小程序本地存储实现每日签到、连续签到功能

2023-08-12 23:01:05 57

昨天在看自己写的小程序项目，无意中打开了CSDNAPP，突然间觉得，我去，如果在小程序中加个“签到”功能，岂不美哉！（好吧，其实是买的书昨天没到货，然后闲着无事，就想起了大明湖畔的“签到”）

但是吧，又不想写和服务器交互的，本着“简单点”的原则，我想起了曾经的挚爱——本地存储。

先说说相关注意吧：

其一就是storage中只能存放字符串！

我去，昨晚大部分时间都是在搞这个。以前一直认为存放的是对象，兴致勃勃写完发现点击以后出现了“NAN”…

觉得事情并没有这么简单。

仔细回去看了一下曾经Vue写过的localStorage，发现一直弄错了，应该存放字符串！

搞清楚这个以后，又有一个问题：你要“点击加1”，这里总是把数字和字符串弄反，甚至想了用数组形式存放。。。最终想到了解决办法：把存放的字符串转为数字，加1后再转为字符串存放到storage中。

想到这我不禁喜形于色，终于可以了！

但是当我无意中狂点16下的时候，我又哭了…

newDate()函数控制日期——一分钟/一天/…只能点一次：

varD=(newDate()).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



您已签到{{firstTime}}次


我要签到

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:1pxsolid#000;
border-bottom:1pxsolid#000;
margin-top:-70rpx;
flex-direction:column;
display:flex;
align-items:center;
background-color:#efeff4;
}
.mxc1text{
font-size:30rpx;
font-weight:bold;
line-height:400rpx;
}
.mxc2-1{
position:absolute;
width:60%;
height:74rpx;
border:1pxsolidrgba(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-1text{
color:white;
font-size:32rpx;
line-height:74rpx;
}
.mxc2-2{
position:absolute;
width:60%;
height:74rpx;
border:1pxsolidrgba(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-2text{
color:#000;
font-size:32rpx;
line-height:74rpx;
}

hello.js

Page({
data:{
firstTime:'0',
flag:true
},
onBindTap:function(){
varD=(newDate()).getDate().toString();
if(D!=wx.getStorageSync('D')){
wx.setStorageSync('D',D);
wx.setStorage({
key:'FirstTime',
data:(parseInt(this.data.firstTime)+1).toString(),
})
varthat=this;
varfirstTime=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){
varthat=this;
varfirstTime=wx.getStorage({
key:'FirstTime',
success:function(res){
that.setData({
firstTime:res.data
})
},
})
varD=(newDate()).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()函数来把当前日期（时间）和缓存日期（时间）作比较，判断他们是否满足：

varD=(newDate()).getDate().toString();

在点击事件onBindTap里：

varDT=wx.getStorageSync('D');
if(parseInt(D)!=parseInt(DT)+1){
//非连续签到对应的操作
}else{
//连续签到
}

易错点提示：

上面hello.js代码中有这么一行：this.data.firstTime

那有没有人想过只写firstTime？

小程序中用data中的数据（变量）必须加上“this.data.”前缀！

总结

以上所述是小编给大家介绍的微信小程序本地存储实现每日签到、连续签到功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

微信小程序本地存储实现每日签到、连续签到功能

热门推荐

随机推荐