怎么在微信小程序中實現打卡日歷功能

怎么在微信小程序中實現打卡日歷功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

Calendar.wxml 頁面文件

頁面上顯示出來的東西，布局上主要是一個年月欄、上一個月和下一個月的按鈕；然后是星期欄，就是日一二三四五六，然后就是每個月的日期，注意每個月的前面可能有空的地方。這里面用wx:if標簽來區分當前日期有無打卡的情況。

<!--pages/Calendar/Calendar.wxml-->
<!-- 打卡日歷頁面 -->
<view class='all'>
 <view class="bar">
  <!-- 上一個月 -->
  <view class="previous" bindtap="handleCalendar" data-handle="prev">
   <image src='../../images/pre.png'></image>
  </view>
  <!-- 顯示年月 -->
  <view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
  <!-- 下一個月 -->
  <view class="next" bindtap="handleCalendar" data-handle="next">
   <image src='../../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}}">&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>
 </view>
</view>

Calendar.wxss 樣式文件

這個就是讓頁面顯示得更好看一點了，里面有些屬性更改之后可能會導致整個頁面的格式變得很亂，說明自己的功夫還是不到家。

/* 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;
}

Calendar.js JavaScript文件

js文件里面涉及到Bmob的操作，這里就不多說Bmob的操作了，感興趣的同學可以去參考它的官方文檔。
然后里面主要是對上一個月、下一個月的點擊函數進行處理，以及對某年某月的每個日期進行初始化（尤其是每個月前的可能有的幾個空格進行了處理），然后就是判斷某個日期在后臺數據中是否有打卡。

// pages/Calendar/Calendar.js
//打卡日歷頁面
var util = require('../../utils/util.js');
var Bmob = require('../../utils/bmob.js');
Page({

 /**
  * 頁面的初始數據
  */
 data: {
  objectId:'',
  days:[],
  signUp:[],
  cur_year:0,
  cur_month:0,
  count:0
 },

 /**
  * 生命周期函數--監聽頁面加載
  */
 onLoad: function (options) {
  this.setData({objectId : options.objectId}); 
  //獲取當前年月 
  const date = new Date();
  const cur_year = date.getFullYear();
  const cur_month = date.getMonth() + 1;
  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  this.calculateEmptyGrids(cur_year, cur_month);
  this.calculateDays(cur_year, cur_month);
  //獲取當前用戶當前任務的簽到狀態
  this.onGetSignUp();
  this.setData({
   cur_year,
   cur_month,
   weeks_ch
  })

 },

 /**
  * 生命周期函數--監聽頁面初次渲染完成
  */
 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();
 },

 // 計算當月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);
   }
   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);
  }
  this.setData({
   days:that.data.days
  });
 },

 //匹配判斷當月與當月哪些日子簽到打卡
 onJudgeSign:function(){
  var that = this;
  var signs = that.data.signUp;
  var daysArr = that.data.days;
  for (var i=0; i < signs.length;i++){
   var current = new Date(signs[i].date.replace(/-/g, "/"));
   var year = current.getFullYear();
   var month = current.getMonth()+1;
   var day = current.getDate();
   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 && signs[i].isSign == "今日已打卡"){
     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;
  var Task_User = Bmob.Object.extend("task_user");
  var q = new Bmob.Query(Task_User);
  q.get(that.data.objectId, {
   success: function (result) {
    that.setData({
     signUp : result.get("signUp"),
     count : result.get("score")
    });
    //獲取后就判斷簽到情況
    that.onJudgeSign();
   },
   error: function (object, error) {
   }
  });  
 }
})

Calendar.json json文件

這里僅僅是改變了導航欄上的標題文字

{
 "navigationBarTitleText": "打卡日歷"
}

關于怎么在微信小程序中實現打卡日歷功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。