uni-app无内置签到日历组件，需手写或引入轻量第三方库；手写时须正确计算起始星期、当月天数及上月补零，避免DOM依赖和moment.js，推荐用原生Date API。
uni-app 里没有内置日历组件，得自己实现或用第三方
uni-app 官方 uview、uni-ui 都不带「签到日历」这种业务型组件，只有基础的日期选择器（如 uni-datetime-picker）。真要签到日历，要么手写渲染逻辑，要么引入轻量第三方（比如 vue3-calendar 或适配 uni-app 的封装版）。
手写最可控，但要注意：不能直接用 Web 端日历库（比如 fullcalendar），它们依赖 DOM 操作和 window 对象，在小程序端会报错 Cannot read property 'document' of undefined。
- 优先选只依赖 Vue 响应式、不操作 DOM 的日历逻辑库
- 如果自己写，核心是生成当月日期数组 + 标记签到状态，用
v-for渲染格子即可 - 注意
onLoad里别直接调接口查签到数据——小程序端页面初始化时this可能还没 ready，建议用onReady或$nextTick
渲染日历格子：用 Date API 计算起始日 + 补零逻辑
关键不是“怎么画格子”，而是“怎么算出第一行该从周几开始”。常见错误是硬写 new Date(year, month, 1).getDay()，但忘了 JavaScript 的 month 是从 0 开始的，new Date(2024, 1, 1) 其实是 2024 年 2 月 1 日。
- 正确写法：
new Date(year, month + 1, 0).getDate()得上月天数，用于补前置空格 - 首日星期几用：
new Date(year, month, 1).getDay()（这个 month 就是 0~11） - 当前月总天数：
new Date(year, month + 1, 0).getDate() - 避免用
moment.js—— 体积大，且在 H5 外平台（如微信小程序）可能因 polyfill 缺失报错
示例片段（逻辑示意）：
const firstDay = new Date(year, month, 1).getDay()
const daysInMonth = new Date(year, month + 1, 0).getDate()
const prevMonthDays = new Date(year, month, 0).getDate()
const dates = []
// 补上月尾部
for (let i = firstDay - 1; i >= 0; i--) {
dates.push({ date: new Date(year, month - 1, prevMonthDays - i), type: 'prev' })
}
// 当月
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i)
dates.push({ date, type: 'current', signed: signedMap.get(date.toISOString().split('T')[0]) })
}签到状态如何持久化：别只存前端，也别每次全量查
用户点一下签到，你如果只是改个 signed: true 然后存 uni.setStorageSync，下次进页面就没了——因为没和服务端对齐。但反过来，每次打开日历都拉一遍近 30 天签到记录，又浪费请求。
- 推荐策略：首次加载查最近 60 天，缓存到本地；后续每日凌晨自动静默同步一次当天状态（用
uni.getBackgroundAudioManager不现实，改用定时器 +uni.getNetworkType判断联网后再触发） - 服务端返回格式建议是字符串数组，如
["2024-04-01", "2024-04-03"]，前端用Set存，查起来 O(1) - 注意时区：服务端给的时间字符串如果是 UTC，前端用
new Date('2024-04-01').toISOString().split('T')[0]可能跨天，统一用东八区时间字符串交互更稳
小程序真机调试时日历错位或空白？先看条件编译和样式单位
很多开发者写完 H5 正常，一到微信小程序就格子堆一起或高度为 0，问题不在 JS 逻辑，而在样式。
- 别用
rem或vw/vh做日历格子宽高——小程序端不支持或计算异常，一律用rpx或固定px - 避免在
style里动态拼grid-template-columns，小程序uni-app的style绑定对复杂 CSS 函数支持弱，改用 class 控制列数（比如class="week-7"） - 条件编译漏写了？比如用了
process.env.NODE_ENV === 'development'判断开发环境 mock 数据，但小程序端这个值是production，导致数据为空
一个典型坑：flex: 1 在小程序里对 view 无效，得显式写 width: 100% 和 height: 100%。
实际最难的不是渲染，是让不同平台（H5 / 微信 / 支付宝 / App）的日期解析行为一致——哪怕同一个 new Date('2024-04-01')，iOS 和安卓微信的解析结果都可能差一天。
