当前位置: 首页 > news >正文

小程序样例3:根据日历创建待办事项

基本功能

1、待办事项查看

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

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

3. 点击事项,查看详情

4、删除事项:删除事项3之后,剩余事项2

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

实现思路:

1、数据结构:

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

2、代码结构:

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的方式

踩坑记录:

1、通过选中的年月日,构造Date对象时,调用getDay()获取星期的时候,不正确。

需要将month-1

参考:js getday()获取值不对_dayjs().get('day') 时间不对-CSDN博客

2、promise运用不熟练,有些地方需要return

参考:微信小程序Promise详解_笔记大全_设计学院

 比如此处:如果没有return,调用findAllData后续then的时候拿不到data值

完整代码下载:

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

 

个人小程序创业项目   #小程序://朋友圈子/VMEWRjrOTum4Soa  有想法的朋友可以一起交流下~

相关文章:

  • 数灵通丨可以实现抖音引流微信小程序了
  • 腾讯云短信开发
  • css中>>>、/deep/、::v-deep的作用和区别,element-ui自定义样式
  • Docker搭建私有仓库
  • java spring cloud 企业工程管理系统源码+二次开发+定制化服务
  • 【单例模式】保证线程安全实现单例模式
  • 决策树(Python)
  • [第二章—Spring MVC的高级技术] 2.3 处理异常
  • 算法训练营第五十七天|647. 回文子串 516.最长回文子序列
  • 252.【2023年华为OD机试真题(C卷)】局域网中的服务器个数(优先搜索(DFS)-JavaPythonC++JS实现)
  • [已解决]504 Gateway Time-out 网关超时
  • 机器学习第一个项目-----鸢尾花及报错解决
  • unity学习笔记----游戏练习06
  • ZigBee学习——浅析协议栈
  • 网络协议与攻击模拟_08DHCP协议
  • Angular2开发踩坑系列-生产环境编译
  • CEF与代理
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • Java精华积累:初学者都应该搞懂的问题
  • jquery ajax学习笔记
  • JS 面试题总结
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • vue 配置sass、scss全局变量
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 聊聊flink的TableFactory
  • 移动端 h5开发相关内容总结(三)
  • 正则学习笔记
  • linux 淘宝开源监控工具tsar
  • ​TypeScript都不会用,也敢说会前端?
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • #include
  • #LLM入门|Prompt#2.3_对查询任务进行分类|意图分析_Classification
  • #stm32驱动外设模块总结w5500模块
  • $(function(){})与(function($){....})(jQuery)的区别
  • (1)Android开发优化---------UI优化
  • (3)nginx 配置(nginx.conf)
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (9)目标检测_SSD的原理
  • (C++17) std算法之执行策略 execution
  • (C语言)共用体union的用法举例
  • (ibm)Java 语言的 XPath API
  • (LeetCode 49)Anagrams
  • (八)Flask之app.route装饰器函数的参数
  • (简单有案例)前端实现主题切换、动态换肤的两种简单方式
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • .NET CORE 2.0发布后没有 VIEWS视图页面文件
  • .NET Core 中插件式开发实现
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .net core控制台应用程序初识
  • .Net Web项目创建比较不错的参考文章
  • .NET 将多个程序集合并成单一程序集的 4+3 种方法
  • .NET/C# 使用 SpanT 为字符串处理提升性能
  • .NET性能优化(文摘)