1.

2.预览图

3.运行代码代码资源包

4.wxml

5.签到头部

6.为了方便，我在这里写了两个头部，已签到用这种

viewclass="headers_wrapper"wx:if="{{signtype=='2'}}"viewclass="for_headerleft"imagesrc="../../images/calendar2.png"/image/viewviewclass="for_headerright"viewclass="for_headerright_list"今日已签到/viewviewclass="for_headerright_list1"已连续签到span{{seriesCount}}/span天/viewviewclass="for_headerright_list2"再连续签到span{{series_gos}}/span天即可获得更多奖励/view/view/view

7.未签到

viewclass="headers_wrapper"wx:if="{{signtype=='1'}}"viewclass="for_headerleft"imagesrc="../../images/calendar1.png"/image/viewviewclass="for_headerright"viewclass="for_headerright_list"今日未签到/viewviewclass="for_headerright_list1"已连续签到span{{seriesCount}}/span天/viewviewclass="for_headerright_list2"再连续签到span{{series_gos}}/span天即可获得更多奖励/view/view/view

8.日历wxml

viewclass="containers"viewclass="clearPadding"viewclass="calendar"viewclass="calen_header"buttonclass='calendar_month_prev'bindtap="sign_prev"imagesrc="../../images/cle_btn.png"bindtap="sign_prev"/image/buttonbuttonclass='calendar_month_next'bindtap="sign_next"imagesrc="../../images/cle_btn.png"/image/button/viewviewclass="calenbox"viewclass="calendar_thisday"text{{showYear}}/text年text{{showMonth}}/text月/view/viewviewclass="calendar_wrapper"viewclass="week_day"viewclass="weeklist"日/viewviewclass="weeklist"一/viewviewclass="weeklist"二/viewviewclass="weeklist"三/viewviewclass="weeklist"四/viewviewclass="weeklist"五/viewviewclass="weeklist"六/view/viewviewviewclass="month_day"viewclass="day_list"wx:for="{{signDays[0]}}"wx:key="un"wx:for-index="index"wx:for-item="item"{{item==null?'':item.normalday}}viewclass="day_hover"wx:if="{{item.signday=='is'}}"/view/view/viewviewclass="month_day"viewclass="day_list"wx:for="{{signDays[1]}}"wx:key="un"wx:for-index="index"wx:for-item="item"{{item==null?'':item.normalday}}viewclass="day_hover"wx:if="{{signs.indexof(item)-1}}"/viewviewclass="day_hover"wx:if="{{item.signday=='is'}}"/view/view/viewviewclass="month_day"viewclass="day_list"wx:for="{{signDays[2]}}"wx:key="un"wx:for-index="index"wx:for-item="item"{{item==null?'':item.normalday}}viewclass="day_hover"wx:if="{{item.signday=='is'}}"/view/view/viewviewclass="month_day"viewclass="day_list"wx:for="{{signDays[3]}}"wx:key="un"wx:for-index="index"wx:for-item="item"{{item==null?'':item.normalday}}viewclass="day_hover"wx:if="{{item.signday=='is'}}"/view/view/viewviewclass="month_day"viewclass="day_list"wx:for="{{signDays[4]}}"wx:key="un"wx:for-index="index"wx:for-item="item"{{item==null?'':item.normalday}}viewclass="day_hover"wx:if="{{item.signday=='is'}}"/view/view/viewviewclass="month_day"viewclass="day_list"wx:for="{{signDays[5]}}"wx:key="un"wx:for-index="index"wx:for-item="item"{{item==null?'':item.normalday}}viewclass="day_hover"wx:if="{{item.signday=='is'}}"/view/view/view/view!--控制月份日历输出--/viewviewclass="text-center"wx:if="{{signtype=='1'}}"buttonclass="btn-qiandao"bindtap="sign_start"签到/button/viewviewclass="text-center"wx:if="{{signtype=='2'}}"buttonclass="btn-qiandao1"bindtap="sign_end"已签到/button/view/view/view/view

