微信掃一掃以上小程序【許愿燈池】可以查看具體每日簽到功能

效果圖展示：

實現(xiàn)思路：

這里利用了wx.setStorageSynic()緩存，同時在設置緩存的時候賦值給一個變量，之后將這個變量和new Date().getDate()獲得的當日的value值進行比較，如果相同則不會執(zhí)行，如果不同則會實現(xiàn)簽到功能。這也就是每天只能簽到一次。

①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>已連續(xù)簽到</text>
  <view class="num">{
  
  {num}}</view>
  <text>天</text>
</view>

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

Jetbrains全家桶1年46，售后保障穩(wěn)定

②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({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  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
  })
}
   
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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已經(jīng)+1
    let currentMonthDays = new Date(year,month,0).getDate() //獲取當前月份的天數(shù)
    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()
  }
 
})

注意：

復制代碼后會出現(xiàn)按鈕沒有顯示，這是因為這個按鈕是logo圖片，需要自行尋找logo來替換代碼中的圖片路徑。

總結：

通過以上代碼可以搭建出和【許愿燈池】一樣 的每日簽到功能。如果想知道具體的簽到效果，可以微信搜一搜【許愿燈池】或是二維碼掃描如下：

總結

以上是生活随笔為你收集整理的微信小程序实现每日签到功能的方法_小程序签到功能(下载微信最新版)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。