微信小程序 - 日历签到编写

最新推荐文章于 2024-05-15 04:33:29 发布
最新推荐文章于 2024-05-15 04:33:29 发布
阅读量1.8w 收藏 63
点赞数 12
分类专栏： 微信小程序(前端)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32700979/article/details/80538451
版权


预览图

运行代码  代码资源包

wxml

签到头部

为了方便，我在这里写了两个头部，已签到用这种

<view class="headers_wrapper" wx:if="{{signtype=='2'}}">
    <view class="for_headerleft"><image src="../../images/calendar2.png" ></image></view>
    <view class="for_headerright">
        <view class="for_headerright_list">今日已签到</view>
        <view class="for_headerright_list1">已连续签到<span>{{seriesCount}}</span>天 </view>
        <view class="for_headerright_list2">再连续签到<span>{{series_gos}}</span>天即可获得更多奖励</view>
    </view>
</view>

未签到

<view class="headers_wrapper" wx:if="{{signtype=='1'}}">
    <view class="for_headerleft"><image src="../../images/calendar1.png" ></image></view>
    <view class="for_headerright">
        <view class="for_headerright_list">今日未签到</view>
        <view class="for_headerright_list1">已连续签到<span>{{seriesCount}}</span>天 </view>
        <view class="for_headerright_list2">再连续签到<span>{{series_gos}}</span>天即可获得更多奖励</view>
    </view>
</view>

日历wxml

<view class="containers">
    <view class="clearPadding">
        <view class="calendar">
            <view class="calen_header">
                <button class='calendar_month_prev' bindtap="sign_prev">
                    <image src="../../images/cle_btn.png"  bindtap="sign_prev"></image>
                </button>
                <button class='calendar_month_next' bindtap="sign_next">
                    <image src="../../images/cle_btn.png" ></image>
                </button>
            </view>
            <view class="calenbox">
                <view class="calendar_thisday">
                    <text>{{showYear}}</text>年<text>{{showMonth}}</text>月
                </view>
            </view>
            <view class="calendar_wrapper">
                <view class="week_day">
                    <view class="weeklist">日</view>
                    <view class="weeklist">一</view>
                    <view class="weeklist">二</view>
                    <view class="weeklist">三</view>
                    <view class="weeklist">四</view>
                    <view class="weeklist">五</view>
                    <view class="weeklist">六</view>
                </view>
                <view>
                    <view class="month_day">
                        <view class="day_list"  wx:for="{{signDays[0]}}"  wx:key="un" wx:for-index="index"  wx:for-item="item">{{item == null ? '' : item.normalday}}
                            <view class="day_hover" wx:if="{{item.signday=='is'}}"></view>
                        </view>
                    </view>
                    <view class="month_day">
                        <view class="day_list"  wx:for="{{signDays[1]}}"  wx:key="un" wx:for-index="index"  wx:for-item="item">{{item == null ? '' : item.normalday}}<view class="day_hover" wx:if="{{signs.indexof(item)>-1}}"></view>
                         <view class="day_hover" wx:if="{{item.signday=='is'}}"></view>
                        </view>
                    </view>
                    <view class="month_day">
                        <view class="day_list"  wx:for="{{signDays[2]}}"  wx:key="un" wx:for-index="index"  wx:for-item="item">{{item == null ? '' : item.normalday}}
                            <view class="day_hover" wx:if="{{item.signday=='is'}}"></view>
                        </view>
                    </view>
                    <view class="month_day">
                        <view class="day_list"  wx:for="{{signDays[3]}}"  wx:key="un" wx:for-index="index"  wx:for-item="item">{{item == null ? '' : item.normalday}}
                            <view class="day_hover" wx:if="{{item.signday=='is'}}"></view>
                        </view>
                    </view>
                    <view class="month_day">
                        <view class="day_list"  wx:for="{{signDays[4]}}"  wx:key="un" wx:for-index="index"  wx:for-item="item">{{item == null ? '' : item.normalday}}
                            <view class="day_hover" wx:if="{{item.signday=='is'}}"></view>
                        </view>
                    </view>
                    <view class="month_day">
                        <view class="day_list"  wx:for="{{signDays[5]}}"  wx:key="un" wx:for-index="index"  wx:for-item="item">{{item == null ? '' : item.normalday}}
                            <view class="day_hover" wx:if="{{item.signday=='is'}}"></view>
                        </view>
                    </view>
                </view>
                <!--控制月份日历输出-->
            </view>
            <view class="text-center"  wx:if="{{signtype=='1'}}">
                <button class="btn-qiandao"  bindtap="sign_start" >签到</button>
            </view>
            <view class="text-center"  wx:if="{{signtype=='2'}}">
                <button class="btn-qiandao1" bindtap="sign_end" >已签到</button>
            </view>
        </view>
    </view>
