生活中有各种可以打卡的app，例如背单词打卡什么的，本人觉得很有意思，于是本人在大二时做了一款诚信状打卡的微信小程序，这里讲述一下编写的过程。
先说一下开发环境：用的是微信web开发工具开发的，后台采用了Bmob后台，比较方便。
先展示一下成果：
话不多说，直接上代码，里面也有挺多的注释，以防自己忘记，当然各位如果直接复制过去肯定不能有当前的效果，注意后台数据的交互，不过做一个界面还是没有问题的。
Calendar.wxml 页面文件
页面上显示出来的东西，布局上主要是一个年月栏、上一个月和下一个月的按钮；然后是星期栏，就是日一二三四五六，然后就是每个月的日期，注意每个月的前面可能有空的地方。这里面用wx:if标签来区分当前日期有无打卡的情况。
<!--pages/Calendar/Calendar.wxml--> <!-- 打卡日历页面 --> <view> <view> <!-- 上一个月 --> <view bindtap="handleCalendar" data-handle="prev"> <image src=''></image> </view> <!-- 显示年月 --> <view>{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view> <!-- 下一个月 --> <view bindtap="handleCalendar" data-handle="next"> <image src=''></image> </view> </view> <!-- 显示星期 --> <view> <view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view> </view> <view> <!-- 列 --> <view wx:for="{{days.length/7}}" wx:for-index="i" wx:key="i"> <view wx:for="{{days}}" wx:for-index="j" wx:key="j"> <!-- 行 --> <view wx:if="{{j/7 == i}}"> <view wx:for="{{7}}" wx:for-index="k" wx:key="k"> <!-- 每个月份的空的单元格 --> <view wx:if="{{days[j+k].date == null}}"> <text decode="{{true}}"> </text> </view> <!-- 每个月份的有数字的单元格 --> <view wx:else> <!-- 当前日期已签到 --> <view wx:if="{{days[j+k].isSign == true}}"> <text>{{days[j+k].date}}</text> </view> <!-- 当前日期未签到 --> <view wx:else> <text>{{days[j+k].date}}</text> </view> </view> </view> </view> </view> </view> </view> <!-- 坚持打卡天数 --> <view> <text>截至目前，你已坚持打卡</text> <view> <text>{{count}}</text> <text>天</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的操作了，感兴趣的同学可以去参考它的官方文档。
然后里面主要是对上一个月、下一个月的点击函数进行处理，以及对某年某月的每个日期进行初始化（尤其是每个月前的可能有的几个空格进行了处理），然后就是判断某个日期在后台数据中是否有打卡。