单机打卡小程序之使用缓存

使用缓存进行打卡小程序

首先感谢Heavn博主分享的源码https://blog.csdn.net/qq_38137411/article/details/81319299
由于课程需要，需要用缓存代替后端进行打卡。
而且易于实现，不需要端知识。
话不多说，直接上代码。

index.wxml`

<!--index.wxml-->
<view class="container">
	<!-- 打卡日历页面 -->
	<view class="all">
		<view class="bar">
			<!-- 上一个月 -->
			<view class="previous" bindtap="handleCalendar" data-handle="prev">
				<view class="iconfont icon-arrow_back"></view>
			</view>
			<!-- 显示年月 -->
			<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
			<!-- 下一个月 -->
			<view class="next" bindtap="handleCalendar" data-handle="next">
				<view class="iconfont icon-arrow_right"></view>
			</view>
		</view>



		<!-- 显示星期 -->
		<view class="week">
			<view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
		</view>


		<!-- 显示天数 -->
		<view class='days'>
			<!-- 列 -->
			<view class="columns" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="i">
				<view wx:for="{{days}}" wx:for-index="j" wx:key="j">
					<!-- 行 -->
					<view class="rows" wx:if="{{j/7 == i}}">


						<view class="rows" wx:for="{{7}}" wx:for-index="k" wx:key="k">
							<!-- 每个月份的空的单元格 -->
							<view class='cell' wx:if="{{days[j+k].date == null}}">
								<text decode="{{true}}">&nbsp;&nbsp;</text>
								<!-- 一种显示方式 -->
							</view>
							<!-- 每个月份的有数字的单元格 -->
							<view class='cell' wx:else>
								<!-- 当前日期已签到 -->
								<view wx:if="{{days[j+k].isSign == true}}" style='background-color:#83C75D' class='cell'>
									<text>{{days[j+k].date}}</text>
								</view>
								<!-- 当前日期未签到 -->
								<view wx:else>
									<text>{{days[j+k].date}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 坚持打卡天数 -->
		<view class='count'>
			<text>截至目前，你已坚持打卡</text>
			<view class='daynumber'>
				<text class='number'>{{count}}</text>
				<text class='day'>天</text>
			</view>
			<text>请再接再厉，继续努力</text>
			<button bindtap="buttonSignUp">{{isComplete}}</button>
		</view>
	</view>
</view>

index.wxss

/**index.wxss**/
@import '../../images/font_1111028_3yuwthufobl/stylesheet.wxss';
image{
  width: 80rpx;
  height: 80rpx;
}
/* pages/Calendar/Calendar.wxss */
/* 打卡日历 */
.all{
  margin-top: 20rpx;
}

.all .bar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30rpx 20rpx;
  padding: 10rpx;
}

.all .bar image{
  width: 50rpx;
  height: 50rpx;
}

.all .week{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20rpx;
  padding-left: 40rpx;
  padding-right: 40rpx;
  margin: 20rpx;
  border-radius: 10px;
  background-color: #acd;
}

.all .days{
  margin: 20rpx;
  padding: 10rpx;
  border-radius: 10px;
  background-color: #acd;

}

.all .columns{
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.all .columns .rows{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.all .columns .rows .cell{
  width: 84rpx;
  height: 88rpx;
  margin: 3rpx;
  text-align: center;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.count .daynumber{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.count .daynumber .day{
  margin-top: 50rpx;
}

.count{
  margin: 20rpx;
  padding: 30rpx;
  display: flex;
  text-align: center;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  background-color: #acd;
  align-items: center;
}

.count .number{
  color: red;
  font-size: 60rpx;
  background-color: #fff;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20rpx;
}

.count text{
  margin: 10rpx;
}

index.js

//index.js
//获取应用实例
//打卡日历页面
var util = require('../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    days: [], //对象数组，包含date(号数)与isSign(该天是否打卡)
    signUp: [], //当月打卡哪些天，存储当月打号数数组
    cur_year: 0, //常数当天年数
    cur_month: 0, //常数当天月数
    count: 0, //打卡总天数
    weeks_ch: [], //常数星期数组
    key: 'history',
    isComplete: '立即签到'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    //获取当前年月  
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
    this.calculateEmptyGrids(cur_year, cur_month); //计算空格数，得到的days只有含几个空格数组
    this.calculateDays(cur_year, cur_month); //生成一个月格子数，得到的days前面为空格，后面为号数
    //获取当前用户当前任务的签到状态
    this.onGetSignUp(); //签到函数

    this.setData({
      cur_year,
      cur_month,
      weeks_ch
    })
  },



  buttonSignUp: function () {
    var that = this;
    console.log('我是傻逼')
    var current = new Date();
    var year = current.getFullYear();
    var month = current.getMonth() + 1; //之所以加1是因为getmonth比正常少1
    var day = current.getDate();
    var signStatus = 1;
    var signs = that.data.signUp;
    for (var i = 0; i < signs.length; i++) {
      if (year == signs[i].cur_year && month == signs[i].cur_month && signs[i].date == day) {
        //alert('今天你已经签过到，无需再签');
        wx.showModal({
          title: '提示',
          content: '今天你已经签过到，无需再签',
          success: function (res) {
            if (res.confirm) { //这里是点击了确定以后
              console.log('用户点击确定')
            } else { //这里是点击了取消以后
              console.log('用户点击取消')
            }
          }
        })
        console.log('不用签了');
        signStatus = 0;
        that.setData({
          isComplete: '已签到'
        });
      }
    }
    if (signStatus) {
      var daysArr = that.data.days; //该月天数和1号前面空格以及isSign两个元素的对象数组
      let key = that.data.key;

      day = parseInt(day);
      // console.log(that.data.count)
      for (var j = 0; j < daysArr.length; j++) {
        //年月日相同并且已打卡
        if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day) {
          console.log('签到成功');
          var signUp1 = that.data.signUp;
          //console.log(daysArr)
          signUp1.push({
            cur_year: that.data.cur_year,
            cur_month: that.data.cur_month,
            date: daysArr[j].date
          })
          console.log(signUp1);
          var count = that.data.count + 1;
        }
      };
      that.setData({
        days: daysArr,
        count: count,
        signUp: signUp1,
        isComplete: '已签到'
      });

      wx.setStorage({
        data: that.data,
        key: key,
        success: function (res) {
          console.log('缓存成功')
          var eee = wx.getStorageSync(key)
          console.log(eee)
        },
        fail: function () {
          console.log('缓存失败')
        }
      })
      //this.onGetSignUp(); //签到函数
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // 获取当月共多少天
  getThisMonthDays: function (year, month) {
    return new Date(year, month, 0).getDate()
  },

  // 获取当月第一天星期几
  getFirstDayOfWeek: function (year, month) {
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  }, //返回值为0-6，0代表星期日

  // 计算当月1号前空了几个格子，把它填充在days数组的前面
  calculateEmptyGrids: function (year, month) {
    var that = this;
    //计算每个月时要清零
    that.setData({
      days: []
    });
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        var obj = {
          date: null,
          isSign: false
        }
        that.data.days.push(obj); //push是添加到末尾，但days被提前清空
      }
      this.setData({
        days: that.data.days
      });

      //清空
    } else {
      this.setData({
        days: []
      });
    }
  },

  // 绘制当月天数占的格子，并把它放到days数组中
  calculateDays: function (year, month) {
    var that = this;
    const thisMonthDays = this.getThisMonthDays(year, month);
    for (let i = 1; i <= thisMonthDays; i++) {
      var obj = {
        date: i,
        isSign: false
      }
      that.data.days.push(obj);
    }
    that.setData({
      days: that.data.days
    });
  },
  ///无用
  //匹配判断当月与当月哪些日子签到打卡
  onJudgeSign: function () {
    var that = this;
    var signs = that.data.signUp; //打卡号数数组
    var daysArr = that.data.days; //该月天数对象数组,含date（号数）和isSign（是否签到）属性
    for (var i = 0; i < signs.length; i++) {
      var current = signs[i];
      var year = current.cur_year;
      var month = current.cur_month; //之所以加1是因为getmonth比正常少1
      var day = current.date;
      day = parseInt(day);
      for (var j = 0; j < daysArr.length; j++) {
        //年月日相同并且已打卡
        if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day) {
          daysArr[j].isSign = true;
        }
      }
    }
    that.setData({
      days: daysArr
    });
  },

  // 切换控制年月，上一个月，下一个月
  handleCalendar: function (e) {
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      if (newMonth < 1) {
        newYear = cur_year - 1;
        newMonth = 12;
      }
      this.calculateEmptyGrids(newYear, newMonth);
      this.calculateDays(newYear, newMonth);
      this.onGetSignUp();
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      if (newMonth > 12) {
        newYear = cur_year + 1;
        newMonth = 1;
      }
      this.calculateEmptyGrids(newYear, newMonth);
      this.calculateDays(newYear, newMonth);
      this.onGetSignUp();
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
    }
  },

  //获取当前用户该任务的签到数组
  onGetSignUp: function () {
    var that = this;
    let key = that.data.key;
    wx.getStorage({
      key: key,
      success: function (res) {
        console.log('读取成功')
        that.setData({
          signUp: res.data.signUp,
          count: res.data.count,
          days: res.data.days
        });
        //获取后就判断签到情况,并显示之前的签到样式
        that.onJudgeSign();
      },
      fail: function (res) {
        console.log(res + 'aaaaa')
      }
    });
  }
})

说明

1. app.js、app.json不需要改变，app.wxss里的内容注释掉。
2. 下图的两个小图标（向前，后退）需要自己去进行配置，或则直接引入两个图片。如何去配置：推荐该博客https://blog.csdn.net/nongweiyilady/article/details/74244362，你就知道了。
3. 暂时没什么可提示的，想起了再修改博客吧
4. 下面上结果
   5
5. 
6. 

一些问题需要接解决

1、先夸夸自己，才学没几天就能改成这个逼样，我实在尽力了。
2、这个在开发工具模拟调试正确，但在真机调试签到会签到下个月和上个月，即今天是2020年4月6日，真机调试给我签到3月6日和5月6日，求求哪位大佬帮忙看看是哪里出错了
3、由于是新手，有些地方有点冗余，但又不敢改，怕改了，有出错了，又改不回来了。嘻嘻

感谢

再次感谢分享源码的大佬，你要是看到我的博客，能帮我修改一下吗。