</view>

签到奖励部分，略。

js:

data部分

data: {
    signDay:[{"signDay":"9"},{"signDay":"11"},{"signDay":"12"},{"signDay":"15"}],
    signs:[1,2,3,5,6,7],
    signtype:"1",
    signDays:[],
    todayDate:"1",
    todayMonth:"",
    todayYear:"",
    nextMonth:"",
    nextYear:"",
    prevYear:"",
    prevMonth:"",
    seriesCount:"99",
    series_gos:"15",
    for_signs:"none",
    powerData:"0",
},

调用自己画的日历js

var yangdate = require("../../utils/sign_in_ss.js");
//   /**
//    *
//    * @authors 杨京葛 (1141407871@qq.com)
//    * @date    2018-05-21 19:26:19
//    * @version $v1.01$
//    */
//
//
// }
var yang_date = {
    //iyear年份
    //iMonth月份
    //that
    //iyear年份
    bulidCal : function(iYear, iMonth,that,signday) {
        var that =that;
        var aMonth = new Array();
        aMonth[0] = new Array(7);
        aMonth[1] = new Array(7);
        aMonth[2] = new Array(7);
        aMonth[3] = new Array(7);
        aMonth[4] = new Array(7);
        aMonth[5] = new Array(7);
        var dCalDate = new Date(iYear, iMonth - 1, 1);
        var iDayOfFirst = dCalDate.getDay();
        //判断当前月份第一天周几
        var curMonthDays = new Date(dCalDate.getFullYear(), (dCalDate.getMonth()+1), 0).getDate();
        //判断当前月份有多少天
        console.log("本月共有 "+ curMonthDays +" 天");
        console.log("本月第一天周 "+ iDayOfFirst);
        var iDaysInMonth = (iMonth, iYear);
        var iVarDate = 1;
        var d, w;
        for (d = iDayOfFirst; d < 7; d++) {
console.log(signday);
            if(signday.indexOf(iVarDate)>-1){
                //console.log(111);
                aMonth[0][d] = {
                    signday:"is",
                    normalday:iVarDate,
                };
            }else{
                //console.log(22);
                aMonth[0][d] = {
                    signday:"nois",
                    normalday:iVarDate,
                };
            }
            iVarDate++;
        }
        //处理每月第一天出现位置
        for (w = 1; w < 6; w++) {
            for (d = 0; d < 7; d++) {
                if (iVarDate <= iDaysInMonth) {
                    if(signday.indexOf(iVarDate)>-1){
                        //console.log(111);
                        aMonth[w][d] = {
                            signday:"is",
                            normalday:iVarDate,
                        };
                    }else{
                        //console.log(22);
                        aMonth[w][d] = {
                            signday:"nois",
                            normalday:iVarDate,
                        };
                    }
                    if(iVarDate==curMonthDays){
                        console.log(aMonth);
                        that.setData({
                            signDays:aMonth,
                        });
                        return aMonth;
                    }else{
                        iVarDate++;
                    }
                }
            }
        }
        //处理每月其他天位置
        console.log(aMonth);
        return aMonth;
    },
    //日历签到完成
};
module.exports = {
    yang_date: yang_date
}

原始数据加载

