基本功能

1、待辦事項(xiàng)查看

選擇不同的日期顯示不同的待辦:

2、選擇日期后 新增事項(xiàng)：

3. 點(diǎn)擊事項(xiàng)，查看詳情

4、刪除事項(xiàng)：刪除事項(xiàng)3之后，剩余事項(xiàng)2

5、點(diǎn)擊日期可以選擇更多的月：

實(shí)現(xiàn)思路：

1、數(shù)據(jù)結(jié)構(gòu)：

{     level: 1, 
      _id: 1,
      title: '事項(xiàng)1',
      content: '內(nèi)容1',
      year: 2024,
      month: 1,
      date: 23,
      addDate: '2024-01-20'
}

2、代碼結(jié)構(gòu)：

DataService 是服務(wù)層接口，業(yè)務(wù)JS代碼與之打交道

同時Service調(diào)用Repository接口，實(shí)現(xiàn)數(shù)據(jù)的增加、刪除、查詢

例如查詢當(dāng)天的待辦：

業(yè)務(wù)JS層代碼：調(diào)用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層代碼：調(diào)用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風(fēng)格 簡化了callback的方式

踩坑記錄：

1、通過選中的年月日，構(gòu)造Date對象時，調(diào)用getDay()獲取星期的時候，不正確。

需要將month-1

參考：js getday()獲取值不對_dayjs().get('day') 時間不對-CSDN博客

2、promise運(yùn)用不熟練，有些地方需要return

參考：微信小程序Promise詳解_筆記大全_設(shè)計(jì)學(xué)院

?比如此處：如果沒有return，調(diào)用findAllData后續(xù)then的時候拿不到data值

完整代碼下載：

?https://download.csdn.net/download/u200814342A/88778500

?

個人小程序創(chuàng)業(yè)項(xiàng)目?? #小程序://朋友圈子/VMEWRjrOTum4Soa? 有想法的朋友可以一起交流下~文章來源地址http://www.zghlxwxcb.cn/news/detail-823312.html

到了這里，關(guān)于小程序樣例3：根據(jù)日歷創(chuàng)建待辦事項(xiàng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！