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

这篇文章给大家分享的是有关微信小程序本地存储如何实现每日签到、连续签到功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

先说说相关注意吧：

其一就是 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?'mxc2-1':'mxc2-2'}}" 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.”前缀！

感谢各位的阅读！关于“微信小程序本地存储如何实现每日签到、连续签到功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！