半年多前，我一直困扰于如何记录习惯打卡情况，在参考了市面上绝大多数的习惯培养程序后，终于创建并发布了这款习惯打卡小程序。
“小日常打卡”小程序主要提供习惯打卡和专注训练功能。致力于培养用户养成一个个好的习惯，改掉生活中的拖延症！
代码技术
服务端：使用PHP+MySQL编写服务端接口
前端：使用UniApp开发并封装成微信小程序
图片存储：使用七牛云存储日志图片视频
界面截图介绍
一、首页打卡界面
显示当天需要打卡的习惯，点击白色圈的图片即可打卡成功；（可操作单个习惯一天打卡多次）
习惯显示列表
二、习惯统计
支持按天、按周、按月、按年度显示打卡情况；
当天打卡数据显示
打卡详细数据显示
按周、按月显示打卡统计
年度打卡统计显示
三、专注训练
提供番茄专注倒计时，训练专注能力。专注统计数据显示如下：
专注训练这块的数据图表生成，我并没有使用他人封装好的echarts相关组件，而是选择可官方提供的一个小程序版本的echarts-for-weixin组件。饼状图生成代码如下：
<template>
<uni-ec-canvas class="uni-ec-canvas" id="day-canvas" ref="dayCanvas" canvas-id="day-canvas" :ec="ec"></uni-ec-canvas>
</template>
<script>
export default {
data() {
ec: {
lazyLoad: true
},
optionDay: {
color: [],
series: [{
type: 'pie',
data: [],
label: {
formatter: params => {
// console.log(params);
let str = params.data.name;
let duration = params.data.value;
let timeStr = '';
if (params.data.value > 0) {
if (duration >= 60) {
// 格式化时分
let hour = Math.floor(duration / 60);
let minute = duration - hour * 60;
timeStr += hour + '小时' + minute + '分';
} else {
timeStr += duration + '分';
}
}
return str + '\n' + timeStr;
}
},
radius: '70%'
}]
},
},
methods: {
getDetails() {
this.$nextTick(() => {
// ajax请求数据并绘图
setTimeout(() => {
this.$refs.dayCanvas.init(this.initDayChart);
}, 300);
});
}
}
}
</script>
四、打卡组打卡
与好友在打卡组中一起打卡，共同成长
五、早起打卡活动
参与早起打卡活动，成功打卡瓜分奖金
六、其他功能
个人中心提供其他更多功能，如习惯和专注日志记录、帮助手册等等
