微信小程序實現(xiàn)日歷簽到功能
更新時間：2022年08月29日 09:31:33 作者：若我君臨天下
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日歷簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)日歷簽到的具體代碼，供大家參考，具體內容如下
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({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 日歷
? ? year: 0,
? ? month: 0,
? ? date: ['日', '一', '二', '三', '四', '五', '六'],
? ? dateArr: [],
? ? isToday: 0,
? ? isTodayWeek: false,
? ? todayIndex: 0,
? ? // 當前維度
? ? latitude: "",
? ? // 當前精度
? ? longitude: "",
? ? yesDate: [20200501, 20200511, 20200512, 20200508], ?//此處應該是接口返回的數(shù)據(jù)，先模擬了一個
? ? 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 = []; //需要遍歷的日歷數(shù)組數(shù)據(jù)
? ? let arrLen = 0; //dateArr的數(shù)組長度
? ? let now = setYear ? new Date(setYear, setMonth) : new Date();
? ? let year = setYear || now.getFullYear();
? ? let nextYear = 0;
? ? let month = setMonth || now.getMonth() //沒有+1方便后面計算當月總天數(shù)
? ? 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()
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? 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()
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
? },
? /**
? ?* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
? },
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? },
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {
? }
})由于沒有設計圖，先把功能完善了?？赡艽a冗雜了，要是有大家有更便捷的寫法，歡迎踴躍交流。
好多人需要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
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
項目中常遇到輸入框檢查的需求，比如即時搜索，用change事件？change事件失去焦點才發(fā)生，無法做到即時。keypresss事件？能監(jiān)聽到鍵盤，但監(jiān)聽不到鼠標復制粘貼，不完美2014-09-09
ajax現(xiàn)在是一種非常流行的技術，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來使用純javascript實現(xiàn)獲取服務器端的功能來展示如何使用純javascript實現(xiàn)ajax功能，以弄清其原理.2017-11-11
這篇文章主要為大家介紹了js前端上傳文件縮略圖技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
echarts3D效果柱狀圖的實現(xiàn),這個太難了,我花了兩天終于調成我想要的效果啦,要是官網(wǎng)上有例子就好了,太難調了,下面這篇文章主要給大家介紹了關于echarts實現(xiàn)3d柱狀圖的2種方式,需要的朋友可以參考下2023-02-02
淺談JavaScript中的對象及Promise對象的實現(xiàn)
這篇文章主要介紹了淺談JavaScript中的對象及Promise對象的實現(xiàn)的相關資料,需要的朋友可以參考下2015-11-11
uni-app使用uniCloud實現(xiàn)圖形驗證碼(uni-captcha)詳細過程
這篇文章主要給大家介紹了關于uni-app使用uniCloud實現(xiàn)圖形驗證碼(uni-captcha)的相關資料,實際開發(fā)工作中在登陸的時候經常需要圖形驗證碼,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了為什么JavaScript沒有塊級作用域的相關資料,需要的朋友可以參考下2016-05-05
本文為大家介紹下使用expression固定表格行列，這是一種在IE下適用的固定行列的方法，感興趣的朋友可以學習下，希望對大家有所幫助2013-07-07
這篇文章主要介紹了JS立即執(zhí)行的匿名函數(shù),結合實例形式分析了;(function() {})();相關原理、使用技巧及操作注意事項,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)移動端上下滑動一次一屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06