9.签到奖励部分，略。

10.js:

11.data部分

data:{signDay:[{"signDay":"9"},{"signDay":"11"},{"signDay":"12"},{"signDay":"15"}],signs:[1,2,3,5,6,7],signtype:"1",signDays:[],todayDate:"1",todayMonth:"",todayYear:"",nextMonth:"",nextYear:"",prevYear:"",prevMonth:"",seriesCount:"99",series_gos:"15",for_signs:"none",powerData:"0",},

12.调用自己画的日历js

varyangdate=require("../../utils/sign_in_ss.js");///**//*//*@authors杨京葛(1141407871@qq.com)//*@date2018-05-2119:26:19//*@version$v1.01$//*///////}varyang_date={//iyear年份//iMonth月份//that//iyear年份bulidCal:function(iYear,iMonth,that,signday){varthat=that;varaMonth=newArray();aMonth[0]=newArray(7);aMonth[1]=newArray(7);aMonth[2]=newArray(7);aMonth[3]=newArray(7);aMonth[4]=newArray(7);aMonth[5]=newArray(7);vardCalDate=newDate(iYear,iMonth-1,1);variDayOfFirst=dCalDate.getDay();//判断当前月份第一天周几varcurMonthDays=newDate(dCalDate.getFullYear(),(dCalDate.getMonth()+1),0).getDate();//判断当前月份有多少天console.log("本月共有"+curMonthDays+"天");console.log("本月第一天周"+iDayOfFirst);variDaysInMonth=(iMonth,iYear);variVarDate=1;vard,w;for(d=iDayOfFirst;d7;d++){console.log(signday);if(signday.indexOf(iVarDate)-1){//console.log(111);aMonth[0][d]={signday:"is",normalday:iVarDate,};}else{//console.log(22);aMonth[0][d]={signday:"nois",normalday:iVarDate,};}iVarDate++;}//处理每月第一天出现位置for(w=1;w6;w++){for(d=0;d7;d++){if(iVarDate=iDaysInMonth){if(signday.indexOf(iVarDate)-1){//console.log(111);aMonth[w][d]={signday:"is",normalday:iVarDate,};}else{//console.log(22);aMonth[w][d]={signday:"nois",normalday:iVarDate,};}if(iVarDate==curMonthDays){console.log(aMonth);that.setData({signDays:aMonth,});returnaMonth;}else{iVarDate++;}}}}//处理每月其他天位置console.log(aMonth);returnaMonth;},//日历签到完成};module.exports={yang_date:yang_date}

13.原始数据加载

