本文实例为大家分享了微信小程序实现签到功能的具体代码，供大家参考，具体内容如下

效果图：

今天是16号，所以显示已签到，渲染页面时请求后台传的参数为这月签到的日期

如：['16', '14']

点击签到执行

日历设计

sign.wxml

！索引。wxml-view class=' calendar ' view class=' bcfff ' view class=' weekName ' view class='星期一'一/view view class='星期二'二/view view class='星期三'三/view view class='星期四'四/view view class='星期五'五/view view class='星期六'六/view view class='sunday '日/view /view view class='week '！-填补空格-查看=“{ { nbsp } }”的wx : n/view！-循环日期- !-当天以前-view wx : for=' { { date-1 } } ' style=' color : gainsboro；'text wx : if=' { { item 1==日历标志数据[item 1]} } ' style=' color : # 2ccecb；'{ { item 1 } }/text text wx : else=' ' { { item 1 } }/text/view！-当天-view style=' text wx : if=' { { is _ qd } } ' style=' color : # 2ccecb；{ { date } }/text text wx : else=' ' style=' ' { { date } }/text/view！-以后-view wx : for=' { { monthDaySize-date } } ' { { item date 1 } }/view/view view class=' calendar sign ' image bind tap=' calendar sign ' class=' btnimg ' src=' https://jpadmin。99 dudesign。com/public/img/source/BTN _ icon _ wodekao Qin 1。png '/图像！- wx:if='{{date！=calendarsignddata[date]} } '-/view/view！-签到成功- view class='zhegai hide {{qdView？block ' : ' ' } } ' bind tap=' quxiaoQd '/view view class=' success qd hide { { qdView？block ' : ' ' } } ' view class=' qdtitle '签到成功/view view class=' qdcontent ' wx : if=' { { is _ qd } } '今天已经签过了~/view view class=' qdcontent ' wx : else签到成功，获得{{integral}}积分，您已连续签到{ {规则}}天！/view view class=' queding ' bind tap=' quxiaoQd '确定/view/viewsign.js

var app=GetApp()；var calendarSignDatavar日期；定义变量日历日；定义变量是_ qd页面({ /** *页面的初始数据*/data: { qdView: false，calendarSignData: ' '，calendarSignDay: ' '，is_qd: false，}，quxiaoQd:函数{ var那=thith hat . setdata({ qdview : false，is_qd: true }) }，//事件处理函数日历符号：函数{ var=this那个。setdata({ qdview : true })日历符号数据[date]=date；控制台。log(calendarsignddata)；日历日=日历日1;var today=新日期()。getDate()wx。请求({ URL : GetApp()。数据。主持人后台的接口，method: 'POST '，data : { ' user _ id ' : wx。getstorageync(' user _ id ')，' sign_num': today }，标头： { ' content-type ' : ' application/x-www-form-URL编码'//通过邮政传值，所以要加表头}，成功：函数(RES){即。setdata({ rule : RES . data。规则，integral: res.data.integral，})})wx。setstoragesync('日历标志数据'，日历标志数据)；wx。setstoragesync(' calendarSignDay '，calendarSignDay)；这个。setdata({ calendar sign data : calendar sign date，calendar sign day : calendar sign day })}，/** *生命周期函数-监听页面加载*/onLoad:函数(){ var=thisvar my Date=新日期()；var year=我的日期。getfull year()；var month=我的日期。get month()1；日期=我的日期。getdate()；控制台。日志(' date ' date)var day=我的日期。getday()；控制台。log(day)var nbsp=7-((date-day)% 7)；控制台。日志(‘nbsp’)；var monthDaySize如果（月==1 ||月==3 ||月==5 ||月==7 ||月==8 ||月==10 ||月==12){ monthDaySize=31；} else if(month==4 | | month==6 | | month==9 | | month==11){ monthDaySize=30；} else if (month==2) { //计算是否是闰年，如果是二月份则是29天if((year-2000)% 4==0){ monthDaySize=29；} else { monthDaySize=28 } }//传Ajax wx。请求({ URL : GetApp()。数据。主机索引。PHP？g=apim=outputa=sign_list '，method: 'POST '，data : { ' user _ id ' : wx。getstorageync(' user _ id ')}，标头： { '内容类型' : ' application/x-www-form-URL编码' }，success 3360 function(RES){//判断是否签到过if(RES . data==null){日历符号数据=新数组(monthDaySize)wx。setstoragesync('日历标志数据'，日历标志数据)；} else { var是_ qdfor(RES . data中的var I){ parsent(RES . data[I])calendarsignddata=new Array(monthDaySize)calendarsignddata[parsent(RES . data[I])]=parsent(RES . data[I])wx。setstorageync(' calendarsigndata '，calendarsigndata)；控制台。日志(日期)控制台。日志(parsent(RES . data[I])if(parsent(RES . data[I])==date){ console。日志(1)wx。setstorageync(' calendarSignDay '，1)；is _ qd=true } else { wx。setstoragesync(' calendarsigndday '，0)；} } }控制台。log(is _ qd)日历符号数据=wx。getstoragesync('日历符号数据')日历符号日=wx。getstoragesync('日历标志日')控制台。日志(日历标志数据)；控制台。记录。setdata({ is _ qd : is _ qd，year: year，month: month，nbsp: nbsp，monthDaySize: monthDaySize，date: date，calendarsignddata 3360 calendarSignDay，calendarSignDay : calendarSignDay })})}，/** *生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ wx。删除存储ync(“日历标志数据”)wx。删除存储ync('日历符号日')}，/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharappmessage : function(){ } })符号。页面样式表

第{底色： # 2 cecb} .t _ red { color: red}。t _ blue { color: royalblue}。日历{宽度： 500 rpxmargin : 200 rpx 125 rpx/*高度： 600 rpx*//*背景色： # ffffff*/边框-半径： 4rpx} .时间{ padding: 16rpx 20rpx背景-颜色：小麦；display: flex}。时间视图{ flex : 1；font-size : 30 rpx} .时间视图文本{ font-size : 38rpx} .weekName {底色： # 54 ff9c宽度： 100%;display : flex padd : 30 rpx 0；font-size : 40 rpxcolor: # fff}。weekName视图{ flex : 1；文本对齐：中心；} .周{宽度： 100%；} .周视图{宽度：14.2%；高度： 50 rpx线高： 50 rpx显示器：内联块；保证金： 10 rpx 0；文本对齐：中心；font-size : 30 rpxcolor: # 747474}。周视图文本{宽度： 100%；高度： 100%;显示器：内联块；} .日历符号{页边距-top :-75 rpx；文本对齐：中心；} .btnimg { width: 150rpx高度： 150 rpx边界半径： 50%;} .bcfff {背景-颜色：白色；填充-底部： 100 rpx} .zhegai {位置：固定；top : 0；左： 0；底部： 0；宽度： 100%;高度： 100%;背景-颜色：黑色；opacity: 0.4 }。成功{ position:固定；前：名50%；左侧： 50%;宽度： 550 rpx左边距：-275 rpx；保证金-top :-200 rpx；背景-颜色：白色；边界半径： 6rpxborder: 2rpx固体# 54ff9c文本对齐：中心；}.qdtitle { font-size : 32 rpx字体粗细：粗体；color : # 232323 adding : 20 rpx }。qdcontent { font-size : 30 rpxcolor : # 232323 adding : 20 rpx 10 rpx }。queding { font-size : 30 rpxcolor : # 232323 border-top : 1rpx实心# ccccccpadding: 20rpx }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。