微信小程序实现每日签到功能

微信扫一扫以上小程序【许愿灯池】可以查看具体每日签到功能

效果图展示：

        

实现思路：

这里利用了wx.setStorageSynic()缓存，同时在设置缓存的时候赋值给一个变量，之后将这个变量和new Date().getDate()获得的当日的value值进行比较，如果相同则不会执行，如果不同则会实现签到功能。这也就是每天只能签到一次。

①index.wxml

<view class="context">
<view class="top">
  <image src="../../icon/left.png" bindtap="bindPreMonth"></image>
  <view>{{year}}年{{month}}月</view>
  <image src="../../icon/right.png" bindtap="bindNextMonth"></image>
</view>

<view  class="middle">
  <view wx:for="{{data_arr}}" wx:key="index" class="middle_num">
    {{item}}
  </view>
</view>

<view class="calen">

  <view wx:for="{{startWeek}}" wx:key="index" class="calen_blank"></view>
  <view wx:for="{{currentMonthDays}}" 
  class='{{(index+1 == today[0].today ? "active": "calen_num")}}' 
    wx:key="index">
  {{index+1}}
  </view>
  
</view>

</view>
<button bindtap="qiandao">签到</button>

<view class="date">
  <text>已连续签到</text>
  <view class="num">{{num}}</view>
  <text>天</text>
</view>

<view class="fighting">
 
  <text>加油！</text>
</view>

②index.wxss

.context{
  width: 96%;
  background-color: antiquewhite;
  margin: 0 auto;
  padding: 10rpx;
  border-radius: 20px 20px 20px 20px;
  margin-top: 20rpx;
}
.top{
  height: 80rpx;
  display: flex;
  justify-content: space-around;
}
.top image{
  height: 30rpx;
  width: 30rpx;
}
.middle{
  display: flex;
}
.middle_num{
  width: 14%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calen{
  display: flex;
  height: 400rpx;
  flex-wrap: wrap; /* 必要的时候拆行或拆列。 */
}
.calen_blank{
  width: 14%;
  height: 20%;
  background-color: antiquewhite;
}
.calen_num{
  width: 14%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  background-color:yellow;
  width: 14%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

button{
  position: relative;
  margin-top: 10%;
  border-radius: 20px 20px 20px 20px;
}

.date{
  position: relative;
  left: 3%;
  margin-top: 130rpx;
  width: 30%;
  height: 125rpx;
  text-align: center;
  background-color: white;
  border-radius: 20px 20px 20px 20px;
}
.date .num{
  color:red;
  font-weight: 700;
}
.date text{
  font-size: 32rpx;
}

.fighting{
  position: relative;
  left: 65%;
  margin-top: -119rpx;
  width: 30%;
  height: 125rpx;
  text-align: center;
  background-color: white;
  border-radius: 20px 20px 20px 20px;
  line-height: 125rpx;
}
.fighting text{
  font-size: 55rpx;
  font-weight: 700;
  color: red;
}

③index.js

let num =0


Page({
  /**
   * 页面的初始数据
   */
  data: {
    data_arr:["日","一","二","三","四","五","六"],
    year:"",
    month:"",
    today:[],
    num:0,

    nowlist:[]
  },
  qiandao(){ 
    
    let m = wx.getStorageSync('day')
    
    var time = new Date().getDate()
    
    if(m!=time){
    
    wx.showToast({
      title: '今日已成功签到',
      duration:2000
    })
    num++
    let todaylist = this.data.today
    todaylist.push({
      today:time
    })
    
    this.setData({
      num:num,
      today:todaylist
    })
    // console.log(todaylist);

    wx.setStorageSync('day', new Date().getDate()) 
    wx.setStorageSync('month', new Date().getMonth()+1)
    wx.setStorageSync('num', this.data.num)
    
}
else{
  wx.showToast({
    title: '今日已签到',
    icon:'error',
    duration:2000
  })
}
   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {   

  let number = wx.getStorageSync('num')   
   let day = wx.getStorageSync('day')
   let nowlist = this.data.nowlist
   nowlist.push({
     today:day
   })
    this.setData({
      num:number,
     today:nowlist
    })


    let now = new Date()
    let year = now.getFullYear()
    // month获取是从 0~11
    let month = now.getMonth() + 1
    this.setData({
      year,month
    })
    this.showCalendar()

    
  },
  showCalendar(){
    let {year,month} = this.data
    //以下两个month已经+1
    let currentMonthDays = new Date(year,month,0).getDate() //获取当前月份的天数
    let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //本月第一天是从星期几开始的
    this.setData({
      currentMonthDays,startWeek
    })
  },

  //上个月按钮
  bindPreMonth(){
    let {year,month} = this.data
    //判断是否是1月
    if(month - 1 >= 1){
      month = month - 1 
    }else{
      month = 12
      year = year - 1
    }
    this.setData({
      month,year
    })
    this.showCalendar()
  },

  //下个月按钮
  bindNextMonth(){
    let {year,month} = this.data
    //判断是否是12月
    if(month + 1 <= 12){
      month = month + 1 
    }else{
      month = 1
      year = year + 1
    }
    this.setData({
      month,year
    })
    this.showCalendar()
  }
 
})

注意：

复制代码后会出现按钮没有显示，这是因为这个按钮是logo图片，需要自行寻找logo来替换代码中的图片路径。

总结：

通过以上代码可以搭建出和【许愿灯池】一样 的每日签到功能。如果想知道具体的签到效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：