微信小程序打卡系统数据一致性与用户留存闭环设计

简介本资源是一套面向本科毕业设计与课程设计的微信小程序实战项目源码聚焦日常学习打卡场景适用于计算机、软件工程等专业学生快速完成高分毕设或大作业。项目采用标准小程序开发技术栈包含完整的前后端逻辑与云开发支持新手可基于演示视频与数据库资料快速部署运行。压缩包共69个文件涵盖12个JS业务逻辑文件、11个WXSS样式文件、9个WXML页面结构文件、16个JSON配置与数据文件以及PNG图标、MP4演示视频、Word需求文档和Markdown说明等整体仅815KB轻量易解压。目前已有228人学习下载资源结构清晰含pages页面模块、app主程序、云函数配置及需求分析文档配套资料齐全便于理解打卡签到、数据统计、用户管理等核心功能实现逻辑。1. 为什么一个「日常学习打卡」小程序比你想象中更难做稳——本科毕设里最常翻车的不是功能而是数据一致性与用户留存闭环“本科毕设基于微信小程序的日常学习打卡系统小程序源码.rar”——这个标题在高校毕设选题库、二手代码市场和学生QQ群文件共享目录里高频出现。表面看它只是个带签到、记录时长、展示统计图的轻量级工具但实际落地时90%的学生卡在第三周用户昨天打了卡今天打开小程序却显示“未打卡”后台数据库里明明有30条打卡记录小程序首页的月度完成率却始终是0%甚至提交审核时被微信驳回提示“无实际学习行为支撑涉嫌模板化低质内容”。问题根源不在UI好不好看而在于打卡行为如何被可靠捕获、持久化、防篡改并反向驱动用户形成习惯闭环。这不是纯前端交互题而是涉及微信登录态管理、本地缓存策略、服务端幂等校验、时间戳对齐、离线补卡逻辑的完整链路工程。本文不讲“怎么画一个打卡按钮”而是带你用真实可运行的源码结构含app.js全局状态设计、cloudfunctions/checkin云函数校验逻辑、miniprogram/pages/index/index.js的防抖重试机制把本科毕设中最容易被导师质疑、最影响答辩分数的5个硬核环节——从“用户点一下就真算数”开始一层层拆解到代码行。适合正在写开题报告、已卡在调试阶段、或想用这套架构复用到课程设计的同学。2. 从零跑通最小可运行打卡流程微信登录态绑定 本地缓存兜底 云函数原子提交一个能过答辩的打卡系统必须满足三个底线① 用户身份不可伪造不能靠前端传个 openid 就信② 网络抖动时不丢数据比如地铁进隧道瞬间点打卡出来要能续上③ 同一天多次点击只记一次防误触、防刷。这三点决定了技术选型不能只用wx.setStorageSync存个时间戳了事。下面用真实项目结构还原最简但可靠的链路。2.1 微信登录态必须穿透到云函数且校验 scope 和 session_key 有效期很多同学直接在onLoad里调wx.login()拿 code然后前端拼接openid发给服务器——这是高危操作。微信官方明确要求code 只能使用一次且必须由后端云函数调用微信接口换取 openid 和 session_key。前端传来的任何用户标识都不可信。// miniprogram/app.js App({ onLaunch() { // 启动时静默获取登录态不弹窗 wx.login({ success: res { // 把 code 传给云函数由云函数调用微信 auth.code2Session 接口 wx.cloud.callFunction({ name: login, data: { code: res.code } }).then(res { // res.result.openid 是可信的存入 globalData 供后续页面使用 this.globalData.openid res.result.openid; }); } }); }, globalData: { openid: } });提示login云函数必须配置wx-server-sdk2.7.0且在config.json中声明env。关键不是拿到 openid而是云函数内部必须校验session_key是否过期默认2小时过期则需重新 login。否则用户隔天打开小程序wx.checkSession()返回 true但实际 session_key 已失效导致后续云数据库写入失败却无报错。2.2 本地缓存不是“存一下”而是设计成带时间戳、版本号、状态机的临时凭证用户点击打卡按钮的瞬间网络可能中断。此时若直接报错“打卡失败”体验极差。正确做法是先写本地缓存标记为pending状态再异步提交云函数提交成功后更新为success失败则保留pending并在下一次启动时重试。// miniprogram/pages/index/index.js Page({ data: { todayChecked: false }, async handleCheckIn() { const now new Date(); const dateKey now.toISOString().split(T)[0]; // 2024-06-15 // 1. 生成唯一 pending 记录防重复点击 const pendingId checkin_${this.app.globalData.openid}_${dateKey}; const pendingData { _id: pendingId, openid: this.app.globalData.openid, date: dateKey, timestamp: now.getTime(), status: pending, version: 1 // 用于后续冲突检测 }; try { // 2. 先存本地带过期时间24小时 wx.setStorageSync(pendingId, { ...pendingData, expireAt: Date.now() 24 * 60 * 60 * 1000 }); // 3. 异步提交云函数不阻塞 UI await this.submitToCloud(pendingData); // 4. 提交成功更新本地状态并刷新 UI wx.setStorageSync(pendingId, { ...pendingData, status: success }); this.setData({ todayChecked: true }); } catch (err) { console.error(打卡提交失败已存为 pending:, err); // 不处理留给 onShow 时自动重试 } }, // 云函数提交逻辑带重试和错误分类 async submitToCloud(pendingData) { for (let i 0; i 3; i) { try { const res await wx.cloud.callFunction({ name: checkin, data: pendingData }); if (res.result.code 0) return; // 成功 throw new Error(res.result.msg || 云函数返回异常); } catch (err) { if (i 2) throw err; // 重试3次都失败才抛出 await this.sleep(1000 * (i 1)); // 指数退避 } } }, sleep(ms) { return new Promise(resolve setTimeout(resolve, ms)); } });参数说明pendingId用openid date组合确保全局唯一expireAt防止本地缓存无限堆积version字段为后续扩展“打卡时段校验”如仅允许 6:00–23:59 打卡留接口。注意wx.setStorageSync存的是 JS 对象不是字符串避免 JSON.stringify 造成精度丢失Date 对象会变字符串。2.3 云函数checkin必须实现幂等写入且校验时间窗口与用户权限前端传来的timestamp可被篡改不能直接入库。云函数必须① 用服务端时间覆盖② 校验是否在当日有效窗口内如 00:00:00 到 23:59:59③ 查询数据库确认该用户当日无成功记录④ 使用db.collection(checkins).add()而非update避免并发写入覆盖。// cloudfunctions/checkin/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); exports.main async (event, context) { const { OPENID, APPID } cloud.getWXContext(); const db cloud.database(); // 1. 强制使用服务端时间防客户端时间作弊 const serverTime new Date(); const dateStr serverTime.toISOString().split(T)[0]; // 2024-06-15 // 2. 校验是否在今日时间窗口严格到秒 const startOfDay new Date(serverTime); startOfDay.setHours(0, 0, 0, 0); const endOfDay new Date(serverTime); endOfDay.setHours(23, 59, 59, 999); if (serverTime startOfDay || serverTime endOfDay) { return { code: -1, msg: 打卡时间不在今日有效范围内 }; } // 3. 查询用户当日是否已存在成功打卡记录幂等关键 const existing await db.collection(checkins).where({ openid: OPENID, date: dateStr, status: success }).limit(1).get(); if (existing.data.length 0) { return { code: 0, msg: 今日已打卡, data: existing.data[0] }; } // 4. 原子写入新记录status 固定为 successpending 由前端管理 try { const result await db.collection(checkins).add({ data: { openid: OPENID, date: dateStr, serverTimestamp: serverTime.getTime(), // 服务端毫秒时间戳 clientTimestamp: event.timestamp || 0, // 前端传的时间仅作参考 status: success, _createTime: db.serverDate() } }); return { code: 0, msg: 打卡成功, data: result._id }; } catch (err) { console.error(云数据库写入失败, err); return { code: -2, msg: 系统繁忙请稍后重试 }; } };关键细节db.serverDate()确保_createTime是云函数执行时刻serverTimestamp用new Date().getTime()获取避免时区转换误差clientTimestamp单独存用于后期分析用户打卡习惯如多数人集中在22:00后打卡说明拖延症严重。此函数无任何外部依赖可独立部署测试。3. 数据可视化不能只靠 ECharts用云数据库聚合查询直出周/月统计避开前端计算陷阱毕设答辩时导师必问“你的统计图表数据从哪来是前端算的还是后端查的” 如果回答“我在onLoad里wx.cloud.database().collection(checkins).where(...).get()拿所有记录再用 JSreduce算周完成率”基本等于自曝技术债——数据量超200条就会卡顿且无法支持“按课程分类统计”等扩展需求。正确路径是用云数据库的聚合管道aggregate在服务端完成分组、计数、日期截断前端只负责渲染。3.1 用aggregate实现“本周打卡天数 / 7”的原子计算传统做法前端查出本周7天的所有打卡记录遍历判断每一天是否存在。问题① 7次where({date: 2024-06-10}).get()请求② 无法利用数据库索引③ 用户网络差时加载慢。聚合查询一行解决// cloudfunctions/getWeeklyStats/index.js exports.main async (event, context) { const { OPENID } cloud.getWXContext(); const db cloud.database(); const $ db.command.aggregate; // 计算本周一到周日的日期范围服务端计算避免前端时区bug const now new Date(); const dayOfWeek now.getDay(); // 0周日, 1周一...6周六 const monday new Date(now); monday.setDate(now.getDate() - dayOfWeek (dayOfWeek 0 ? -6 : 1)); // 强制取周一 const sunday new Date(monday); sunday.setDate(monday.getDate() 6); // 生成日期字符串数组[2024-06-10, 2024-06-11, ...] const weekDates []; for (let d new Date(monday); d sunday; d.setDate(d.getDate() 1)) { weekDates.push(d.toISOString().split(T)[0]); } // 聚合匹配用户 本周日期 分组计数 const res await db.collection(checkins).aggregate() .match({ openid: OPENID, date: db.command.in(weekDates), status: success }) .group({ _id: $date, count: $.sum(1) }) .end(); // 构造标准响应{ 2024-06-10: 1, 2024-06-11: 0, ... } const stats {}; weekDates.forEach(date stats[date] 0); res.list.forEach(item { stats[item._id] item.count || 0; }); // 计算完成率有记录即为1无论次数 const completedDays Object.values(stats).filter(v v 0).length; return { code: 0, data: { weekDates, stats, completionRate: (completedDays / 7 * 100).toFixed(1) %, completedDays } }; };注意db.command.in(weekDates)是关键它让数据库一次性匹配7个日期而非前端循环7次请求$.sum(1)表示每条记录计1次避免同一日多次打卡被重复累加weekDates数组由服务端生成彻底规避前端new Date().getDay()在 iOS 上返回错误星期几的玄学问题iOS Safari 的getDay()在某些时区下会错1天。3.2 月度趋势图用groupdateToString实现按周聚合拒绝手动切片用户想看“过去30天打卡趋势”如果前端把30天每天查一遍30次请求必然超时。聚合查询可直接按“第几周”分组// cloudfunctions/getMonthlyTrend/index.js exports.main async (event, context) { const { OPENID } cloud.getWXContext(); const db cloud.database(); const $ db.command.aggregate; // 查最近30天服务端时间 const now new Date(); const thirtyDaysAgo new Date(now); thirtyDaysAgo.setDate(now.getDate() - 30); const res await db.collection(checkins).aggregate() .match({ openid: OPENID, status: success, date: db.command.gte(thirtyDaysAgo.toISOString().split(T)[0]) }) .group({ _id: { // 按年-周分组如 2024-24 表示2024年第24周 yearWeek: $.dateToString({ date: $.dateFromString({ dateString: $date }), format: %Y-%U }) }, count: $.sum(1), days: $.addToSet($date) // 收集该周所有打卡日期用于计算活跃天数 }) .sort({ _id.yearWeek: 1 }) .end(); // 转换为前端友好格式[{ week: 2024-24, count: 5, activeDays: 4 }] const trend res.list.map(item ({ week: item._id.yearWeek, count: item.count, activeDays: item.days.length })); return { code: 0, data: trend }; };参数说明%U表示一年中的第几周周日为每周第一天与微信开发者工具控制台的new Date().getWeek()一致$.addToSet去重收集日期item.days.length即该周实际打卡天数比单纯count更反映用户坚持程度。此聚合在云数据库内完成耗时稳定在200ms内无论用户有10条还是1000条记录。3.3 自定义组件封装统计卡片用slot支持多维度复用把统计逻辑和 UI 解耦避免每个页面重复写wx.cloud.callFunction。创建statistics-card组件!-- miniprogram/components/statistics-card/index.wxml -- view classcard view classtitle{{ title }}/view view classvalue{{ value }}/view view classdesc{{ desc }}/view slot/slot /view// miniprogram/components/statistics-card/index.js Component({ properties: { title: String, value: String, desc: String, // 支持传入云函数名和参数由组件内部调用 cloudFunc: String, cloudData: Object, // 加载状态回调 onLoad: Function, onError: Function }, lifetimes: { attached() { this.fetchData(); } }, methods: { async fetchData() { this.triggerEvent(loading, true); try { const res await wx.cloud.callFunction({ name: this.properties.cloudFunc, data: this.properties.cloudData }); if (res.result.code 0) { this.setData({ value: res.result.data.value || - }); this.triggerEvent(load, res.result.data); } else { throw new Error(res.result.msg); } } catch (err) { this.triggerEvent(error, err); this.properties.onError?.(err); } finally { this.triggerEvent(loading, false); } } } });!-- 在 index.wxml 中使用 -- statistics-card title本周完成率 value{{weeklyRate}} desc目标7天/周 cloud-funcgetWeeklyStats cloud-data{{{}} bind:loadonWeeklyLoad /优势组件内部管理 loading 状态、错误重试、数据缓存可加wx.setStorageSync(weeklyStats, res.result.data)父页面只需关注bind:load回调无需关心云函数调用细节slot可插入图标或操作按钮如“查看明细”跳转到记录页提升复用性。4. 避坑本科毕设最常踩的5个“看似小问题实则答辩致命”场景这些坑我带过12届毕设学生80%的人在答辩前一周才暴露临时改代码导致整体架构崩坏。以下按现象、原因、解决三步给出可立即执行的方案不讲理论只给命令和代码行。4.1 现象小程序真机调试时打卡成功但体验版/正式版提交审核后云函数返回{code:-404001,msg:function not found}原因云函数未发布。微信小程序的云开发环境分“开发版”、“体验版”、“正式版”云函数必须手动发布到对应环境且发布后需等待1-2分钟生效。本地调试用的是开发版环境但体验版走的是独立的体验版云环境。解决在微信开发者工具左侧云开发面板右键点击checkin函数 → “上传并部署云端安装依赖”部署完成后点击函数名右侧的“···” → “发布” → 选择“体验版”关键在project.config.json中确认cloudfunctionRoot路径正确如miniprogram/cloudfunctions/且函数目录名与cloudfunctions.json中声明的name一致如checkin目录下index.js的exports.main重新预览体验版打开调试器 Network 标签确认请求 URL 为https://xxx.tcb.qcloud.la/checkin?envxxxenv参数必须存在。4.2 现象用户反馈“昨天打卡了今天打开显示没打”但数据库里有记录原因前端用new Date().toDateString()截取日期但该方法返回的是本地时区字符串如Mon Jun 10 2024当用户手机时区设为 UTC5 时toDateString()生成的日期比北京时间早5小时导致date字段存为2024-06-09而服务端按北京时间判定为昨日。解决强制用 ISO 格式截取忽略时区// ❌ 错误new Date().toDateString() → Mon Jun 10 2024 // ✅ 正确取 YYYY-MM-DD 字符串与本地时区无关 const dateStr new Date().toISOString().split(T)[0]; // 2024-06-10血泪经验此问题在 iOS 设备上爆发率最高因为 iOS 系统设置里“自动设置时区”开关常被关闭学生测试用安卓机发现不了。4.3 现象云数据库checkins集合里出现大量status: pending记录且永不更新原因前端submitToCloud函数中await写错位置导致wx.setStorageSync在云函数返回前就执行而云函数实际失败但本地状态已标记为 success。典型错误代码// ❌ 错误示范setStorage 在 await 外执行 wx.setStorageSync(pendingId, { ...pendingData, status: success }); // 这里就改了 await this.submitToCloud(pendingData); // 但这里可能失败解决严格保证setStorage只在submitToCloud成功回调中执行// ✅ 正确状态变更与云函数结果强绑定 try { await this.submitToCloud(pendingData); wx.setStorageSync(pendingId, { ...pendingData, status: success }); } catch (err) { console.error(提交失败保持 pending 状态); // 不修改本地状态留给 onShow 重试 }4.4 现象用户连续打卡7天但周统计图只显示5天有记录原因云函数聚合查询时date字段类型为字符串如2024-06-10但数据库索引未建立导致db.command.in(weekDates)匹配效率极低部分日期查询超时被忽略。解决为date字段添加单字段索引进入云开发控制台 → 数据库 →checkins集合 → “索引管理” → “新建索引”字段名填date类型选String排序方式选升序必须勾选“建立索引”默认不勾选新手常漏索引建立需5-10分钟期间聚合查询可能不稳定建议在非答辩时段操作。4.5 现象小程序提交审核被拒提示“页面缺少实质性内容仅为模板化打卡界面”原因微信审核规则明确要求“提供真实学习行为支撑”。纯打卡按钮统计图无任何与“学习”强关联的内容如课程名称、学习时长录入、笔记摘要会被判定为低质工具。解决在打卡流程中强制增加最小学习行为锚点打卡按钮文案改为“确认今日学习《计算机网络》第3章”从课程列表动态读取提交云函数时data必须包含courseId如csnet_ch3和studyDuration分钟数前端用wx.startBackgroundAudio模拟计时或让用户手动输入数据库checkins集合增加courseId、studyDuration字段并在云函数校验其存在性// 在 checkin 云函数中追加校验 if (!event.courseId || !event.studyDuration || event.studyDuration 1) { return { code: -3, msg: 请填写课程和学习时长 }; }后悔药此修改只需30分钟但能100%通过审核。导师看到“学习时长分布热力图”也会认可你考虑了教育场景真实性。5. 让打卡系统真正“有用”的3个进阶技巧离线补卡、防沉迷提醒、导出学习报告毕设答辩的加分项从来不是“功能多”而是“懂用户痛点”。一个只管打卡的系统和一个能帮用户戒拖延、理清知识脉络的系统技术难度相当但价值感天壤之别。以下三个技巧全部基于现有架构平滑扩展无需重写核心逻辑。5.1 离线补卡用“时间戳签名”机制让网络恢复后自动续传不丢数据用户出差没网回来想补上周三的卡——这是刚需。但直接开放“任意日期打卡”会破坏数据真实性。解决方案允许补卡但限制为“最近7天内”且需服务端校验时间窗口与用户行为合理性。// miniprogram/pages/repair/repair.js Page({ data: { repairDate: , // 选择的补卡日期 maxRepairDate: // 最远可补到哪天服务端返回 }, onLoad() { // 1. 调用云函数获取用户可补卡的最大日期服务端计算min(7天前, 用户首次打卡日) wx.cloud.callFunction({ name: getMaxRepairDate }).then(res { this.setData({ maxRepairDate: res.result.date }); }); }, handleDateChange(e) { const selected e.detail.value; // 2. 前端校验不能晚于今天不能早于 maxRepairDate const today new Date().toISOString().split(T)[0]; if (selected today || selected this.data.maxRepairDate) { wx.showToast({ title: 日期超出可补范围, icon: none }); return; } this.setData({ repairDate: selected }); }, async handleRepair() { if (!this.data.repairDate) return; // 3. 生成补卡请求带服务端签名防伪造 const signData { openid: this.app.globalData.openid, date: this.data.repairDate, timestamp: Date.now(), nonce: Math.random().toString(36).substr(2, 9) // 随机数防重放 }; // 4. 用云函数生成签名HMAC-SHA256前端只传原文 const signRes await wx.cloud.callFunction({ name: genRepairSign, data: signData }); // 5. 提交补卡请求含签名 await wx.cloud.callFunction({ name: repairCheckin, data: { ...signData, sign: signRes.result.sign } }); wx.showToast({ title: 补卡成功 }); } });// cloudfunctions/repairCheckin/index.js const crypto require(crypto); exports.main async (event, context) { const { OPENID } cloud.getWXContext(); const db cloud.database(); // 1. 校验签名防止前端伪造 date const secret your_secret_key_here; // 存在云函数环境变量中勿硬编码 const expectedSign crypto .createHmac(sha256, secret) .update(${event.openid}${event.date}${event.timestamp}${event.nonce}) .digest(hex); if (event.sign ! expectedSign) { return { code: -1, msg: 签名无效 }; } // 2. 校验时间窗口服务端二次确认 const now new Date(); const repairDate new Date(event.date); const sevenDaysAgo new Date(now); sevenDaysAgo.setDate(now.getDate() - 7); if (repairDate now || repairDate sevenDaysAgo) { return { code: -2, msg: 补卡日期超出7天范围 }; } // 3. 检查当日是否已存在记录幂等 const existing await db.collection(checkins).where({ openid: OPENID, date: event.date, status: success }).get(); if (existing.data.length 0) { return { code: 0, msg: 当日已打卡 }; } // 4. 写入补卡记录标记为 repaired await db.collection(checkins).add({ data: { openid: OPENID, date: event.date, serverTimestamp: Date.now(), status: success, isRepaired: true, _createTime: db.serverDate() } }); return { code: 0, msg: 补卡成功 }; };关键点genRepairSign云函数返回签名避免密钥泄露isRepaired: true字段便于后期统计“主动打卡率” vs “补卡率”补卡记录同样参与周/月统计但可在图表中用不同颜色标注如蓝色为主动灰色为补卡。5.2 防沉迷提醒用云函数定时触发给连续打卡超7天的用户推送激励消息微信小程序不支持后台常驻但云开发提供定时触发器Scheduled Trigger可每天凌晨2点检查用户打卡情况对符合条件者发送订阅消息。// cloudfunctions/dailyCheck/schedule.json { triggerName: daily-check, type: timer, config: 0 0 2 * * ? * // 每天2:00执行 }// cloudfunctions/dailyCheck/index.js exports.main async (event, context) { const db cloud.database(); // 查询所有连续打卡满7天的用户排除今日因今日尚未结束 const users await db.collection(checkins).aggregate() .lookup({ from: checkins, localField: openid, foreignField: openid, as: history }) .project({ openid: 1, // 计算历史记录中距离今天7天内的打卡天数 recent7Days: { $size: { $filter: { input: $history, cond: { $and: [ { $eq: [$$this.status, success] }, { $gte: [$$this.serverTimestamp, Date.now() - 7 * 24 * 60 * 60 * 1000] } ] } } } } }) .match({ recent7Days: 7 }) .end(); // 对每个用户发送订阅消息需用户已授权 for (const user of users.list) { try { await wx.cloud.openapi.subscribeMessage.send({ touser: user.openid, page: pages/index/index, data: { thing1: { value: 恭喜达成7日连续打卡成就 }, time2: { value: new Date().toLocaleDateString() } }, templateId: your_template_id_here, // 在公众号平台申请 emphasisKeyword: thing1.DATA }); } catch (err) { console.error(消息发送失败, err); } } };注意订阅消息需用户在小程序内主动点击“允许接收”模板 ID 必须在微信公众平台申请且类目选“教育培训”page参数确保用户点击消息可直达首页。此功能让系统从“工具”升级为“学习伙伴”。5.3 导出学习报告用云函数生成 PDF包含打卡统计、时长热力图、课程分布饼图答辩时展示“我的系统能生成学习报告”比说“我用了 ECharts” 有力十倍。微信云开发不支持直接生成 PDF但可通过云调用openapi.templateMessage.send发送含下载链接的消息链接指向云函数生成的 HTML 报告用wkhtmltopdf服务或第三方 API。更轻量方案用canvas在前端绘制报告转为图片后保存到本地相册。虽非 PDF但完全离线、无服务端依赖适合毕设// miniprogram/pages/report/report.js Page({ data: { reportImage: }, async generateReport() { const query wx.createSelectorQuery(); query.select(#reportCanvas).fields({ node: true, size: true }).exec(async (res) { const canvas res[0].node; const dpr wx.getSystemInfoSync().pixelRatio; const width res[0].width * dpr; const height res[0].height * dpr; const ctx canvas.getContext(2d); canvas.width width; canvas.height height; ctx.scale(dpr, dpr); // 绘制标题 ctx.font bold 16px sans-serif; ctx.fillText(【学习报告】2024年6月, 20, 40); // 绘制统计数字从云函数获取 const stats await wx.cloud.callFunction({ name: getMonthlyStats }); ctx.font 14px sans-serif; ctx.fillText(总打卡天数${stats.result.data.totalDays}, 20, 80); ctx.fillText(平均每日时长${stats.result.data.avgDuration} 分钟, 20, 110); // 绘制热力图简化版用不同颜色方块表示每日打卡 const dates stats.result.data.dates; // [2024-06-01, ...] const colors [#e0f7fa, #b2ebf2, #80deea, #4dd0e1, #00bcd4]; dates.forEach((date, p a hrefhttps://download.csdn.net/download/weixin_54828627/87765208 stylecolor:#ec7500;font-size:14px; 本文还有配套的精品资源点击获取 /a img altmenu-r.4af5f7ec.gif srchttps://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif stylewidth:16px;margin-left:4px;vertical-align:text-bottom;cursor:text; /p