习惯养成之日历

习惯养成之日历

背景

​ 在原先的基础上，新增了一个日历功能，完善了打卡的界面，以及新增了一个清晨早起语录功能，并且修复了一些小的bug

日历

雏形

​ 在github上找了一个打卡功能的实现，看了看人家的实现方法理解了人家代码的原理，由于他使用的是bmob数据库的利用方法，我们对其代码进行了大修改，改为我们可以使用的代码

优化

​ 修改了其变色的判定逻辑，增加了每个日期可点击并且点击变色的功能以及一堆小的方面的问题

代码如下：

  // 获取当月共多少天
  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();
  },
  mood: function (e) {//
    //console.log(e.currentTarget)
    if(this.data.click_id == e.currentTarget.id){
      this.data.click_id = -1
    }
    else{
      this.data.click_id = e.currentTarget.id
    }

    //console.log(e.currentTarget.id)
    this.onGetSignUp()
    var that = this;
    that.setData({
      mod_able: true,
      my_mood: ''
    })
    //that.data.days[click].color = that.data.colors[1]
    var year = util.formatNumber(that.data.cur_year)
    var month = util.formatNumber(that.data.cur_month)
    var day = util.formatNumber(that.data.click_id - that.getFirstDayOfWeek(year, month) + 1)
    wx.cloud.callFunction({
      name: 'database',
      data: {
        type: "get", //指定操作是insert  
        db: "daka", //指定操作的数据表
        limit: 10,
        skip: 0,
        condition: {
          username: app.globalData.mine.username,
          year: year,
          month: month,
          day: day
        }
        //condition: { year: mydata.year, month: mydata.month, day: mydata.day }
      },
      success: function (res) {
        if(res.result.data.length > 0){
          console.log(res)
          if (res.result.data[0].mood != ''){
            that.setData({
              my_mood: res.result.data[0].mood,
              mod_able: false
            })
          }
        }
        else{
          that.setData({
            mod_able: true,
            my_mood: ''
          })
        }
      },
      error: function (error) {
        console.log(error)
      }
    });
  },
  // 计算当月1号前空了几个格子，把它填充在days数组的前面
  calculateEmptyGrids: function (year, month) {
    var that = this;
    //计算每个月时要清零
    that.setData({ days: [] });
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    //console.log(firstDayOfWeek)
    //console.log("++++++++++++++++++++")
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        var obj = {
          date: null,
          color: ''
        }
        that.data.days.push(obj);
      }
      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,
        color: ''
      }
      that.data.days.push(obj);
    }
    this.setData({
      days: that.data.days
    });
  },

  //匹配判断当月与当月哪些日子签到打卡
  onJudgeSign: function () {
    var that = this;
    var signs = that.data.signUp;
    var daysArr = that.data.days;
    for (var j = 0; j < daysArr.length; j++){
      daysArr[j].color = that.data.colors[2];
    }
    for (var i = 0; i < signs.length; i++) {
      var year = signs[i].year;
      var month = signs[i].month;
      var day = signs[i].day;
      day = parseInt(day);
      for (var j = 0; j < daysArr.length; j++) {
        //年月日相同并且已打卡
        if (that.data.click_id == j) {
          daysArr[j].color = that.data.colors[1];
        }
        else if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day ) {
          daysArr[j].color = that.data.colors[0];
        }
      }
    }
    that.setData({ days: daysArr, click_id: -1 });
  },

  // 切换控制年月，上一个月，下一个月
  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;
    wx.cloud.callFunction({
      name: 'database',
      data: {
        type: "get", //指定操作是insert  
        db: "daka", //指定操作的数据表
        limit: 10,
        skip: 0,
        condition: { username: app.globalData.mine.username }
        //condition: { year: mydata.year, month: mydata.month, day: mydata.day }
      },
      success: function (res) {
        that.setData({
          signUp: res.result.data,
          count: res.result.data.length
        });
        that.onJudgeSign();
      },
      error: function (error) {
        console.log(error)
      }
    });
  }

界面代码如下：

