微信小程序签到打卡怎么开发?

　　微信小程序签到打卡怎么开发?微信小程序签到打卡功能可以帮助一些小公司完成日常签到管理的功能，不用去买什么打卡的机器。下面一起来看看微信小程序签到打卡怎么开发?

　　微信小程序签到打卡怎么开发?

　　微信小程序签到打卡的开发还是比较实用的，首先我们一起来看下小程序页面效果图：

　　下面小编直接给大家献上小程序源码如下

　　小程序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;

　　}

　　微信小程序签到打卡怎么开发想必大家都明白了吧，大家把上面的小程序代码编写好后，打包交给官方进行小程序审核后，就可以上线使用了。感谢大家的阅读，希望大家能够关注微小乔哦。

相关推荐：

怎么破解小程序打卡?

实例解答打卡小程序怎么样

如何在小程序中修改打卡?小程序修改打卡怎么实现?