微信小程序实现签到功能

网友投稿 638 2023-11-11

本文实例为大家分享了微信小程序实现签到功能的具体代码，供大家参考，具体内容如下

微信小程序实现签到功能

效果图：

今天是16号，所以显示已签到，渲染页面时请求后台传的参数为这月签到的日期

如：["16", "14"]

点击签到执行

calendarSign

sign.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!--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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
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

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家

您可能感兴趣的文章:微信小程序实现打卡签到页面微信小程序实现签到弹窗动画微信小程序实现日历签到微信小程序以7天为周期连续签到7天功能效果的示例代码微信小程序连续签到7天积分获得功能的示例代码使用python实现微信小程序自动签到功能微信小程序实现二维码签到考勤系统微信小程序本地存储实现每日签到、连续签到功能微信小程序签到功能微信小程序和公众号实现签到页面

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js
上一篇:微信小程序实现登录界面
下一篇:微信小程序之高德地图多点路线规划过程示例详解
相关文章

 发表评论

暂时没有评论，来抢沙发吧~