⼩程序实现打卡⽇历功能
⽣活中有各种可以打卡的app，例如背单词打卡什么的，本⼈觉得很有意思，于是本⼈在⼤⼆时做了⼀款诚信状打卡的⼩程序，这⾥讲述⼀下编写的过程。
先说⼀下开发环境：⽤的是web开发⼯具开发的，后台采⽤了Bmob后台，⽐较⽅便。
先展⽰⼀下成果：
话不多说，直接上代码，⾥⾯也有挺多的注释，以防⾃⼰忘记，当然各位如果直接复制过去肯定不能有当前的效果，注意后台数据的交互，不过做⼀个界⾯还是没有问题的。
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}}"> </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 = FullYear();
const cur_month = Month() + 1;
const weeks_ch = ['⽇', '⼀', '⼆', '三', '四', '五', '六']; this.calculateEmptyGrids(cur_year, cur_month); this.calculateDays(cur_year, cur_month);
//获取当前⽤户当前任务的签到状态
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() },
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论