从零开始打造微信打卡小程序

微信小程序日历组件下载

网上找了许多关于打卡的微信小程序代码，感觉mehaotian的这段代码最容易理解，于是就想着在此之上改进。

打卡小程序预计架构

制作这个小程序的初衷是因为想要有个打卡app来记录每天做了什么事情，等时间一长看有几天做了这个事情会很有成就感。但我微信一搜感觉市面上的打卡app实在是过于冗余，我就想着能不能自己做个简洁的版本，这也是我第一次实实在在接触前端的东西，希望可以在这个项目中学习到前端的知识。这是基本的操作图：

最基本的打卡功能

我在原有的日历上增加了打卡按钮，现在界面是这样的：

按下”打卡“按键后，会在当天打一个卡，并且不能重复打两次。源代码已经有了一个名为Slecetd的array，在这个array中的日期会在数字下有个红点，而我写了一个clockIn的方程使今天的日期加入到这个列表中。

clockIn() {
    this.getWeek(new Date());
    let selected = this.data.selected;
    let canlender = this.data.canlender;
    let { date, month, year } = canlender;
    let addingDate = { date: year + "-" + month + "-" + date };
    if(this.hasDuplicate(selected,addingDate)){
        console.log("You can't add the same day twice!");
    }
    else{
        selected.push(addingDate);
        this.setData({
        selected: selected
        });
        console.log(selected);
    }
    },

每日只能打一次卡

30/06/2023
移除了原本的“确定”按钮，该按钮的功能是折叠日历，但因为我们本质上就是一个打卡软件，所以就移除了这个功能。
“打卡”按钮改成了如果今天已经打卡过，则按钮会变灰，而且会显示“今天已经打过卡啦”。