本文实例为大家分享了微信小程序实现日历签到的具体代码,供大家参考,具体内容如下
wxml:
<!--pages/signin/signin.wxml--> <view class="contant"> <!-- 日历年月 --> <view class='calendar_title layer_center'> <view class='icon' bindtap='lastMonth'> <image src='https://www.atool.online/image/arrow_left.png' /> </view> <view class="nowDtae font60">{{year}}年{{month}}月</view> <view class='icon' bindtap='nextMonth'> <image src='https://www.atool.online/image/arrow_right.png' /> </view> </view> <!-- 日历主体 --> <view class='calendar'> <view class='header'> <view wx:for='{{date}}' wx:key='index' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}} '>{{item}} <view></view> </view> </view> <view class='date-box'> <block wx:for='{{dateArr}}' wx:key='index'> <view class='{{item.choose?"nowsDay":isToday == item.isToday ? "nowDay":""}}'> <view class='date-head font28' data-year='{{year}}' data-month='{{month}}' data-datenum='{{item.dateNum}}'> <view>{{item.dateNum}}</view> </view> </view> </block> </view> </view> </view> <view class="center flex_center" bindtap="signIn" wx:if="{{signinNow == false}}"> <view class="avatarUrl"> <image src="https://www.atool.online/image/clock.png"></image> </view> <view class="center_text font32">立即签到</view> </view> <view class="center flex_center" bindtap="alreadySign" wx:else> <view class="avatarUrl"> <image src="https://www.atool.online/image/clock.png"></image> </view> <view class="center_text center_texts font32">立即签到</view> </view> <view class="bottom flex_center"> <view class="bottom_text font36">本月累计签到<text>X</text>次</view> <view class="bottom_text font36">未签到<text>X</text>次</view> </view>
/* pages/signin/signin.wxss */ /* 日历 */ .contant { background: #fff; padding-bottom: 30rpx; } .calendar_title { color: #fff; padding: 30rpx 0; box-sizing: border-box; } .calendar_title .icon { width: 60rpx; height: 60rpx; font-size: 0; } .icon image { width: 100%; height: 100%; } .nowDtae { color: #4aa0ff; margin: 0 20rpx; } /* 日历 */ .calendar { width: 100%; background: #4aa0ff; opacity: .8; border-radius: 20rpx; padding: 0 0 20rpx; } .header { font-size: 0; width: 100%; margin: 0 auto; } .header>view { display: inline-block; width: 14.285%; color: #fff; font-size: 30rpx; text-align: center; border-bottom: 1px solid #D0D0D0; padding: 20rpx 0; } .weekMark { position: relative; width: 80%; margin: 0 auto; } .weekMark view { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 2px solid #69f; } .date-box { padding: 10rpx 0; width: 100%; margin: 0 auto; } .date-box>view { position: relative; display: inline-block; width: 14.285%; color: #666; text-align: center; vertical-align: middle; } .date-head { height: 60rpx; line-height: 60rpx; color: #fff; } .nowDay .date-head { width: 60rpx; border-radius: 50%; text-align: center; color: #fff; background-color: #ff9933; margin: 0 auto; } .nowsDay .date-head{ width: 60rpx; border-radius: 50%; text-align: center; color: #fff; background-color: #47c46d; margin: 0 auto; } /* 签到 */ .center { background: #fff; padding: 80rpx 0; box-sizing: border-box; margin: 20rpx 0; } .center_text { margin-top: 20rpx; color: #4aa0ff; } .center_texts{ color: #999999; } .bottom_text { font-weight: normal; line-height: 60rpx; } .bottom_text text { color: #66afff; } .bottom { background: #fff; padding: 60rpx 0; box-sizing: border-box; }
// pages/signin/signin.js import $ from '../../utils/fun.js' const app = getApp(); Page({ /** * 页面的初始数据 */ data: { // 日历 year: 0, month: 0, date: ['日', '一', '二', '三', '四', '五', '六'], dateArr: [], isToday: 0, isTodayWeek: false, todayIndex: 0, // 当前维度 latitude: "", // 当前精度 longitude: "", yesDate: [20200501, 20200511, 20200512, 20200508], //此处应该是接口返回的数据,先模拟了一个 signinNow: false }, // 签到 signIn() { let t = this; t.getLocation(); }, // 获取用户当前地理位置 getLocation() { let t = this; wx.getLocation({ type: 'wgs84', success: (res) => { var latitude = res.latitude var longitude = res.longitude t.setData({ latitude: latitude, longitude: longitude }); t.activeSign() } }) }, // 是否可以签到 activeSign() { let t = this; let nowdate = t.data.isToday; let dateArr = t.data.dateArr; let yesDate = t.data.yesDate; for (var i = 0; i < dateArr.length; i++) { if (dateArr[i].isToday == nowdate) { dateArr[i].choose = true; yesDate.push(nowdate); $.successToast("签到成功") t.setData({ signinNow: true, yesDate: yesDate }) } }; t.setData({ dateArr: dateArr }) }, // 签到过 alreadySign() { $.toast("今天已经签过到啦~") }, // 已签到日期 yesdate() { let t = this; let yesdate = t.data.yesDate; let dateArr = t.data.dateArr; for (var i = 0; i < dateArr.length; i++) { for (var j = 0; j < yesdate.length; j++) { if (dateArr[i].isToday == yesdate[j]) { dateArr[i].choose = true; } }; } t.setData({ dateArr: dateArr }) }, // 日历 dateInit: function (setYear, setMonth) { let t = this; //全部时间的月份都是按0~11基准,显示月份才+1 let dateArr = []; //需要遍历的日历数组数据 let arrLen = 0; //dateArr的数组长度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear || now.getFullYear(); let nextYear = 0; let month = setMonth || now.getMonth() //没有+1方便后面计算当月总天数 let nextMonth = (month + 1) > 11 ? 1 : (month + 1); let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期 let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天 let obj = {}; let num = 0; if (month + 1 > 11) { nextYear = year + 1; dayNums = new Date(nextYear, nextMonth, 0).getDate(); } arrLen = startWeek + dayNums; for (let i = 0; i < arrLen; i++) { if (i >= startWeek) { num = i - startWeek + 1 < 10 ? '0' + String(i - startWeek + 1) : String(i - startWeek + 1); obj = { isToday: '' + year + ((month + 1) < 10 ? "0" + (month + 1) : (month + 1)) + num, dateNum: num, weight: 5, choose: false } } else { obj = {}; } dateArr[i] = obj; } t.setData({ dateArr: dateArr }) let nowDate = new Date(); let nowYear = nowDate.getFullYear(); let nowMonth = nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1); let nowWeek = nowDate.getDay(); let getYear = setYear || nowYear; let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth; if (nowYear == getYear && nowMonth == getMonth) { t.setData({ isTodayWeek: true, todayIndex: nowWeek }) } else { t.setData({ isTodayWeek: false, todayIndex: -1 }) }; }, /** * 上月切换 */ lastMonth: function () { let t = this; //全部时间的月份都是按0~11基准,显示月份才+1 let year = t.data.month - 2 < 0 ? t.data.year - 1 : t.data.year; let month = t.data.month - 2 < 0 ? 11 : t.data.month - 2; t.setData({ year: year, month: (month + 1) }) t.dateInit(year, month); t.yesdate() }, /** * 下月切换 */ nextMonth: function () { let t = this; //全部时间的月份都是按0~11基准,显示月份才+1 let year = t.data.month > 11 ? t.data.year + 1 : t.data.year; let month = t.data.month > 11 ? 0 : t.data.month; t.setData({ year: year, month: (month + 1) }) t.dateInit(year, month); t.yesdate() }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let t = this; let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1 < 10 ? "0" + String(now.getMonth() + 1) : now.getMonth() + 1; t.dateInit(); t.setData({ year: year, month: Number(month), isToday: '' + year + month + now.getDate() }); t.yesdate() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
由于没有设计图,先把功能完善了。可能代码冗杂了,要是有大家有更便捷的写法,欢迎踊跃交流。
好多人需要fun.js的文件,这个文件跟签到的功能并没有关系,还是贴出来,方便大家交流。
//fun.js const toast = str => { return new Promise((resolve, reject) => { wx.showToast({ title: str, icon: "none", duration: 2000, success: () => { setTimeout(() => { resolve() }, 2000) } }) }) } const successToast = str => { return new Promise((resolve, reject) => { wx.showToast({ title: str, icon: "success", duration: 2000, success: () => { setTimeout(() => { resolve() }, 2000) } }) }) }; const showloading = () => { return new Promise((resolve, reject) => { wx.showLoading({ title: "加载中", success: () => { resolve() } }) }) }; const hideloading = () => { return new Promise((resolve, reject) => { wx.hideLoading({ success: () => { resolve() } }) }) }; const tijiaoloading = () => { return new Promise((resolve, reject) => { wx.showLoading({ title: "提交中,请稍后…", success: () => { resolve() } }) }) }; export default { toast: toast, successToast: successToast, showloading: showloading, hideloading: hideloading, tijiaoloading: tijiaoloading }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。