onLoad: function (options) {
  
    var getToday = new Date();
    var todayDate =getToday.getDate();
    var todayMonths =getToday.getMonth();
    var todayMonth=(todayMonths+1);
    var todayYear =getToday.getFullYear();
    var todayss =getToday.getDate();
    if(todayMonth<10){
           var todayMonthss="0"+todayMonth;
       }else{
           var todayMonthss=todayMonth;
       }
    console.log(todayss);
    var godates = todayYear + "-" + todayMonthss + "-01";//向服务器发送自己需要的签到月份数据
    var that =this;
    wx.request({
        url:  '',
        method:"POST",
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        data: {
            date:godates,
        },
        success: function (res) {
            if(res.data.status==1){
                console.log(res.data);
                var $datas =res.data.data;//从服务器获取签到数据数组(1,2,3)
                var signDate_arr =new Array();
                var anns = $datas.signDays;
                var count_signday =$datas.seriesCount;
                if(count_signday>9){
                    var series_gos ="0";
                }else if(count_signday<0){
                    var series_gos =99;
                }else{
                    var series_gos =10-parseInt(count_signday);
                }
                that.setData({
                    seriesCount:count_signday,
                    series_gos:series_gos,
                });
                for(var p in anns){//遍历json对象的每个key/value对,p为key
                    var newdats =anns[p];
                    signDate_arr.push(newdats);
                }
                if(signDate_arr.indexOf(todayss)>-1){
                    console.log("当前已签到");
                    that.setData({
                        signtype:"2",
                    });
                }else{
                    console.log("当前未签到");
                    that.setData({
                        signtype:"1",
                    });
                }
                console.log(signDate_arr[0]);
                yangdate.yang_date.bulidCal(todayYear,todayMonth,that,signDate_arr);
                //初始化加载日历
            }else{
                wx.showToast({
                    title: '网络不通畅',
                    icon: 'loading',
                    duration: 1500
                });
            }
        }, error:function () {
            wx.showToast({
                title: '服务器错误',
                icon: 'loading',
                duration: 1500
            });
        }
    });
    this.setData({
        todayDate:todayDate,
        todayMonth:todayMonth,
        todayYear:todayYear,
        prevYear:todayYear,
        nextYear:todayYear,
        prevMonth:todayMonth,
        nextMonth:todayMonth,
        showYear:todayYear,
        showMonth:todayMonth,
    });//存入一份原始月份日期，一份用来跳转的月份
},


上一月 下一月切换

