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

这篇文章主要介绍了微信小程序本地存储怎么实现每日签到、连续签到功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序本地存储怎么实现每日签到、连续签到功能文章都会有所收获，下面我们一起来看看吧。

先说说相关注意吧：

其一就是 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."前缀！

关于"微信小程序本地存储怎么实现每日签到、连续签到功能"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"微信小程序本地存储怎么实现每日签到、连续签到功能"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。