微信扫一扫以上小程序【许愿灯池】可以查看具体每日签到功能
效果图展示:
实现思路:
这里利用了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>
Jetbrains全家桶1年46,售后保障稳定
②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)
ifm!=time){
wx.showToast{
title: '今日已成功签到',
duration:2000
})
num++
let todaylist = this.data.today
todaylist.push{
today:time
})
this.setData{
num:num,
today:todaylist
})
// console.logtodaylist);
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 Dateyear,month,0).getDate) //获取当前月份的天数
let startWeek = new Dateyear + '/' + month + '/' + 1).getDay); //本月第一天是从星期几开始的
this.setData{
currentMonthDays,startWeek
})
},
//上个月按钮
bindPreMonth){
let {year,month} = this.data
//判断是否是1月
ifmonth - 1 >= 1){
month = month - 1
}else{
month = 12
year = year - 1
}
this.setData{
month,year
})
this.showCalendar)
},
//下个月按钮
bindNextMonth){
let {year,month} = this.data
//判断是否是12月
ifmonth + 1 <= 12){
month = month + 1
}else{
month = 1
year = year + 1
}
this.setData{
month,year
})
this.showCalendar)
}
})
注意:
复制代码后会出现按钮没有显示,这是因为这个按钮是logo图片,需要自行寻找logo来替换代码中的图片路径。