1.

本文为原创作品，引用请注明出处，欢迎转载。

2.

生活中有各种可以打卡的app，例如背单词打卡什么的，本人觉得很有意思，于是本人在大二时做了一款诚信状打卡的微信小程序，这里讲述一下编写的过程。

3.

先说一下开发环境：用的是微信web开发工具开发的，后台采用了Bmob后台，比较方便。

4.

先展示一下成果：

5.

话不多说，直接上代码，里面也有挺多的注释，以防自己忘记，当然各位如果直接复制过去肯定不能有当前的效果，注意后台数据的交互，不过做一个界面还是没有问题的。

6.

Calendar.wxml页面文件页面上显示出来的东西，布局上主要是一个年月栏、上一个月和下一个月的按钮；然后是星期栏，就是日一二三四五六，然后就是每个月的日期，注意每个月的前面可能有空的地方。这里面用wx:if标签来区分当前日期有无打卡的情况。

!--pages/Calendar/Calendar.wxml--!--打卡日历页面--viewclass'all'viewclass"bar"!--上一个月--viewclass"previous"bindtap"handleCalendar"data-handle"prev"imagesrc'../../images/pre.png'/image/view!--显示年月--viewclass"date"{{cur_year||"--"}}年{{cur_month||"--"}}月/view!--下一个月--viewclass"next"bindtap"handleCalendar"data-handle"next"imagesrc'../../images/next.png'/image/view/view!--显示星期--viewclass"week"viewwx:for"{{weeks_ch}}"wx:key"{{index}}"data-idx"{{index}}"{{item}}/view/viewviewclass'days'!--列--viewclass"columns"wx:for"{{days.length/7}}"wx:for-index"i"wx:key"i"viewwx:for"{{days}}"wx:for-index"j"wx:key"j"!--行--viewclass"rows"wx:if"{{j/7i}}"viewclass"rows"wx:for"{{7}}"wx:for-index"k"wx:key"k"!--每个月份的空的单元格--viewclass'cell'wx:if"{{days[j+k].datenull}}"textdecode"{{true}}"/text/view!--每个月份的有数字的单元格--viewclass'cell'wx:else!--当前日期已签到--viewwx:if"{{days[j+k].isSigntrue}}"style'background-color:#83C75D'class'cell'text{{days[j+k].date}}/text/view!--当前日期未签到--viewwx:elsetext{{days[j+k].date}}/text/view/view/view/view/view/view/view!--坚持打卡天数--viewclass'count'text截至目前，你已坚持打卡/textviewclass'daynumber'textclass'number'{{count}}/texttextclass'day'天/text/viewtext请再接再厉，继续努力/text/view/view7.

Calendar.wxss样式文件这个就是让页面显示得更好看一点了，里面有些属性更改之后可能会导致整个页面的格式变得很乱，说明自己的功夫还是不到家。

/*pages/Calendar/Calendar.wxss*//*打卡日历*/.all{margin-top:20rpx;}.all.bar{display:flex;flex-direction:row;justify-content:space-between;margin:30rpx20rpx;padding:10rpx;}.all.barimage{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;}.counttext{margin:10rpx;}8.

Calendar.jsJavaScript文件js文件里面涉及到Bmob的操作，这里就不多说Bmob的操作了，感兴趣的同学可以去参考它的官方文档。然后里面主要是对上一个月、下一个月的点击函数进行处理，以及对某年某月的每个日期进行初始化（尤其是每个月前的可能有的几个空格进行了处理），然后就是判断某个日期在后台数据中是否有打卡。

//pages/Calendar/Calendar.js//打卡日历页面varutilrequire('../../utils/util.js');varBmobrequire('../../utils/bmob.js');Page({/***页面的初始数据*/data:{objectId:'',days:[],signUp:[],cur_year:0,cur_month:0,count:0},/***生命周期函数--监听页面加载*/onLoad:function(options){this.setData({objectId:options.objectId});//获取当前年月constdatenewDate();constcur_yeardate.getFullYear();constcur_monthdate.getMonth()+1;constweeks_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){returnnewDate(year,month,0).getDate()},//获取当月第一天星期几getFirstDayOfWeek:function(year,month){returnnewDate(Date.UTC(year,month-1,1)).getDay();},//计算当月1号前空了几个格子，把它填充在days数组的前面calculateEmptyGrids:function(year,month){varthatthis;//计算每个月时要清零that.setData({days:[]});constfirstDayOfWeekthis.getFirstDayOfWeek(year,month);if(firstDayOfWeek0){for(leti0;ifirstDayOfWeek;i++){varobj{date:null,isSign:false}that.data.days.push(obj);}this.setData({days:that.data.days});//清空}else{this.setData({days:[]});}},//绘制当月天数占的格子，并把它放到days数组中calculateDays:function(year,month){varthatthis;constthisMonthDaysthis.getThisMonthDays(year,month);for(leti1;ithisMonthDays;i++){varobj{date:i,isSign:false}that.data.days.push(obj);}this.setData({days:that.data.days});},//匹配判断当月与当月哪些日子签到打卡onJudgeSign:function(){varthatthis;varsignsthat.data.signUp;vardaysArrthat.data.days;for(vari0;isigns.length;i++){varcurrentnewDate(signs[i].date.replace(/-/g,"/"));varyearcurrent.getFullYear();varmonthcurrent.getMonth()+1;vardaycurrent.getDate();dayparseInt(day);for(varj0;jdaysArr.length;j++){//年月日相同并且已打卡if(yearthat.data.cur_yearmonththat.data.cur_monthdaysArr[j].datedaysigns[i].isSign"今日已打卡"){daysArr[j].isSigntrue;}}}that.setData({days:daysArr});},//切换控制年月，上一个月，下一个月handleCalendar:function(e){consthandlee.currentTarget.dataset.handle;constcur_yearthis.data.cur_year;constcur_monththis.data.cur_month;if(handle'prev'){letnewMonthcur_month-1;letnewYearcur_year;if(newMonth1){newYearcur_year-1;newMonth12;}this.calculateEmptyGrids(newYear,newMonth);this.calculateDays(newYear,newMonth);this.onGetSignUp();this.setData({cur_year:newYear,cur_month:newMonth})}else{letnewMonthcur_month+1;letnewYearcur_year;if(newMonth12){newYearcur_year+1;newMonth1;}this.calculateEmptyGrids(newYear,newMonth);this.calculateDays(newYear,newMonth);this.onGetSignUp();this.setData({cur_year:newYear,cur_month:newMonth})}},//获取当前用户该任务的签到数组onGetSignUp:function(){varthatthis;varTask_UserBmob.Object.extend("task_user");varqnewBmob.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){}});}})9.

Calendar.jsonjson文件这里仅仅是改变了导航栏上的标题文字

{"navigationBarTitleText":"打卡日历"}10.

做这个的时候还是废了一番功夫的，欢迎大家来试用一下我写的微信小程序。以下是微信小程序山东大学唐仲英爱心社的链接。如果出现引入错误或者需要完整项目的资源，可以前往github上下载，记得给个星星山东大学唐仲英爱心社