市面上没有自己想要的待办软件怎么办？那就自己开发一个吧。

Hello，我是岚尹~一个热爱技术的项目经理。

不定期更新项目管理、前端以及运维相关方面的经验分享~ 

如果你对我的文章感兴趣，就请动动你的小手帮赞一下哦。

长期交流~

目录

一、项目背景

二、产品设计

1、原型设计

2、功能设计

三、项目结构

四、项目代码

五、项目演示

六、小程序入口

一、项目背景

最近工作和日常都是千头万绪，而我这言帚忘笤的记性也没法用脑子一一记住，那怎么办呢/p>

俗话说，好记性不如烂笔头，那就把这些待办项都记下来好了。我找了市面上的待办软件，但都不太符合我的需求。因为我本人一般是提前一周做待办规划，而且每件事只能精确到天，所以我急需一个以周为单位的看板视图，可以规划周一到周末的任务清单，最好是移动端的方式，更方便随时随地进行管理查看。

既然现成的没有，那就自己动手吧。

二、产品设计

1、原型设计

好，说干就干！

先是方案设计，我选了墨刀这个对新手来说门槛比较低的原型工具。上面有很多组件都可以直接使用，上手比较快。界面非常的简单，主要分 Today和Week 两个视图，Today展示当天的待办事项，Week 以看板形式展示当周的待办事项，每一天是一个板块，可切换上一周、下一周的视图。

设计好界面后尝试了几种配色方案，最终采用了第一种比较简单的配色进行开发。

2、功能设计

首先进入小程序后可切换 Today View 和 Week view。在两个视图都可以新增、修改和删除对应日期的待办项，在Week view页面还可切换上一周和下一周的页面。

三、项目结构

我之前有学过一点H5，但没接触过小程序开发，所以在开发中也是一个边学边做的过程。这其中主要参考的学习资料是微信官方的开发文档，有一些细节问题是在CSDN里面搜索其他大佬的文章找到解题思路的。

开发工具就是使用的微信官方的开发者工具，创建项目的时候需要将申请的小程序APPID与项目进行关联。

项目结构如下截图所示，页面只使用了index一个页面文件，另外引入一个 util.js时间处理模块用于生成当前年度的所有 Week list。

四、项目代码

   4.1 wxml 代码：

（1）视图切换：通过按钮 tabx 进行 dayView和weekView的切换，dayView 获取当天的待办项进行展示，weekView获取当周的待办项以看板的形式进行展示。

（2）数据绑定：每一天的待办项以当天的日期为key存储在缓存中，每一次新增、修改、删除都会更新到缓存里面。

如果选择Today页面，代码会去缓存中获取日期为当天的待办项存到 todoList里面，然后通过一层for循环，遍历展示所有当天的待办事项。

如果选择Week页面，代码回去缓存中获取当前星期的所有日期，再通过两层for循环，获取当前周每一天对应的待办事项。

4.2 js 代码：

    （1）util.js 模块：获取当前年度的所有星期输出为一个list，每个星期为一组子list，组内元素为从周一到周天的日期。格式为“yyyy-m-d”。