微信小程序开发实战之番茄时钟开发

番茄时钟是个被讲烂了的练手项目，但恰恰因为它小，才容易暴露问题：计时器写在页面里还是抽成独立模块？切到后台再回来，秒数还对得上吗？微信小程序的定时器在页面隐藏后会不会被系统挂起？这些坑不踩一遍，光看文档是记不住的。这份资料适合已经能写基础 WXML、WXSS，但还没独立做过一个完整计时类小程序的人。

先确认你缺的是哪一块

如果你只是没写过小程序，那缺的是框架基础：app.json 的页面注册、页面的生命周期、setData 的更新机制、事件绑定与冒泡。这些不清楚，直接看番茄时钟的倒计时逻辑会比较吃力，因为代码里会默认你已经知道 onHide 和 onUnload 的区别。

如果你已经会写页面，缺的通常是三样东西：一是状态管理，倒计时的工作/休息阶段切换、轮次计数放在哪；二是持久化，用户切走再回来进度不能丢；三是交互细节，比如按钮的禁用态、进度环的动画、通知与震动反馈。这份资料的价值集中在后两块。

倒计时这类需求，真正难在哪

很多人第一版会直接写 setInterval 每秒减一，跑起来看着没问题。问题出在三处：第一，setInterval 本身有累积误差，跑二十五分钟会偏出几秒；第二，小程序切到后台后定时器行为不稳定，回来时秒数已经不准；第三，页面反复进入退出时忘了 clearInterval，定时器越积越多。

所以真正要练的不是「怎么显示一个数字」，而是「用一个时间戳作为唯一真相」的思路：记录开始时刻和总时长，每次刷新都用当前时间减出来，而不是累加。这个习惯迁移到别的项目里同样管用。

• 时间戳与剩余秒数的换算，以及格式化显示
• 页面隐藏、显示、卸载三个节点上定时器的正确处理
• 工作 / 短休 / 长休三个阶段的切换条件与轮次计数
• 数据本地存储，保证中途退出后进度可恢复

配套练习怎么用才不白做

配套的章节笔记适合在两个时间点看：一是自己先按理解写一版，卡住了再去对照思路，别一上来就照抄；二是全部跑通之后回头复盘，看看哪些地方当时是靠猜蒙对的。

建议给自己加几个原文没覆盖的小改动，改得动说明真懂了：把固定二十五分钟改成可配置、加一个跳过当前阶段按钮、统计今天完成了几个番茄。这几个改动会逼你重新想一遍状态该放在哪、什么时候要写回存储。

另外，调试阶段别只在小程序开发者工具里点。真机上切后台、锁屏、接电话，是检验计时逻辑最直接的方式。

看完应该能回答的问题

如果你学完仍然答不上下面这几条，说明只是把代码跑通了，没吃透：

• 为什么倒计时不该用累加的方式计算剩余时间？
• 页面 onHide 之后定时器要不要停？停了怎么保证回来时数字正确？
• 番茄钟的状态（当前阶段、已完成轮次、剩余时间）分别该存在哪里，页面数据和本地存储如何同步？
• 如果要做后台到点提醒，小程序侧能做和不能做的是什么？

笔记里把这几个问题先在纸上写一遍答案，再回去翻代码验证，比顺着目录再刷一遍有效得多。