微信小程序日历签到功能

<!--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.latitudevar longitude = res.longitudet.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基准，显示月份才+1let 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基准，显示月份才+1let 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基准，显示月份才+1let 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
}

微信小程序日历签到功能相关推荐

python玩微信小程序游戏_使用python实现微信小程序自动签到功能
功能描述目标完成多账号微信小程序每天自动签到输出签到成功则向微信群发送签到成功的信息否则提示用户签到失败,需手动签到包管理 requests itchat time threading 程序 ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
微信小程序地图签到功能
签到功能转自:https://gitee.com/Suwanbin/positionCheckIn 也可参考:https://github.com/SincerelyUnique/wechat-min ...
微信小程序 - 日历签到编写
预览图运行代码代码资源包 wxml 签到头部为了方便,我在这里写了两个头部,已签到用这种 <view class="headers_wrapper" wx:if=&q ...
微信小程序日历签到，拿走即用~
参考了小友那个谁的,具体也忘记了,改be改be即用了,因为是日历,里面有一个算空格的地方,嘻嘻~,也是小友提供的,再次感谢! html: <view><view class=&quo ...
微信小程序php签到功能,简易微信小程序签到功能
一.效果图 (此图片来源于网络,如有侵权,请联系删除! ) 点击签到后 (此图片来源于网络,如有侵权,请联系删除! ) 二.数据库用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用 ...
微信小程序-000-签到功能-004-新建签到
微信小程序-000-签到功能-004-新建签到-2020-4-23 目录一.wxml 二.js pages.newact.newact 一.wxml <form bindsubmit=&quo ...
使用python实现微信小程序自动签到2.0
微信小程序自动签到功能描述目标输出包管理程序的结构设计步骤1 步骤2 步骤3 步骤4 代码实现使用findler抓包工具查看请求类型再次使用findler抓包,查看请求内容使用多线程 ...
微信小程序-000-签到功能-011-我报名过的活动-查看详情
微信小程序-000-签到功能-011-我报名过的活动-查看详情目录一.wxml 二.js pages.joinsetact.joinsetact 一.wxml {{aid}} <button ...

微信小程序日历签到功能

微信小程序日历签到功能相关推荐

最新文章

热门文章