应用场景
____BT清单是一个结合了清单和计时功能的小程序,用户可以设置每一天的任务以及未来的计划,同时,用户也可以在计时页面开始专注。BT清单简洁的界面与清晰的交互方式,可以帮助用户在工作中或学习中更好地统筹规划时间,安排自己的日程表。
目标用户
学生、上班族、喜欢列计划的人、时间管理者等追求效率的人群
实现思路
BT清单以todos功能为基础,扩展出了日历、计时,与历史记录界面。今日记录与日历的数据互通,与计时器的数据独立,最终所有的操作记录展示在历史记录界面中。
前端架构使用的均为微信小程序自带的组件以及效果,风格简洁明快。后端使用了腾讯云,主要使用了云数据库及少量云函数。todos以及历史记录均存储在数据库里,在前端分别以不同的检索条件进行展示、同时进行增删改等数据库操作。
架构图
效果截图

今日清单页面展示截止到当天的所有任务,过期的和今日待办任务分开显示,每一栏任务都有完成按钮、日期更改按钮和删除按钮。过期任务会显示任务的日期。底部的按钮可以进行全局操作。最底部的tabbar则显示今日共有多少任务待办。

日期更改页面。

日历页面会展示选中日期当日的任务清单,在日历页面也可以进行待办的增删改查。

可以把日历扩展为月历视图,选中某个日期后就会显示当日任务,点击今日按钮可以返回今日日期,在日历中今日日期予以绿色圆点标注。

计时页面可以拖动上方的滑块来调节倒计时时长,开始计时后,中间的动画效果开始播放,灰色小球会每秒不匀速转动,计时结束后,动画停止。

在历史记录页面,可以查看自己的任务增删记录和计时记录。点击“全部”按钮可以显示出所有的记录。

长按某一条记录后可以选择删除该条记录。

点击“清除所有”按钮可以删除所有该类别的记录。

如果任务均标记为已完成,可以选择重新开始,也可以选择删除任务。

当今日没有待办任务且已完成任务均被删除时,界面展示“没有任务”字样。
部分功能代码演示

点击待办实现“完成任务”功能的代码

使用正则表达式来格式化日期的代码

清除“过期的已完成的”任务的代码
体验二维码

团队简介
一位来自北京邮电大学信通院信息工程专业的本科生,假期自学过小程序。