sign_prev: function () {
    console.log("上一月");
    var showMonth=this.data.showMonth;
    var todayMonth =this.data.todayMonth;
    if(showMonth=="1"){
        var showMonth="12";
        var showYear=parseInt(this.data.showYear)-1;
    }else{
        var showMonth=parseInt(this.data.showMonth)-1;
        var showYear=this.data.showYear;
    }
    if(parseInt(todayMonth-3)==showMonth){
        wx.showToast({
            title: '不能查看更多了',
            icon: 'loading',
            duration: 1500
        });
        return;
    }
    var that =this;
    if(showMonth<10){
        var showMonths="0"+showMonth;
    }else{
        var showMonths=todayMonth;
    }
    var godates = showYear + "-" + showMonths + "-01";
    wx.request({
        url: '网络请求',
        method:"POST",
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        data: {
            date:godates,
        },
        success: function (res) {
            if(res.data.status==1){
                console.log(res.data);
                var $datas =res.data.data;
/*从服务器获取上个月签到的日期(1,2,3,4,5)*/
                var signDate_arr =new Array();
                var anns = $datas.signDays;
                for(var p in anns){//遍历json对象的每个key/value对,p为key
                    var newdats =anns[p];
                    signDate_arr.push(newdats);
                }
                console.log(signDate_arr[0]);
        //引入日历默认
                yangdate.yang_date.bulidCal(showYear,showMonth,that,signDate_arr);
                //初始化加载日历
            }else{
                wx.showToast({
                    title: '网络不通畅',
                    icon: 'loading',
                    duration: 1500
                });
            }
        }, error:function () {
            wx.showToast({
                title: '服务器错误',
                icon: 'loading',
                duration: 1500
            });
        }
    });
    this.setData({
        showYear:showYear,
        showMonth:showMonth,
    });
},
sign_next: function () {
    console.log("下一月");
    var showMonth=this.data.showMonth;
    var todayMonth =this.data.todayMonth;
    if(todayMonth==showMonth){
        wx.showToast({
            title: '未签到不能查看',
            icon: 'loading',
            duration: 1500
        });
        return;
    }
    if(showMonth=="12"){
        var showMonth="1";
        var showYear=parseInt(this.data.showYear)+1;
    }else{
        var showMonth=parseInt(this.data.showMonth)+1;
        var showYear=this.data.showYear;
    }


    var that =this;

    if(showMonth<10){
        var showMonths="0"+showMonth;
    }else{
        var showMonths=todayMonth;
    }
    var godates = showYear + "-" + showMonths + "-01";
    wx.request({
        url: baseurl + '/user/getUserSignData',
        method:"POST",
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "token": token
        },
        data: {
            date:godates,
        },
        success: function (res) {
            if(res.data.status==1){
                console.log(res.data);
                var $datas =res.data.data;
                var signDate_arr =new Array();
                var anns = $datas.signDays;
                for(var p in anns){//遍历json对象的每个key/value对,p为key
                    var newdats =anns[p];
                    signDate_arr.push(newdats);
                }
                console.log(signDate_arr[0]);
                yangdate.yang_date.bulidCal(showYear,showMonth,that,signDate_arr);
                //初始化加载日历
            }else{
                wx.showToast({
                    title: '网络不通畅',
                    icon: 'loading',
                    duration: 1500
                });
            }
        }, error:function () {
            wx.showToast({
                title: '服务器错误',
                icon: 'loading',
                duration: 1500
            });
        }
    });


    this.setData({
        showYear:showYear,
        showMonth:showMonth,
    });

},

签到，日历内塞入数据，或者执行onload加载数据插入日历



缺点: 代码挺冗杂的，有很多可优化的地方。待解决。

亮点:代码挺容易懂的

