微信小程序签到功能怎么弄?

　　微信小程序签到功能怎么弄?上班要打卡，游戏要签到，很多东西为了留住用户，很多应用都有签到，那么小程序里面的签到怎么弄呢?下面小编给大家介绍一下吧。

　　微信小程序签到功能怎么弄?

　　微信小程序签到功能其实比较简单，我们一起来看下小程序页面效果图：

　　小程序源码如下

　　小程序js：

　　//index.js

　　//获取应用实例

　　var app = getApp();

　　var calendarSignData;

　　var date;

　　var calendarSignDay;

　　Page({

　　//事件处理函数

　　calendarSign: function() {

　　calendarSignData[date]=date;

　　console.log(calendarSignData);

　　calendarSignDay=calendarSignDay+1;

　　wx.setStorageSync("calendarSignData",calendarSignData);

　　wx.setStorageSync("calendarSignDay",calendarSignDay);

　　wx.showToast({

　　title: '签到成功',

　　icon: 'success',

　　duration: 2000

　　})

　　this.setData({

　　calendarSignData:calendarSignData,

　　calendarSignDay:calendarSignDay

　　})

　　},

　　onLoad: function () {

　　var mydate=new Date();

　　var year=mydate.getFullYear();

　　var month=mydate.getMonth()+1;

　　date=mydate.getDate();

　　console.log("date"+date)

　　var day=mydate.getDay();

　　console.log(day)

　　var nbsp=7-((date-day)%7);

　　console.log("nbsp"+nbsp);

　　var monthDaySize;

　　if(month==1||month==3||month==5||month==7||month==8||month==10||month==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;

　　}

　　};

　　// 判断是否签到过

　　if(wx.getStorageSync("calendarSignData")==null||wx.getStorageSync("calendarSignData")==''){

　　wx.setStorageSync("calendarSignData",new Array(monthDaySize));

　　};

　　if(wx.getStorageSync("calendarSignDay")==null||wx.getStorageSync("calendarSignDay")==''){

　　wx.setStorageSync("calendarSignDay",0);

　　}

　　calendarSignData=wx.getStorageSync("calendarSignData")

　　calendarSignDay=wx.getStorageSync("calendarSignDay")

　　console.log(calendarSignData);

　　console.log(calendarSignDay)

　　this.setData({

　　year:year,

　　month:month,

　　nbsp:nbsp,

　　monthDaySize:monthDaySize,

　　date:date,

　　calendarSignData:calendarSignData,

　　calendarSignDay:calendarSignDay

　　})

　　}

　　})

　　小程序wxml：

　　小程序wxss：

　　/**index.wxss**/

　　.t_red{

　　color: red;

　　}

　　.t_blue{

　　color: royalblue;

　　}

　　.calendar{

　　margin: 0 1vw;

　　}

　　.time{

　　padding: 16rpx 20rpx;

　　background-color: wheat;

　　display: flex;

　　}

　　.time view{

　　flex: 1;

　　font-size: 30rpx;

　　}

　　.time view text{

　　font-size: 38rpx;

　　}

　　.weekName{

　　background-color: gainsboro;

　　width: 100%;

　　display: flex;

　　padding: 16rpx 0;

　　}

　　.weekName view{

　　flex: 1;

　　text-align: center;

　　}

　　.sunday,.saturday{

　　color: red;

　　}

　　.week{

　　width: 100%;

　　}

　　.week view{

　　width: 14.2%;

　　height: 80rpx;

　　line-height: 80rpx;

　　display: inline-block;

　　margin: 20rpx 0;

　　text-align: center;

　　}

　　.week view text{

　　width: 100%;

　　height: 100%;

　　display: inline-block;

　　}

　　.calendarSign{

　　margin: 20rpx;

　　}

　　以上就是小编为大家搜集的微信小程序签到功能怎么弄?的全部内容了，希望能帮到大家。如果你还有更多疑问或者建议，可以来我们微小乔的网站哦，谢谢大家的关注!

相关推荐：

签到打卡小程序源代码是什么?

签到打卡的小程序怎么用？小程序签到打卡功能使用方法

签到打卡小程序怎么用?签到打卡小程序添加使用方法