小程序样例3：根据日历创建待办事项-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序样例3：根据日历创建待办事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基本功能

1、待办事项查看

小程序样例3：根据日历创建待办事项,小程序开发,小程序

选择不同的日期显示不同的待办:

小程序样例3：根据日历创建待办事项,小程序开发,小程序

2、选择日期后新增事项：

小程序样例3：根据日历创建待办事项,小程序开发,小程序

3. 点击事项，查看详情

小程序样例3：根据日历创建待办事项,小程序开发,小程序

4、删除事项：删除事项3之后，剩余事项2

5、点击日期可以选择更多的月：

小程序样例3：根据日历创建待办事项,小程序开发,小程序

实现思路：

1、数据结构：

{     level: 1, 
      _id: 1,
      title: '事项1',
      content: '内容1',
      year: 2024,
      month: 1,
      date: 23,
      addDate: '2024-01-20'
}

2、代码结构：

小程序样例3：根据日历创建待办事项,小程序开发,小程序

DataService 是服务层接口，业务JS代码与之打交道

同时Service调用Repository接口，实现数据的增加、删除、查询

例如查询当天的待办：

业务JS层代码：调用DataService.findByDate

function loadItemListData() {
  console.log('loadItemListData')
  console.log(this.data.data.selected)
  const {year, month, date} = this.data.data.selected;
  let _this = this;
  DataService.findByDate(new Date(year, month, date)).then((data) => {
    if(data) {
      _this.setData({ itemList: data });
    } else {
      console.log('findByDate get data empty')
    }
  });

}

Service层代码：调用DataRepository.findBy

static findByDate(date) {
        console.log('in findByDate year:' + date.getFullYear() + ' month:' + date.getMonth() + ' day:' + date.getDate())
        if (!date) {
          return []
        } ;
        console.log('before findBy')
        return DataRepository.findBy(item => {
            console.log('current item year:' + item['year'] + ' month:' + item['month'] + ' date:' + item['date']);
            console.log(item);
            return item && item['date'] == date.getDate() &&
                item['month'] == date.getMonth() &&
                item['year'] == date.getFullYear();
        }).then(data => data);
    }

Repository层代码：

static findBy(predicate) {
        console.log('in findBy');
        return DataRepository.findAllData().then((data) => {
          console.log('in findBy result');
          if (data) {
              data = data.filter(item => predicate(item));
              console.log('after filter');
              console.log(data)
              return data;
          } else {
            console.log('data is empty:' + data)
          }
          return data;
        });
    }

代码使用Promise风格简化了callback的方式