学习打卡器 — 微信小程序产品系统Vibe Coding

我要开发同款
猪小二.2026年05月31日
5阅读

技术信息

语言技术
MongoJavaScript小程序
系统类型
小程序轻应用
行业分类
教育校园

作品详情

行业场景

立项原因:在碎片化学习时代,很多学生缺乏有效的学习时间管理和自我监督工具。市面上虽有 Forest、番茄ToDo
▎ 等效率工具,但缺乏与校园场景的结合,且无法满足多人学习数据管理和统计分析的需求。

▎ 业务背景:学习打卡器定位为一款轻量级的学习时间管理小程序,面向高校学生群体。用户可以通过计时器记录每次学习的内容和时
▎ 长,系统自动汇总统计数据(学习天数、总时长、时段分布),并设计成就系统激励用户坚持学习。管理员可以查看所有用户的学习
▎ 数据,适合班级或学习小组场景。

功能介绍

功能模块:
▎ 1. 用户注册与登录 — 支持普通用户和管理员两种角色,账号密码登录,记住密码功能
▎ 2. 学习计时器 — 记录每次学习的开始时间、结束时间、学习内容和总时长,精确到秒
▎ 3. 学习记录查看 — 按日期展示所有学习记录,支持筛选、批量删除、按用户查看(管理员)
▎ 4. 日历打卡视图 — 日历上标记有学习记录的日子,直观展示学习习惯
▎ 5. 数据统计分析 — 统计总学习天数、总学习次数、总学习时长
▎ 6. 时段分布分析 — 按凌晨、早晨、上午、下午、晚上五个时段统计学习分布
▎ 7. 成就系统 — 早起鸟(早晨学习10次)、夜猫子(晚上学习10次)、七日坚持、百小时、百次打卡五大成就
▎ 8. 管理员后台 — 查看所有用户的学习数据总览、按用户查询详情
▎ 9. 密码修改与缓存管理 — 支持修改密码、清除缓存

项目实现

本项目基于微信小程序原生框架开发,后端使用微信云开发(CloudBase)提供 Serverless 支持。

▎ 1. 前端架构:采用微信小程序原生框架,使用 Page 和 Component 构建页面。底部 TabBar
▎ 包含计时、记录、我的三个主页面。页面间通过全局 App 对象和路由参数传递数据。
▎ 2. 云函数后端:使用 wx-server-sdk 编写云函数(login),处理用户登录、注册业务逻辑,自动获取用户 OpenID
▎ 并与本地账号绑定。数据库使用微信云数据库(MongoDB),包含 users(用户表)和 study_records(学习记录表)两个集合。
▎ 3. 计时器实现:前端使用 setInterval
▎ 实现秒级计时,学习结束后将记录(学习内容、时长、日期、时间段、用户名)写入云数据库 study_records 集合,通过 username
▎ 字段关联用户。
▎ 4. 数据统计:在"我的"页面从云数据库中按当前用户名查询所有记录,前端计算总天数、总次数、总时长、时段分布(按
▎ startTime 的小时数归类)、学习连续天数(日期排序后计算间隔)、成就达成条件等。
▎ 5. 权限控制:用户登录后 Token 存储在本地 Storage 中,包含 role 字段区分普通用户和管理员。管理员后台通过 role
▎ 校验控制访问权限,管理员可以通过 adminViewUser 全局变量切换查看任意用户的学习记录。
▎ 6. 管理员功能:admin 页面查询所有 study_records 记录(limit 2000),按 username
▎ 分组汇总每个用户的总记录数和总时长,点击用户可跳转到该用户的详细记录页面。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论