一个基于 uni-app + Node.js + MySQL 的任务打卡微信小程序，帮助用户养成良好习惯，坚持每日打卡。
这是一个完整的全栈项目，包含：
- 前端：uni-app（Vue 2）开发的微信小程序
- 后端：Node.js + Express + MySQL
- 功能：微信登录、任务管理、每日打卡、数据统计、成就系统
- ✅ 微信一键登录
- ✅ 自定义头像和昵称（适配微信新规）
- ✅ 头像上传到服务器（永久保存）
- ✅ 个人信息管理
- ✅ 游客模式浏览
- ✅ 测试登录（开发环境）
- ✅ 创建任务（设置目标天数、选择分类）
- ✅ 任务分类：学习📚、运动🏃、阅读📖、健康💪、工作💼、其他📝
- ✅ 查看任务列表（全部/进行中/已完成）
- ✅ 任务详情查看
- ✅ 删除任务
- ✅ 每日打卡（支持拍照、添加备注）
- ✅ 打卡图片上传（腾讯云COS存储）🆕
- ✅ 支持拍照或从相册选择（最多9张）🆕
- ✅ 打卡记录查看（含图片预览）🆕
- ✅ 打卡日历视图（月历展示）
- ✅ 打卡状态实时显示
- ✅ 自动完成任务（达到目标天数）
- ✅ 防重复打卡
- ✅ 9种成就徽章（使用 Emoji 图标）
- ✅ 自动检测并解锁成就
- ✅ 打卡成功后弹窗提示新成就
- ✅ 成就中心查看所有成就及进度
- ✅ 每日首次打卡获得积分
- ✅ 连续打卡奖励（7天、30天）
- ✅ 积分明细查看
- ✅ 积分排行榜（TOP 100）
- ✅ 个人中心显示积分和连续天数
- ✅ 头像正常显示（服务器存储）
- ✅ 总任务数统计
- ✅ 总打卡数统计
- ✅ 最长连续打卡天数
- ✅ 月度打卡统计
- uni-app
- Vue 2（Options API）
- 自定义 TabBar（iconfont 图标）
- Node.js
- Express
- MySQL 8.0+
- JWT 认证
- axios
- multer（文件上传）
- cos-nodejs-sdk-v5（腾讯云COS）
.
├── testuniapp/ # 前端小程序
│ ├── pages/ # 页面
│ │ ├── index/ # 首页（任务列表）
│ │ ├── login/ # 登录页
│ │ ├── user/ # 个人中心
│ │ ├── profile-edit.vue # 编辑个人信息
│ │ ├── task/ # 任务相关
│ │ │ ├── create.vue # 创建任务
│ │ │ └── detail.vue # 任务详情
│ │ ├── checkin/ # 打卡页
│ │ ├── calendar/ # 打卡日历
│ │ ├── achievement/ # 成就中心
│ │ └── points/ # 积分相关
│ │ ├── records.vue # 积分明细
│ │ ├── ranking.vue # 积分排行榜
│ │ └── shop.vue # 积分商城
│ ├── components/ # 组件
│ │ └── custom-tabbar/ # 自定义 TabBar
│ ├── api/ # API 接口
│ ├── utils/ # 工具函数
│ │ ├── request.js # 请求封装
│ │ ├── auth.js # 认证工具
│ │ └── image.js # 图片工具（头像URL处理）
│ └── static/ # 静态资源（图标字体）
│
├── task-backend/ # 后端服务
│ ├── controllers/ # 控制器
│ │ ├── authController.js # 认证相关（含头像上传）
│ │ ├── taskController.js # 任务管理
│ │ ├── checkinController.js # 打卡管理
│ │ ├── achievementController.js # 成就系统
│ │ └── pointController.js # 积分系统
│ ├── routes/ # 路由
│ ├── middleware/ # 中间件（JWT 认证）
│ ├── config/ # 配置
│ │ ├── db.js # 数据库连接
│ │ ├── database.sql # 数据库结构
│ │ └── add-points-system.sql # 积分系统更新
│ ├── uploads/ # 上传文件目录
│ │ └── avatars/ # 用户头像
│ ├── check-points-system.js # 积分系统检查脚本
│ └── app.js # 入口文件
│
├── generate-token.js # JWT token 生成工具
└── README.md # 项目说明
- Node.js >= 14.0
- MySQL >= 5.7
- HBuilderX（用于开发 uni-app）
- 微信开发者工具
# 登录 MySQL
mysql -h 你的数据库地址 -u 用户名 -p
# 执行完整的数据库初始化脚本（推荐）
mysql -h 你的数据库地址 -u 用户名 -p < task-backend/config/init-database.sql注意： init-database.sql 包含了所有表结构，包括积分系统，无需再单独执行其他 SQL 文件。
如果你是从旧版本升级，可以单独执行积分系统更新：
mysql -h 你的数据库地址 -u 用户名 -p task_checkin < task-backend/config/add-points-system.sql# 进入后端目录
cd task-backend
# 安装依赖
npm install
# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，填入你的配置
# DB_HOST=你的数据库地址
# DB_USER=数据库用户名
# DB_PASSWORD=数据库密码
# DB_NAME=task_checkin
# JWT_SECRET=你的密钥
# WECHAT_APPID=你的小程序AppID
# WECHAT_SECRET=你的小程序Secret
# COS_SECRET_ID=腾讯云SecretId（用于图片上传）
# COS_SECRET_KEY=腾讯云SecretKey
# COS_BUCKET=COS存储桶名称
# COS_REGION=COS地域（如ap-guangzhou）
# 启动后端服务
npm start后端服务将运行在 http://localhost:3003
# 用 HBuilderX 打开 taskuniapp 目录
# 修改 API 地址
# 编辑 taskuniapp/utils/request.js
# 将 baseURL 改为你的后端地址对于真机调试，需要使用局域网 IP：
// taskuniapp/utils/request.js
const baseURL = "http://192.168.x.x:3003/api"; // 替换为你的局域网IP- 在微信公众平台注册小程序，获取 AppID 和 Secret
- 在
taskuniapp/manifest.json中填入你的 AppID - 在后端
.env文件中填入 AppID 和 Secret - 用微信开发者工具打开
taskuniapp目录 - 编译运行
详见 task-backend/API_STATUS_CODES.md
POST /api/auth/login- 微信登录POST /api/auth/test-login- 测试登录（开发用）GET /api/auth/user- 获取用户信息PUT /api/auth/user- 更新用户信息POST /api/auth/upload-avatar- 上传头像
GET /api/tasks- 获取任务列表POST /api/tasks- 创建任务（支持分类）GET /api/tasks/:id- 获取任务详情DELETE /api/tasks/:id- 删除任务
POST /api/checkins- 创建打卡记录GET /api/checkins/task/:taskId- 获取任务打卡记录GET /api/checkins/check/:taskId- 检查今日是否已打卡GET /api/checkins/monthly-calendar- 获取月度打卡日历
GET /api/achievements- 获取用户成就列表
GET /api/points- 获取用户积分信息GET /api/points/records- 获取积分记录GET /api/points/ranking- 获取积分排行榜
- 每个任务每天只能打卡一次
- 打卡后
total_days自动 +1 - 当
total_days >= target_days时，任务自动完成（status=0） - 已完成的任务不能再打卡
- 打卡成功后自动检测并解锁成就
status=1：进行中status=0：已完成
study：学习 📚（蓝色）sport：运动 🏃（橙色）read：阅读 📖（紫色）health：健康 💪（绿色）work：工作 💼（红色）other：其他 📝（灰色）
9种成就徽章，自动解锁：
- 🌱 新手上路 - 完成第1次打卡
- 🔥 初露锋芒 - 连续打卡7天
- ⭐ 坚持不懈 - 连续打卡30天
- 💎 习惯大师 - 连续打卡100天
- 🏆 任务达人 - 完成10个任务
- 👑 任务专家 - 完成50个任务
- 🎯 打卡狂人 - 累计打卡100次
- 🌟 年度冠军 - 累计打卡365次
- 🎨 全能选手 - 同时进行5个任务
积分系统新增了以下数据库表和字段：
users 表新增字段：
points- 用户积分consecutive_days- 连续打卡天数last_checkin_date- 最后打卡日期
新增表：
point_records- 积分记录表daily_checkin_log- 每日打卡日志表
- 每日打卡提醒：在设定的时间自动发送微信订阅消息
- 智能提醒：只在未打卡时发送，避免重复提醒
- 灵活配置：用户可自定义提醒时间和开关
- 一次性订阅：用户授权后可发送一次提醒，打卡后可重新订阅
订阅系统新增了以下数据库表：
新增表：
user_subscriptions- 用户订阅记录表reminder_settings- 提醒设置表message_logs- 消息发送日志表
详见 订阅消息配置指南
快速开始：
- 在微信公众平台配置订阅消息模板
- 修改前端代码中的模板ID
- 执行数据库更新脚本
- 安装依赖并重启服务
- 在小程序中设置提醒时间并订阅
- 每日首次打卡：+1 积分（每天只有第一次打卡获得积分）
- 连续打卡奖励：
- 每连续 7 天：+5 积分
- 每连续 30 天：+20 积分
- 可同时触发多个奖励（如 210 天同时获得 7 天和 30 天奖励）
- 只要当天有任意一个任务打卡，就算连续
- 不需要每天打卡同一个任务
- 中断后重新开始计算
- 积分明细：查看所有积分获得记录，包括任务信息、打卡时间、积分来源
- 积分排行榜：查看 TOP 100 用户排名，显示用户积分和连续天数
- 积分商城：预留功能，即将上线
- 个人中心：显示当前积分和连续打卡天数
Q: 为什么打卡了但没有积分？ A: 检查是否是当天第一次打卡。如果已经打卡过其他任务，就不会再获得积分。
Q: 连续打卡天数如何计算？ A: 只要今天有任意一个任务打卡，就算连续。不需要每天打卡同一个任务。
Q: 积分可以用来做什么？ A: 目前积分主要用于排行榜展示。后续将上线积分商城，可兑换虚拟商品、实物礼品等。
由于微信在 2024年10月 废弃了 getUserProfile API，现在使用新方式：
- 头像：使用
button的open-type="chooseAvatar"属性 - 昵称：使用
input的type="nickname"属性 - 用户登录后跳转到个人信息编辑页完善信息
- 可随时在个人中心修改头像和昵称
为了解决微信临时文件路径（wxfile://temp/）在小程序重启后失效的问题，项目实现了头像上传功能：
- 前端：用户选择头像后，自动上传到服务器
- 后端：使用 multer 处理文件上传，保存到
uploads/avatars/目录 - 数据库：存储相对路径（如
/uploads/avatars/avatar-xxx.jpeg） - 显示：前端使用工具函数自动拼接完整 URL
工具函数：utils/image.js 提供 getAvatarUrl() 方法，自动将相对路径转换为完整 URL。
使用示例：
<image :src="getAvatarUrl(userInfo.avatar_url)" />- 新用户：首次登录后跳转到个人信息编辑页
- 老用户：直接跳转到首页
- 游客模式：支持游客浏览，登录后自动刷新状态
-
确保手机和电脑在同一局域网
-
获取电脑局域网 IP：
# macOS/Linux ifconfig | grep "inet " # Windows ipconfig
-
修改前端 API 地址为局域网 IP
-
后端确保监听
0.0.0.0（已配置） -
在微信开发者工具中选择真机调试
开发环境提供了测试登录功能，无需真实微信登录：
- 点击登录页的"测试登录（开发用）"按钮
- 自动使用测试账号登录
项目使用 iconfont 字体图标，支持动态改变颜色。
如需替换图标：
- 访问 https://www.iconfont.cn/
- 选择图标并生成字体文件
- 替换
testuniapp/static/下的字体文件 - 更新
components/custom-tabbar/custom-tabbar.vue中的图标类名
当前图标类名：
icon-task- 任务图标icon-user- 用户图标
颜色配置：
- 未选中：
#999999 - 选中：
#667eea（紫色）
- 检查后端是否启动
- 检查 API 地址是否正确
- 真机调试需要使用局域网 IP，不能用 localhost
- 检查 AppID 和 Secret 是否正确
- 检查小程序是否在微信公众平台配置了服务器域名
- 开发环境可以在微信开发者工具中勾选"不校验合法域名"
- 这是正常的，微信已废弃
getUserProfileAPI - 用户需要在个人信息编辑页手动选择头像和输入昵称
- 使用
open-type="chooseAvatar"和type="nickname"获取
- 检查数据库地址、用户名、密码是否正确
- 检查数据库是否允许远程连接
- 检查防火墙是否开放 MySQL 端口（默认 3306）
- 检查字体文件路径是否正确（
static/iconfont.*） - 检查
iconfont.css中的@font-face路径 - 确保图标类名与 CSS 中定义的一致
- 成就在打卡成功后自动检测
- 检查后端日志确认成就检测逻辑是否执行
- 查看
achievements表确认数据是否写入
- 确认已执行积分系统数据库更新脚本
- 检查后端服务是否重启
- 查看前端控制台是否有错误信息
- 确认 API 路径正确（
/api/points）
问题原因：微信临时文件路径（wxfile://temp/）在小程序重启后失效
解决方案：
- 确保后端服务正在运行
- 在个人信息编辑页重新选择头像
- 保存后头像会自动上传到服务器
- 检查
uploads/avatars/目录是否有写入权限
验证方法：
- 查看数据库中的
avatar_url字段 - 应该是
/uploads/avatars/avatar-xxx.jpeg格式 - 不应该是
wxfile://temp/开头
问题原因：数据库缺少积分系统相关字段
解决方案：
# 检查积分系统是否初始化
cd task-backend
node check-points-system.js
# 如果未初始化，执行更新脚本
mysql -u root -p task_checkin < config/add-points-system.sql问题原因：模板ID未配置或订阅状态失效
解决方案：
- 在微信公众平台配置订阅消息模板
- 修改前端代码中的模板ID
- 执行数据库更新脚本：
mysql -u root -p task_checkin < config/add-subscription-system.sql - 重启后端服务
- 在小程序中重新订阅
详见 订阅消息配置指南
问题原因：腾讯云COS未配置或配置错误
解决方案：
- 检查
.env文件中的COS配置是否正确 - 确认存储桶权限设置为"公有读私有写"
- 检查密钥是否有效
- 查看后端日志：
pm2 logs task-backend - 测试上传接口是否正常
详见 腾讯云COS配置指南
问题原因：存储桶权限或跨域配置问题
解决方案：
- 确保存储桶设置为"公有读"
- 在COS控制台配置跨域规则（CORS）
- 检查图片URL是否正确
- 在浏览器中直接访问图片URL测试
项目提供了一些测试工具帮助开发和调试：
cd task-backend
node check-points-system.js这个脚本会检查：
- users 表是否有积分相关字段
- point_records 表是否存在
- daily_checkin_log 表是否存在
cd task-backend
node test-subscription.js这个脚本会检查：
- 数据库表是否创建
- 环境变量是否配置
- 用户订阅状态
- 消息发送日志
- 待发送的提醒列表
项目提供了一键部署脚本，可以快速部署到服务器：
# 1. 配置服务器信息
vim deploy.config.sh
# 2. 给脚本添加执行权限
chmod +x deploy-to-server.sh
# 3. 执行部署
./deploy-to-server.sh重要特性：
- 🛡️ 自动保护 uploads 目录（用户上传的头像不会被覆盖）
- 📦 智能打包（排除 node_modules、.git 等）
- 🔄 零停机部署（使用 PM2 平滑重启）
- 💾 自动备份（每次部署前备份当前版本）
- ✅ 健康检查（部署后自动测试接口）
详细说明请查看 DEPLOY_GUIDE.md
详见 task-backend/DEPLOYMENT.md
- 将代码上传到服务器
- 安装 Node.js 和 MySQL
- 配置
.env文件 - 使用 PM2 管理进程：
npm install -g pm2 pm2 start app.js --name task-backend pm2 save pm2 startup
- 在微信公众平台配置服务器域名（request、uploadFile、downloadFile）
- 在 HBuilderX 中点击"发行" -> "小程序-微信"
- 上传代码到微信公众平台
- 提交审核
MIT
开发于 2026年2月
- ✅ 新增打卡图片上传功能
- ✅ 支持拍照或从相册选择（最多9张）
- ✅ 图片自动上传到腾讯云COS
- ✅ 打卡记录显示图片
- ✅ 支持图片预览和删除
- ✅ 按年月组织存储路径
- ✅ 新增订阅消息系统
- ✅ 每日打卡提醒功能
- ✅ 提醒设置页面（自定义时间、开关）
- ✅ 打卡成功后自动提示订阅
- ✅ 定时任务自动发送提醒
- ✅ 订阅状态管理
- ✅ 消息发送日志记录
- ✅ 新增头像上传功能（永久保存到服务器）
- ✅ 修复头像显示问题（临时路径失效）
- ✅ 优化登录流程（新用户/老用户区分）
- ✅ 修复游客模式状态同步问题
- ✅ 修复积分排行榜 SQL 语法错误
- ✅ 优化个人信息编辑页（自动加载现有信息）
- ✅ 新增图片工具函数（统一处理头像 URL）
- ✅ 新增积分系统检查脚本
- ✅ 优化积分明细显示（显示任务信息、打卡时间、积分来源）
- ✅ 新增积分商城页面（敬请期待）
- ✅ 修复页面底部内容被遮挡问题
- ✅ 优化页面滚动体验
- ✅ 新增积分系统
- ✅ 每日首次打卡获得积分
- ✅ 连续打卡奖励（7天、30天）
- ✅ 积分明细页面
- ✅ 积分排行榜（TOP 100）
- ✅ 个人中心显示积分和连续天数
- ✅ 打卡成功显示积分奖励
- ✅ 新增打卡日历视图（月历展示）
- ✅ 新增任务分类/标签功能（6种分类）
- ✅ 新增成就系统（9种成就徽章）
- ✅ 优化任务列表显示（显示分类标签）
- ✅ 优化打卡成功提示（显示新解锁成就）
- ✅ 适配微信新规（头像昵称获取方式）
- ✅ 新增个人信息编辑页
- ✅ 新增测试登录功能
- ✅ 优化用户体验
- ✅ 完成基础功能开发
- ✅ 微信登录
- ✅ 任务管理
- ✅ 打卡功能
- ✅ 用户信息管理
- ✅ 数据统计