历时半年，我发布了一款习惯打卡小程序

发布时间：2025-08-28 18:38

一个程序员剪了一个中分，然后他就变成了半个程序员。 #生活乐趣# #幽默笑话#

半年多前，我一直困扰于如何记录习惯打卡情况，在参考了市面上绝大多数的习惯培养程序后，终于创建并发布了这款习惯打卡小程序。

“小日常打卡”小程序主要提供习惯打卡和专注训练功能。致力于培养用户养成一个个好的习惯，改掉生活中的拖延症！

代码技术

服务端：使用PHP+MySQL编写服务端接口

前端：使用UniApp开发并封装成微信小程序

图片存储：使用七牛云存储日志图片

界面截图介绍

一、首页打卡界面

显示当天需要打卡的习惯，点击白色圈的图片即可打卡成功；（可操作单个习惯一天打卡多次）

习惯显示列表

二、习惯统计

支持按天、按周、按月、按年度显示打卡情况；

当天打卡数据显示

日历使用的是uniapp自带的uni-calendar组件，只是自行修改了样式，样式代码如下：

打卡详细数据显示

按周、按月显示打卡统计

年度打卡统计显示

三、专注训练

提供番茄专注倒计时，训练专注能力。专注统计数据显示如下：

专注训练这块的数据图表生成，我并没有使用他人封装好的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>