onLoad:function(options){vargetToday=newDate();vartodayDate=getToday.getDate();vartodayMonths=getToday.getMonth();vartodayMonth=(todayMonths+1);vartodayYear=getToday.getFullYear();vartodayss=getToday.getDate();if(todayMonth10){vartodayMonthss="0"+todayMonth;}else{vartodayMonthss=todayMonth;}console.log(todayss);vargodates=todayYear+"-"+todayMonthss+"-01";//向服务器发送自己需要的签到月份数据varthat=this;wx.request({url:'',method:"POST",header:{"Content-Type":"application/x-www-form-urlencoded",},data:{date:godates,},success:function(res){if(res.data.status==1){console.log(res.data);var$datas=res.data.data;//从服务器获取签到数据数组(1,2,3)varsignDate_arr=newArray();varanns=$datas.signDays;varcount_signday=$datas.seriesCount;if(count_signday9){varseries_gos="0";}elseif(count_signday0){varseries_gos=99;}else{varseries_gos=10-parseInt(count_signday);}that.setData({seriesCount:count_signday,series_gos:series_gos,});for(varpinanns){//遍历json对象的每个key/value对,p为keyvarnewdats=anns[p];signDate_arr.push(newdats);}if(signDate_arr.indexOf(todayss)-1){console.log("当前已签到");that.setData({signtype:"2",});}else{console.log("当前未签到");that.setData({signtype:"1",});}console.log(signDate_arr[0]);yangdate.yang_date.bulidCal(todayYear,todayMonth,that,signDate_arr);//初始化加载日历}else{wx.showToast({title:'网络不通畅',icon:'loading',duration:1500});}},error:function(){wx.showToast({title:'服务器错误',icon:'loading',duration:1500});}});this.setData({todayDate:todayDate,todayMonth:todayMonth,todayYear:todayYear,prevYear:todayYear,nextYear:todayYear,prevMonth:todayMonth,nextMonth:todayMonth,showYear:todayYear,showMonth:todayMonth,});//存入一份原始月份日期，一份用来跳转的月份},

14.上一月下一月切换

sign_prev:function(){console.log("上一月");varshowMonth=this.data.showMonth;vartodayMonth=this.data.todayMonth;if(showMonth=="1"){varshowMonth="12";varshowYear=parseInt(this.data.showYear)-1;}else{varshowMonth=parseInt(this.data.showMonth)-1;varshowYear=this.data.showYear;}if(parseInt(todayMonth-3)==showMonth){wx.showToast({title:'不能查看更多了',icon:'loading',duration:1500});return;}varthat=this;if(showMonth10){varshowMonths="0"+showMonth;}else{varshowMonths=todayMonth;}vargodates=showYear+"-"+showMonths+"-01";wx.request({url:'网络请求',method:"POST",header:{"Content-Type":"application/x-www-form-urlencoded",},data:{date:godates,},success:function(res){if(res.data.status==1){console.log(res.data);var$datas=res.data.data;/*从服务器获取上个月签到的日期(1,2,3,4,5)*/varsignDate_arr=newArray();varanns=$datas.signDays;for(varpinanns){//遍历json对象的每个key/value对,p为keyvarnewdats=anns[p];signDate_arr.push(newdats);}console.log(signDate_arr[0]);//引入日历默认yangdate.yang_date.bulidCal(showYear,showMonth,that,signDate_arr);//初始化加载日历}else{wx.showToast({title:'网络不通畅',icon:'loading',duration:1500});}},error:function(){wx.showToast({title:'服务器错误',icon:'loading',duration:1500});}});this.setData({showYear:showYear,showMonth:showMonth,});},sign_next:function(){console.log("下一月");varshowMonth=this.data.showMonth;vartodayMonth=this.data.todayMonth;if(todayMonth==showMonth){wx.showToast({title:'未签到不能查看',icon:'loading',duration:1500});return;}if(showMonth=="12"){varshowMonth="1";varshowYear=parseInt(this.data.showYear)+1;}else{varshowMonth=parseInt(this.data.showMonth)+1;varshowYear=this.data.showYear;}varthat=this;if(showMonth10){varshowMonths="0"+showMonth;}else{varshowMonths=todayMonth;}vargodates=showYear+"-"+showMonths+"-01";wx.request({url:baseurl+'/user/getUserSignData',method:"POST",header:{"Content-Type":"application/x-www-form-urlencoded","token":token},data:{date:godates,},success:function(res){if(res.data.status==1){console.log(res.data);var$datas=res.data.data;varsignDate_arr=newArray();varanns=$datas.signDays;for(varpinanns){//遍历json对象的每个key/value对,p为keyvarnewdats=anns[p];signDate_arr.push(newdats);}console.log(signDate_arr[0]);yangdate.yang_date.bulidCal(showYear,showMonth,that,signDate_arr);//初始化加载日历}else{wx.showToast({title:'网络不通畅',icon:'loading',duration:1500});}},error:function(){wx.showToast({title:'服务器错误',icon:'loading',duration:1500});}});this.setData({showYear:showYear,showMonth:showMonth,});},

15.签到，日历内塞入数据，或者执行onload加载数据插入日历

16.缺点:代码挺冗杂的，有很多可优化的地方。待解决。

17.亮点:代码挺容易懂的