微信小程序实现签到功能
程序员文章站
2022-10-08 12:49:57
本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下
效果图:
今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日...
本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下
效果图:
今天是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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 小程序云开发部署攻略(图文教程)
下一篇: AI制作漂亮的镂空花纹