微信小程序打卡签到页面（有效果图)

效果图如下所示

.wxml

    
        每日坚持签到
        总共签到：{{continuity}}天
    
 

    
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
        
        
            
            持续签到 {{continuity}}天
        
        
            
                
                    
                        {{item.wook}}
                    
                
            
            
                
                    
                        {{item.wook}}
                        
                            
                        
                    
                
            
            
                
                    
                        {{ornot?'已打卡':'打卡'}}
                    
                
            
        
    



    
    
        
            
                
                    
                        
                            上个月
                        
                    
                    {{cur_year || "--"}} 年 {{cur_month || "--"}} 月
                    
                        
                            下个月
                        
                    
                
                
                    {{item}}
                
                
                    
                    
                    
                        {{item.wook}}
                        
                        
                        
                    
                
            
        
        
            x
        
    



    
    
        签到成功
        持续签到{{continuity}}天
        好的
    

.js

const util = require('../../utils/util.js')
Page({
    data: {
        sysW: null,
        lastDay: null,
        year: null,
        hasEmptyGrid: false,
        cur_year: '',
        cur_month: '',
        firstDay: null,
        getDate:null,
        month:null,
        display:"none",
        week:[
            {
                wook: "一"
            }, {
                wook: "二"
            }, {
                wook: "三"
            }, {
                wook: "四"
            }, {
                wook: "五"
            }, {
                wook: "六"
            }, {
                wook: "日"
            },
        ],
        day:[],
        days:[],
        ornot:false,//今天是否签到
        continuity:2,//签到天数
        sign:false,//签到弹窗
    },
    getProWeekList:function(){
        let that=this
        let date=new Date()
        let cur_year = parseInt(date.getFullYear())
        let cur_month = parseInt(date.getMonth() + 1)
        let obinl = parseInt(util.getWeekByDate(new Date()));//今天周几
        let danqian = new Date(date.getTime()).getDate()
        let shang = that.getThisMonthDays(((cur_month - 1) < 1?cur_year-1:cur_year),((cur_month - 1) < 1?12:cur_month - 1))
        let ben = that.getThisMonthDays(cur_year,cur_month)
        let xyue = 7 - (7 - obinl)
        let syue = 7 - obinl
        let array = []
        let name_a = 0
        let name_b = 0
        let name_c = 0
        for(let i = 0;i shang){
                name_c = 1 + (name_a <= i?i - name_a:0)
            }
            array.push({wook:name_c})
        }
        for(let i = 0;i ben){
               name_a = name_a - ben
            }
            array.push({wook:name_a,src:''})
        }
        that.setData({
            day:array
        })
    },
    dateSelectAction: function (e) {
        let cur_day = e.currentTarget.dataset.idx;
        this.setData({
            todayIndex: cur_day
        })
        console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
        },
        setNowDate: function () {
        const date = new Date();
        const cur_year = date.getFullYear();
        const cur_month = date.getMonth() + 1;
        const todayIndex = date.getDate();
        const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
        this.calculateEmptyGrids(cur_year, cur_month);
        this.setData({
            cur_year: cur_year,
            cur_month: cur_month,
            weeks_ch,
            todayIndex,
        })
    },

    getThisMonthDays(year, month) {
        return new Date(year, month, 0).getDate();
    },
    getFirstDayOfWeek(year, month) {
        return new Date(Date.UTC(year, month - 1, 1)).getDay();
    },
    calculateEmptyGrids(year, month) {
        const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
        let empytGrids = [];
        if (firstDayOfWeek > 0) {
            for (let i = 0; i < firstDayOfWeek; i++) {
                empytGrids.push(i);
            }
            this.setData({
                hasEmptyGrid: true,
                empytGrids
            });
        } else {
            this.setData({
                hasEmptyGrid: false,
                empytGrids: []
            });
        }
    },
	calculateDays(year, month) {
        var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000; 
        var n = timestamp * 1000;
        var tiem = new Date(n); 
        var Y = tiem.getFullYear();
        var M = (tiem.getMonth() + 1 < 10 ? '0' + (tiem.getMonth() + 1) : tiem.getMonth() + 1);
        let getDate = this.data.ornot?this.data.getDate:(this.data.getDate - 1) //多少号
        let cur_year = this.data.cur_year//年
        let cur_month = this.data.cur_month//月
        let thisMonthDays = this.getThisMonthDays(year, month);
        let month_s = year.toString() + (month.toString().length == 1?'0' + month.toString():month.toString());
        let openitem = (this.data.opentime[0] + '' +((this.data.opentime[1]+'').length == 1?'0'+this.data.opentime[1]:this.data.opentime[1]));
        for (let i = 1; i <= thisMonthDays; i++) {
            if(month_s > openitem){
                this.data.days.push({wook:i,src:''});
            }else if(openitem < month_s && month == this.data.shuttime[1]){//小于开始月份
                this.data.days.push({wook:i,src:i <= getDate?'/images/newspaper.png':''});
            }else if(openitem == month_s && month == this.data.opentime[1]){
                if((Y+''+M) == month_s && this.data.opentime[2] <= i && i <= (this.data.ornot?this.data.getDate:this.data.getDate-1)){
                    this.data.days.push({wook:i,src:'/images/newspaper.png'});
                }else if((Y+''+M) != month_s && this.data.opentime[2] <= i){
                    this.data.days.push({wook:i,src:'/images/newspaper.png'});
                }else{
                    this.data.days.push({wook:i,src:''});
                }
            }else if(openitem == month_s && month < this.data.shuttime[1]){
                this.data.days.push({wook:i,src:this.data.opentime[2] <= i?'/images/newspaper.png':''});
            }else if(openitem < month_s && month < this.data.shuttime[1]){
                this.data.days.push({wook:i,src:'/images/newspaper.png'});
            }else{
                this.data.days.push({wook:i,src:''});
            }
        }
        this.setData({
            days:this.data.days,
        })
    },
    //上下月
    handleCalendar(e) {
        const handle = e.currentTarget.dataset.handle;
        const cur_year = this.data.cur_year;
        const cur_month = this.data.cur_month;
        this.setData({
            days:[]
        })
        if (handle === 'prev') {
            let newMonth = cur_month - 1;
            let newYear = cur_year;
            if (newMonth < 1) {
                newYear = cur_year - 1;
                newMonth = 12;
            }
            this.calculateDays(newYear, newMonth);
            this.calculateEmptyGrids(newYear, newMonth);

            let firstDay = new Date(newYear, newMonth - 1, 1);
            this.data.firstDay = firstDay.getDay();
            this.setData({
                cur_year: newYear,
                cur_month: newMonth,
                marLet: this.data.firstDay
            })
            if (this.data.month == newMonth) {
                this.setData({
                    judge: 1
                })
            } else {
                this.setData({
                    judge: 0
                })
            }
        } else {
            let newMonth = cur_month + 1;
            let newYear = cur_year;
            if (newMonth > 12) {
                newYear = cur_year + 1;
                newMonth = 1;
            }
            this.calculateDays(newYear, newMonth);
            this.calculateEmptyGrids(newYear, newMonth);
            let firstDay = new Date(newYear, newMonth - 1, 1);
            this.data.firstDay = firstDay.getDay();
            this.setData({
                cur_year: newYear,
                cur_month: newMonth,
                marLet: this.data.firstDay
            })
            if (this.data.month == newMonth){
                this.setData({
                    judge:1
                })
            }else{
                this.setData({
                    judge: 0
                })
            }
        }  
    },
    dataTime: function () {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var months = date.getMonth() + 1;

        //获取现今年份
        this.data.year = year;

        //获取现今月份
        this.data.month = months;

        //获取今日日期
        this.data.getDate = date.getDate();

        //最后一天是几号
        var d = new Date(year, months, 0);
        this.data.lastDay = d.getDate();

        //第一天星期几
        let firstDay = new Date(year, month, 1);
        this.data.firstDay = firstDay.getDay();
        this.setData({
            marLet:this.data.firstDay
        })
    },
    onshow:function(){
        this.setData({
            display:"block",
        })
    },
    onhide:function(){
        this.setData({
            display: "none",
        })
    },
    onLoad: function (options) {
        var that = this;
        this.setNowDate();
        this.getProWeekList()
        this.dataTime();
        var res = wx.getSystemInfoSync();
        this.setData({
            sysW: res.windowHeight / 12-5,//更具屏幕宽度变化自动设置宽度
            getDate: this.data.getDate,
            judge:1,
            month: this.data.month,
        });
        this.sigarr();
    },
    //获取数组参数
    sigarr:function(e){
        let that = this
        let ornot = that.data.ornot?0:1//当天是否签到
        let continuity = that.data.continuity//连续签到天数
        let obinl = parseInt(util.getWeekByDate(new Date()));//今天周几
        let cur_year = that.data.cur_year;//年份
        let cur_month = that.data.cur_month - 1;//月份
        if (cur_month < 1) {//月份小于1年份减1
            cur_year = cur_year - 1;
            cur_month = 12;
        }
        let num = obinl

.wxss

view,image{box-sizing: border-box;}
page{
  background-color: #f4f4f4;
}
.gs_banner image{
  width:750rpx;
  height:256rpx;
  vertical-align: top;
}
.gs_continue{
  background-color: #fff;
  padding:30rpx 20rpx;
}
.gs_continue view:first-child{
  font-size:34rpx;
  color:#454545;
  padding-bottom:20rpx;
}
.gs_continue view:last-child{
  font-size:32rpx;
  color:#707070;

}
.gs_continue view text{
  color:#dd2522;
}
.gs_sign{
  margin-top:30rpx;
}
.gs_sign_box{
  background-color:#fff;
  width:677rpx;
  margin:0 auto;
  position:relative;
  border-radius:15rpx;
}
.gs_pillar{
  overflow:hidden;
  position:absolute;
  top:-16rpx;
  width:100%;
}
.gs_pillar .gs_post{
   float:left;
   width:20%;
   text-align: center;
}
.gs_pillar .gs_post view{
  display:inline-block;
  width:18rpx;
  height:42rpx;
  background-color:#53acfc;
  border-radius:20rpx;
}
.gs_sign_day{
  padding:60rpx 20rpx 0;
}
.gs_sign_day image{
  width:45rpx;
  height:45rpx;
  vertical-align: middle;
  position: relative;
  bottom: 6rpx;
}
.gs_sign_day view{
  display:inline-block;
  font-size: 30rpx;
  margin-left: 14rpx;
  color:#707070;
}
.gs_sign_day view text{
  color:#dd2522;
}
.gs_sign_content{
  padding:20rpx;
}
.gs_week{
  overflow:hidden;
}
.gs_wook{
  display:inline-block;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.gs_wook view{
  display: inline-block;
  font-size:30rpx;
  color:#707070;
  width:60rpx;
  height:60rpx;
  line-height:60rpx;
}
.gs_clocksucceed{
  position:absolute;
  top:10rpx;
  left:16rpx;
}
.gs_clocksucceed image{
  width:50rpx;
  height:50rpx;
  vertical-align: bottom;
  position: relative;
  bottom: 2rpx;
}
.gs_sign_content .gs_week:nth-child(2) .gs_wook view{
  color:#454545;
}
.gs_circle{
  padding:50rpx 0;
}
.gs_incircle{
  width:225rpx;
  height:225rpx;
  background-color: #cce6ff;
  border-radius:50%;
  padding: 10rpx;
  margin:20rpx auto;
  cursor: pointer;
}
.gs_excircle{
  width:100%;
  height: 100%;
  background-color:#fff;
  border-radius:50%;
  position: relative;
}
.gs_innercircle{
  width:190rpx;
  height:190rpx;
  background-color: #8bc4f6;
  border-radius:50%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-size:36rpx;
}
.gs_calendar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
}
.gs_bg{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,.3);
}
.gs_gs_calendar_box{
  position: absolute;
  top:180rpx;
  left:40rpx;
  width:677rpx;
  background-color:#fff;
  padding:20rpx;
  box-sizing: border-box;
}
.canlendarTopView{
  overflow:hidden;
  padding:40rpx 20rpx;
  margin-left:20rpx;
  display: flex;
  align-items: center;
}
.leftBgView{
  float:left;
  width:153rpx;
  text-align: center;
}
.leftView image{
  width:60rpx;
  height:60rpx;
}
.centerView{
  float:left;
  font-size:32rpx;
  height:60rpx;
  line-height:60rpx;
  width:260rpx;
  text-align: center;
}
.rightBgView{
  float:left;
  width:156rpx;
  text-align: center;
}
.rightView image{
  width:60rpx;
  height:60rpx;
}
.weekBgView{
  overflow:hidden;
}
.weekView{
  float:left;
  width:14.28571428571429%;
  text-align: center;
  font-size:30rpx;
  color:#707070;
}
.dateBgView{
  overflow:hidden;
  margin-bottom:20rpx;
}
.dateView{
  display:inline-block;
  text-align: center;
  position:relative;
}
.datesView{
  font-size:30rpx;
  color:#2b2b2b;
}
.dateOn{
border-radius: 50%;
background-color: #53acfc;
color: #fff !important;
}
.del{
  position:absolute;
  top:-20rpx;
  right:-20rpx;
  width:50rpx;
  height:50rpx;
  background-color:#909090;
  border-radius:50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.del>text{
  color: #fff;
  font-size: 36rpx;
}
.leftView>text{
  font-size: 40rpx;
}
.clocksucceed{
  position:absolute;
  top:-3rpx;
  left:20rpx;
}
.clocksucceed image{
  width:50rpx;
  height:50rpx;
  vertical-align: middle;
  position: relative;
  bottom: 4rpx;
}
#fuconl{
  color: #FF6666;
}
/* 签到弹窗 */
.load{
  width: 80%;
  height: 600rpx;
  position: fixed;
  top:calc((100vh - 800rpx)/2);
  left: 10%;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  opacity: 1;
  z-index: 10;
}
.loadingpic {
  width: 100%;
  height: 93%;
  position: absolute;
  animation: load 3s linear 1s infinite;
  z-index: 10;
  margin-top: 7%;
}
@keyframes load{
  0%{
		webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.load-imagae{
  width:400rpx;
  height:400rpx;
  margin: 100rpx calc((100% - 400rpx)/2);
  position: absolute;
  z-index: 11;
}
.load-centent{
  width:400rpx;
  height:400rpx;
  margin: 100rpx calc((100% - 400rpx)/2);
  position: relative;
  z-index: 12;
  text-align: center;
  padding: 25% 10% 5% 10%;
}
.load-centent>view:nth-child(1){
  font-size: 34rpx;
  color: #fff;
}
.load-centent>view:nth-child(2){
  color: #fff;
  opacity: 0.7;
  margin: 20rpx 0;
  font-size: 24rpx;
}
.load-centent>view:nth-child(3){
  width: 85%;
  margin: 30rpx 7.5% 0 7.5%;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 40rpx;
  background-color: #F8D168;
  color: #EB4331;
  font-size: 30rpx;
}

util.js引入文件：https://blog.csdn.net/qq_43764578/article/details/106059340
签到弹窗-图片素材：https://blog.csdn.net/qq_43764578/article/details/105854829

这个是我在网上拔下来的模板：https://www.cnblogs.com/web-know-how/p/9550137.html

这个签到模板是从网上拔下来，然后自己整理了一下把修改的地方都备注了一下，整个签到流程算是走通了，复制下来就能用。

签到流程是根据后台接口返回一个连续签到时间，还有今天是否签到，连续签到三十天就会重置签到进行修改的。


遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。