<view class='all'>
 <view class="bar">
  <!-- 上一个月 -->
  <view class="previous" bindtap="handleCalendar" data-handle="prev">
   <image src='../../static/images/pre.png'></image>
  </view>
  <!-- 显示年月 -->
  <view class="date">{{cur_year || "2019"}} 年 {{cur_month || "6"}} 月</view>
  <!-- 下一个月 -->
  <view class="next" bindtap="handleCalendar" data-handle="next">
   <image src='../../static/images/next.png'></image>
  </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}}">  </text>
      </view>
      <!-- 每个月份的有数字的单元格 -->
      <view class='cell' wx:else>
       <!-- 当前日期已签到 -->
       <view bindtap='mood' style='{{days[j+k].color}}' class='cell' id="{{j+k}}">
        <text>{{days[j+k].date}}</text>
       </view>
      </view>
     </view>
    </view>
   </view>
  </view>
 </view>
 <view hidden='{{mod_able}}' class='count' >
 <text>{{my_mood}}</text>
 </view>
 <!-- 坚持打卡天数 -->
 <view class='count'>
  <text>截至目前，你已坚持打卡</text>
  <view class='daynumber'>
  <text class='number'>{{count}}</text>
  <text class='day'>天</text>
  </view>  
  <text>请再接再厉，继续努力</text>
 </view>
</view>

新增功能

​ 新加了一个清晨语录功能，用户可以早上打卡的时候记录下来现在的想法，感受或者给自己今天定个计划以及激励自己的话

​ 当你点击你写了语录的那天的时候下方会出现你的当天的语录，下方红色为当前点击的日期，绿色为打卡日期

​ 具体修改代码为：

<modal id="modal" hidden="{{hiddenmodalput}}" title="清晨语录" confirm-text="确定" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">
<input type='text' bindinput='ina' name ="invitedname" placeholder="心情/计划/感受" focus="true"/>
</modal>

ina: function (e) {
    this.setData({
      to_mood: e.detail.value
    })
  },

  cancel: function (e) {
    this.setData({
      hiddenmodalput: true
    })   
  },
  
  confirm: function(){
    this.setData({
      hiddenmodalput: true
    }) 
    var that = this
    wx.cloud.callFunction({
      name: 'database',
      data: {
        type: "update", //指定操作是insert  
        db: "user", //指定操作的数据表
        indexKey: app.globalData.mine._id,
        data: { //指定insert的数据
          //groupID: wx.getStorageSync("groupID"),
          //subject: ["语文soc", "数学", "英语", "物理", "化学", "历史", "地理", "政治"]
          score: app.globalData.mine.score
        }
      },
      success: function (res) {
        var mydata = util.formatTime(new Date())
        console.log(res)
        console.log(app.globalData)
        wx.cloud.callFunction({
          name: 'database',
          data: {
            type: "insert", //指定操作是insert  
            db: "daka", //指定操作的数据表
            data: { //指定insert的数据
              username: app.globalData.mine.username,
              addr: app.globalData.avatarUrl,
              year: mydata.year,
              month: mydata.month,
              day: mydata.day,
              hour: mydata.hour,
              minute: mydata.minute,
              second: mydata.second,
              mood: that.data.to_mood
            }
          },
          success: function (res) {
            wx.showToast({
              title: '打卡成功',
              icon: 'success'
            });
            that.setData({
              disabled: false,
              hiddenmodalput: true
            });
            that.onGetSignUp()
          },
          error: function (error) {
            console.log(error)
          }
        });
      },

      error: function (error) {
        console.log(error)
      }
    })
  },

​ 将打卡的最后部分的功能搬到了该confirm函数中，并在所有记录打卡信息的地方新增了一个字段的数据

小bug修复

​ 由于我们的功能基础建立在你授权登陆之后，但是我们测试的时候发现我们分享出去的界面，会跳过授权登陆

​ 查阅了资料，规定了所有界面的分享界面路径，代码如下：

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "不来打死你",
      path: "pages/loginer/loginer"
    }
  },

总结

​ 该篇本来是前天发的，电脑没电了，昨天端午节出去玩了，一直没来得及更新

​ 此外一直下不了决心开始做补签功能，涉及的代码有点广，工程量太大，我需要先计算一下怎么进行补签的功能需要更改的代码最少，非常痛苦