微信小程序实现日历签到功能
作者：若我君临天下
这篇文章主要为大家详细介绍了微信小程序实现日历签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现日历签到的具体代码，供大家参考，具体内容如下
wxml:
<!--pages/signin/signin.wxml-->
<view class="contant">
<!-- 日历年月 -->
<view class='calendar_title layer_center'>
<view class='icon' bindtap='lastMonth'>
<image src='/image/arrow_left.png' />
</view>
<view class="nowDtae font60">{{year}}年{{month}}月</view>
<view class='icon' bindtap='nextMonth'>
<image src='/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="/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="/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
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。