本文基于开源库实现 https://github.com/treadpit/wx_calendar

#0

大家在使用小程序的时候，都会遇到各式各样的签到。

签到抽奖、签到得积分、签到得会员权益等。

签到不管是对于 APP 、WEB 还是小程序，在提高日活和增加回流都有着非常重要的作用。

作为开发者，我们怎么来实现这样的签到功能？

首先，我们需要一个数据库来存用户的历史签到数据。

再次，我们还需要一个后台服务器来响应用户的签到请求，判断用户当次签到是否有效并向数据库新增加。

很高兴，小程序云开发 （https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html) 为开发者提供了开箱即用的云数据库和能代替后台服务器的云函数。

所以，接下来，我们就利用小程序云开发提供的云数据库和云函数来实现小程序里面的签到日历。

#1

先看一下完成实现后的效果动图

通过动图，可以看到我们需要实现的功能包括：

1、历史签到数据展示（连续签到天数、累计签到天数、每月签到明细）

2、历史签到查询（通过点击前、后不同的按钮来跳转到不同的月份并展示当月的签到明细）

3、签到

那我们接下来一一去实现这三个大功能点

#2

历史签到数据展示和查询都需要用到日历卡片，我们就先整理出这个卡片的实现逻辑。

2.1 、取出所选月份的1日是星期几，然后根据取出的星期来计算日历卡片前面需要留下几个空白

2.2 获取所选月份有多少天，然后初始化一个日期数组。每项包含两个值（天、是否签到，因为是初始化，所以统一设置为未签到）

#3

整理出日历卡片后，就是获取历史签到数据比对然后渲染到页面上。

3.1 获取历史签到数据

3.2 根据日历卡片的年、月得出当月所有天数后和历史签到数据比对来决定页面的渲染。

#4

用户肯定需要查到他自己之前的签到数据，我们通过提供前、后两个按钮来让用户选择。

#4

历史签到数据的展示、查询结束后，我们继续处理用户的新签到。

签到的动作放在小程序，而处理逻辑我们放在云函数里面。

毕竟我们不可能让用户重复签到或者做一些其他预料外的动作。

#5

不知道结束后，你对前面的两个问题（1、为什么把年、月、日分开？2、为什么只取历史签到数据的其中一条就可以知道用户的连续签到天数？）是否有了答案？

其实这两个问题的答案都非常简单，之所以我把它们单独摘出来，只是为了增加文章字数 [doge] 。也就是常说的故弄玄虚。。。

首先第一个问题：因为日历卡片渲染时是月份的 day ，而不是年-月-日，如果我们把年月日连在一起，不方便渲染处理。

第二个问题：因为我们在处理签到逻辑时，这个 continue_sign_days 是根据前一天的 continue_sign_days 得出，所以我们只需要按签到时间倒序排序然后最第一个就可以了。

#6

关注公众号，发送 源码 获取