前言
上一节我们开发完了Home、Register、Login以及大部分的量的Mine的内容
这一节我们接着上一节来进行开发
上一节的地址给大家放在这里 实战篇：带着大家用鸿蒙HarmonyOS做项目（一） - 掘金 (juejin.cn)
好的，咱们开始吧！
Mine
继续Mine模块的开发
我们现在搞一个登出，可以跳到Login页面
然后就可以跳到登录页了
Calendar模块
我们现在开始搞日历的模块
这里很尴尬，我并没有找到日历的组件，即使是我看了查询了文档也只看到了在低代码和js中提到了一下
所以这里我打算自己封装一个日历组件，当然，如果你有什么别的方法，记得评论留言让我学习一下~
自定义日历组件
这里我在views下新建了一个components文件夹，用来存放一些功能组件，因为之前的views不能满足我的需求了，自定义组件越来越多，会变得不清晰，在之后我会把之前的一些功能组件，例如TextPro等都放到components下
好的，我现在新建了一个CalendarItem.ets，作为我的日历
正常的日历应该有三部分，但是我的项目中设计的是想显示当日的日期，所以在头部的地方简化了
好滴，我们分一下，Header头部、Week周、Day日
这里我们采用@Builder完成这三部分即可
首先是Header头部，这部分比较简单，我们目前只需要一个文本即可
这里我简单写一下，然后效果是这样的
大家后期可以自行改善
然后文本文本是写死的，后面是需要进行更改的，但是这里不急，而且也简单
然后我们开始做Week的部分
因为日-六这部分是固定的，我们直接写数据即可
然后写一下具体的Week组件，我们采用Grid布局，并且直接用ForEach循环，相信经过前面的学习，大家到这里直接就能写出来了
然后我们引用一下组件
OK，效果出来了
好的，简单的部分我们已经完成了，现在到了较为复杂的Day部分，这部分我认为分下面几难点进行处理
- 样式（简单）
- 当前月的天数（简单）
- 当前月的具体日期对应（稍复杂）
最后一下可能我陈述的不好，我这里拿电脑的日历举个例子
我们可以看到，这个月的一号是从周五开始的，是周日结束的，那么我们就需要区分出前月，当月，下月
首先，我定义一下当前的年月日
然后在aboutToAppear这个生命周期中通过Date()来赋值
此时我们可以改进一下Header了
这时我们的Header的日期就是实际获取到的了，而不是写死的
好的，我们继续Day模块的开发
我定义一个allDay，代表当月的天数
然后我们获取一下当月的天数
然后遍历一下
这个时候我们先写一下Day组件
然后我们调用一下Day组件看一下效果
ok，没问题
现在我们基础样式和当月天数完成了，我们继续往下
我现在想知道上个月的天数
现在我们的思路是的思路是首先获取当月第一天是星期几，然后直接用上个月的天数填满当前行，同理结尾也是这个方式
那么我们先获取当月第一天是星期几
我给这个值取名为currentFirstWeekDay
然后我们通过Date的api来获取到我们想要的值
好的，我们现在来获取上个月的天数，首先，我们获取到上个月最后一天
然后我们需要知道，上个月应该显示几天
最后我们定义一个数组week用来显示上个月需要显示的那几天
然后我们定义数组preMonth来存放上个月的日期
然后赋值
然后我们可以在Day中去加上上个月的日期了
这里加了个背景色，方便区分
然后我的项目中不需要显示，于是我将其隐藏
这是最后的效果
最后，我想给当前日加点样式，方便观看
Calendar模块的开发
在完成了CalendarItem日历组件后，我们开始回归到Calendar模块的开发
views下新建Calendar
在Calendar中引入CalendarItem
更改TabBar
效果
然后我们现在加上一个标题
下面我们是和Home页一样的列表
这里我直接拿过来
效果出来了
然后现在不同的是右侧的内容，我现在不想要过期这个按钮，我想要变成例如：剩余两天这样的效果，那我们就改一下
这里我偷懒一下，大家懂就行
然后我稍微改一下内容
效果
结尾
很感谢大家的支持，我会抓紧去写下个模块的
这里需要说的是，我并没有完整地开发出一整个日历组件，因为其实日历组件还有很多别的功能，但是在这个项目当中用不到，而我现在想快速把项目写完，所以我就没有完整写出来
但是大家放心，我后面会完整地给大家把日历组件写完，甚至还有一些别的组件
因为鸿蒙提供的组件实在有限，很多需要自己封装，而我之前有过组件库的开发经历，所以我在想用不用把一些组件封装出来，作为一个单独的项目
目前就打算在这个项目完成后做，大家可以期待一下，如果你有想法，可以和我一起做
我会加急把这个系列更完，同时此项目优化的地方有很多，可能我最后完成后会统一优化一下
最近也真的很忙，如果更慢了的话希望大家理解~