我要评论本文实例为大家分享了微信小程序实现签到功能的具体代码，供大家参考，具体内容如下
效果图：
今天是16号，所以显示已签到，渲染页面时请求后台传的参数为这月签到的日期
如：["16", "14"]
点击签到执行
calendarsign
sign.wxml
<!--index.wxml-->
<view class="calendar">
<view class='bcfff'>
<view class="weekname">
<view class="monday">一</view>
<view class="tuesday">二</view>
<view class="wednesday">三</view>
<view class="thursday">四</view>
<view class="friday">五</view>
<view class="saturday">六</view>
<view class="sunday">日</view>
</view>
<view class="week">
<!--填补空格-->
<view wx:for="{{nbsp}}">\n</view>
<!--循环日期-->
<!-- 当天以前 -->
<view wx:for="{{date-1}}" style="color:gainsboro;">
<text wx:if="{{item+1==calendarsigndata[item+1]}}" style="color: #2ccecb;">{{item+1}}</text>
<text wx:else="">{{item+1}}</text>
</view>
<!-- 当天 -->
<view style="">
<text wx:if="{{is_qd}}" style="color: #2ccecb;">{{date}}</text>
<text wx:else="" style="">{{date}}</text>
</view>
<!-- 以后 -->
<view wx:for="{{monthdaysize-date}}">{{item+date+1}}</view>
</view>
</view>
<view class="calendarsign">
<image bindtap="calendarsign" class='btnimg' src='https://jpadmin.99dudesign.com/public/img/source/btn_icon_wodekaoqin1.png'></image>
<!-- wx:if="{{date!=calendarsigndata[date]}}" -->
</view>
</view>
<!-- 签到成功 -->
<view class='zhegai hide {{qdview?"block":""}}' bindtap='quxiaoqd'></view>
<view class='successqd hide {{qdview?"block":""}}'>
<view class='qdtitle'>签到成功</view>
<view class='qdcontent' wx:if="{{is_qd}}">今天已经签过了~</view>
<view class='qdcontent' wx:else>签到成功，获得{{integral}}积分，您已连续签到{{rule}}天！</view>
<view class='queding' bindtap='quxiaoqd'>确定</view>
</view>
sign.js
var app = getapp();
var calendarsigndata;
var date;
var calendarsignday;
var is_qd;
page({
/**
* 页面的初始数据
*/
data: {
qdview: false,
calendarsigndata: "",
calendarsignday: "",
is_qd: false,
},
quxiaoqd: function (e) {
var that = this;
that.setdata({
qdview: false,
is_qd: true
})
},
//事件处理函数
calendarsign: function (e) {
var that = this;
that.setdata({
qdview: true
})
calendarsigndata[date] = date;
console.log(calendarsigndata);
calendarsignday = calendarsignday + 1;
var today = new date().getdate()
wx.request({
url: getapp().data.host + '后台的接口',
method: "post",
data: {
"user_id": wx.getstoragesync('user_id'),
"sign_num": today
},
header: {
'content-type': 'application/x-www-form-urlencoded' //通过post传值，所以要加header
},
success: function (res) {
that.setdata({
rule: res.data.rule,
integral: res.data.integral,
})
}
})
wx.setstoragesync("calendarsigndata", calendarsigndata);
wx.setstoragesync("calendarsignday", calendarsignday);
this.setdata({
calendarsigndata: calendarsigndata,
calendarsignday: calendarsignday
})
},
/**
* 生命周期函数--监听页面加载
*/
onload: function () {
var that = this;
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;
}
};
// 传ajax
wx.request({
url: getapp().data.host + 'index.php?g=api&m=output&a=sign_list',
method: "post",
data: {
"user_id": wx.getstoragesync('user_id')
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// 判断是否签到过
if (res.data == null) {
calendarsigndata = new array(monthdaysize)
wx.setstoragesync("calendarsigndata", calendarsigndata);
} else {
var is_qd;
for (var i in res.data) {
parseint(res.data[i])
calendarsigndata = new array(monthdaysize)
calendarsigndata[parseint(res.data[i])] = parseint(res.data[i])
wx.setstoragesync("calendarsigndata", calendarsigndata);
console.log(date)
console.log(parseint(res.data[i]))
if (parseint(res.data[i]) == date) {
console.log(1)
wx.setstoragesync("calendarsignday", 1);
is_qd = true
} else {
wx.setstoragesync("calendarsignday", 0);
}
}
}
console.log(is_qd)
calendarsigndata = wx.getstoragesync("calendarsigndata")
calendarsignday = wx.getstoragesync("calendarsignday")
console.log(calendarsigndata);
console.log(calendarsignday)
that.setdata({
is_qd: is_qd,
year: year,
month: month,
nbsp: nbsp,
monthdaysize: monthdaysize,
date: date,
calendarsigndata: calendarsigndata,
calendarsignday: calendarsignday
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onready: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onshow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onhide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onunload: function () {
wx.removestoragesync("calendarsigndata")
wx.removestoragesync("calendarsignday")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onpulldownrefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onreachbottom: function () {
},
/**
* 用户点击右上角分享
*/
onshareappmessage: function () {
}
})
sign.wxss
page {
background-color: #2ccecb;
}
.t_red {
color: red;
}
.t_blue {
color: royalblue;
}
.calendar {
width: 500rpx;
margin: 200rpx 125rpx;
/* height: 600rpx; *//* background-color: #ffffff; */
border-radius: 4rpx;
}
.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: #54ff9c;
width: 100%;
display: flex;
padding: 30rpx 0;
font-size: 40rpx;
color: #fff;
}
.weekname view {
flex: 1;
text-align: center;
}
.week {
width: 100%;
}
.week view {
width: 14.2%;
height: 50rpx;
line-height: 50rpx;
display: inline-block;
margin: 10rpx 0;
text-align: center;
font-size: 30rpx;
color: #747474;
}
.week view text {
width: 100%;
height: 100%;
display: inline-block;
}
.calendarsign {
margin-top: -75rpx;
text-align: center;
}
.btnimg {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
}
.bcfff {
background-color: white;
padding-bottom: 100rpx;
}
.zhegai {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.successqd {
position: fixed;
top: 50%;
left: 50%;
width: 550rpx;
margin-left: -275rpx;
margin-top: -200rpx;
background-color:white;
border-radius: 6rpx;
border: 2rpx solid #54ff9c;
text-align: center;
}
.qdtitle{
font-size: 32rpx;
font-weight: bold;
color: #232323;
padding: 20rpx;
}
.qdcontent{
font-size: 30rpx;
color: #232323;
padding: 20rpx 10rpx;
}
.queding{
font-size: 30rpx;
color: #232323;
border-top: 1rpx solid #cccccc;
padding: 20rpx;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论