这篇文章主要介绍了微信小程序本地存储怎么实现每日签到、连续签到功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序本地存储怎么实现每日签到、连续签到功能文章都会有所收获，下面我们一起来看看吧。
银州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为
成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！
先说说相关注意吧：
其一就是 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
您已签到 {{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: 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.”前缀！
关于“微信小程序本地存储怎么实现每日签到、连续签到功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序本地存储怎么实现每日签到、连续签到功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
网页名称：微信小程序本地存储怎么实现每日签到、连续签到功能-创新互联
当前网址：
http://bzwzjz.com/article/cchieg.html