一只杨
关注
  • 12
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
日历签到 java_微信小程序签到 日历 每日签到积分加1
weixin_30182831的博客
02-21 393
signIn.json{"navigationBarTitleText": "签到","usingComponents": {}}signIn.wxss/* 签到顶部背景信息 */.signBkImg{width: 100%;height: 241rpx;position: relative;}.signBkImg>image{width: 100%;height: 100%;}.sign-...
微信小程序 --- 日历效果
热门推荐
删库跑路
02-27 1万+
效果预览: wxml部分: &lt;view class='box1' style='width: {{ sysW * 7 }}px'&gt; &lt;view class='dateBox'&gt;{{ year }} - {{ month}}&lt;/view&gt; &lt;block wx:for='{{ weekArr }}'&gt; &lt;view style...
微信小程序简单签到功能源码分享
SiShen654的博客
07-22 6414
简单的签到功能源码–运用了云数据库,基本上满足签到功能需求了 0-数据展示 1-数据库端 2-前端wxml–我暂时弄了个简单的签到，其它数据你需要编写可以在后端找 <button type="primary" bindtap="qianDao">签到</button> 3-后端js–注意数据库名需要改，openid需要在app.js中onShow获取（你也可以换成其它字段查找） const DB=wx.cloud.database().collection("test")
微信小程序一个特定时间段内的日历控件,加上签到功能
zzzsmm的博客
11-07 6149
效果图 js doDrawCalendar: function (startTime,period){ var daysMapList = []; var curMonth = -1; var dateMap = {}; var that = this; for (var i = 0; i &amp;lt; period; i++) { dateM...
微信小程序｜基于微信小程序的生签到系统设计与实现
最新发布
2401_84009054的博客
05-15 660
语言环境：Java: jdk1.8数据库：Mysql: mysql5.7应用服务器：Tomcat: tomcat8.5.31开发工具：IDEA或eclipse技术：springboot+微信小程序+mysql+html+java互联网时代不仅仅是通过各种各样的电脑进行网络连接的时代，也包含了移动终端连接互联网进行复杂处理的一些事情。
基于微信小程序的微信平台签到系统的设计与实现(源码+lw+部署文档+讲解等)
hwx20010805的博客
02-04 1101
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
微信小程序日历签到功能
WangYi0118的博客
05-19 3913
<!--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> <.
微信小程序日历
盛典
04-23 374
微信小程序日历 父组件change方法接收 <calendar bind:change="change" /> 组件 <!--components/calendar/calendar.wxml--> <view class="calendar"> <view class="title flex"> <view class="flex"> <picker value="{{selectDay.year+'-'+selectDay.
微信小程序demo：日历签到
03-17
【微信小程序日历签到详解】 微信小程序是腾讯公司推出的一种轻量级的应用开发平台，它使得开发者无需安装即可在微信内使用各种功能丰富的应用。本篇将详细讲解如何利用微信小程序开发一个日历签到功能。 首先，...
微信小程序日历签到小程序
10-10
在“微信小程序日历签到”这个项目中，开发者利用微信小程序框架，构建了一个功能丰富的日历签到应用。这款小程序能够帮助用户形成良好的习惯，如每日打卡，同时为运营者提供了提升用户活跃度的有效工具。 一、日历...
微信小程序自定义组件-打卡日历组件
09-09
微信小程序自定义组件是开发微信小程序时非常关键的一部分，它允许开发者封装可复用的代码模块，提升开发效率和代码质量。在这个特定的案例中，我们关注的是一个名为"打卡日历组件"（rwjCalendar）的自定义组件。这...
微信小程序日历签到功能demo
08-13
要实现一个简单的日历，需要先知道几个值： 每月有多少天 每月第一天、最后一天各星期几 每月1号之前应有多少天属于上一个月 每月最后一天之后应有多少天属于下一个月
用日历插件实现签到功能，可用在H5.微信
04-18
用H5和Query实现日历控件实现在线wap签到功能，直接传入Json数据就可以展现签到历史。如果需要添加地址等功能。只需要在页面添加接口无需修改JS文件。
微信小程序-源码开发的日历系统
06-01
微信小程序源码开发的日历系统 说明： 实现日历功能，包括阳历和阴历。 数据接口: 使用本地数据 目录结构： pages — 存放项目页面文件 utils — 存放格式化文件 开发环境： 微信web开发者工具 v0.11.122100
手把手教你写一个最最最简单的微信小程序日历组件（源码免费完整下载）.zip
05-06
手把手教你写一个最最最简单的微信小程序日历组件（源码免费完整下载），微信小程序日历，简便，容易上手，代码量少，开箱即用，后期维护简便，新手上路，有BUG欢迎提出
微信小程序之打卡日历更新版
03-26
本文件包括微信小程序打卡日历的wxml、wxss、js、json四个文件以及引入文件bmob.js和util.js，下载后基本可以使用，但是打卡的数据需要自己配置后台，这里使用的是bmob后台
微信小程序实现打卡签到页面
10-14
在微信小程序中实现打卡签到页面，主要是为了提供用户一种便捷的方式来记录他们的日常签到行为。这个过程涉及到多个组件和逻辑处理，以下将详细介绍如何构建这样的功能。 首先，我们需要了解微信小程序的基础架构。...
微信小程序打卡
03-22
微信小程序打卡是一款基于微信平台的小型应用程序，主要功能是实现用户日常的签到打卡操作。这个项目提供的前端源码是打卡小程序的用户界面部分，它包括了打卡页面和用户中心页面，适合初学者进行实践和学习。在深入...
微信小程序开发——日历实现
qq_44645934的博客
08-30 3696
微信小程序开发——日历实现
微信小程序查寝打卡微信小程序源码数据库论文.docx
07-01
微信小程序查寝打卡是一种利用微信小程序开发的一种在线签到打卡系统，用于学校对学生宿舍的查寝签到管理。本论文旨在设计和实现一款基于微信小程序的学生查寝签到打卡小程序，并通过相关技术和手段来改善传统的查寝...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值