草庐IT

原生微信小程序实现打卡日历组件

风中凌乱的男子 2023-09-29 原文
背景：最近接了个外包，其中有个打卡功能，里面包含了一个日历，甲方要求百分百还原，闲暇之余就撸了一下，下面是效果图 源码地址 https://github.com/chenxuba/xx-calendar 求star ✨
image.png
分析：
  • 要求左右箭头可切换上下月;
  • 需要展示农历日历；
  • 点击日期拿到年月日（yyyy-mm-dd）
  • 样式一比一还原
想法?：网上都没一毛一样的组件，那还想个der，自己撸一个啊～
组件我起名：xx-calendar
  • 第一步：在小程序components目录下新建一个组件xx-calendar
image.png
  • 第二步：在你想要引入的页面的xxx.json文件里引入该组件
{
  "usingComponents": {
      "xx-calendar":"../../components/xx-calendar/xx-calendar"
  }
}
  • 第三步：在xxx.wxml里使用该组件
<xx-calendar></xx-calendar>
  • 第三步：前端写页面，啥都不要想，先撸样式，静态页面撸起走～
  • 3.1 先撸头部
image.png
  • xx-calendar.wxml
<!--components/xx-calendar/xx-calendar.wxml-->
<!-- 头部 -->
<view class="title-wrap">
    <view class="change-date">
        <view class="prev">
            <image src="./prev.png" mode="" />
        </view>
        <view class="year-mouth">
            2023年 1月
        </view>
        <view clstyle="next">
            <image src="./next.png" mode="" />
        </view>
    </view>
    <view class="week">
        <text>日</text>
        <text>一</text>
        <text>二</text>
        <text>三</text>
        <text>四</text>
        <text>五</text>
        <text>六</text>
    </view>
</view>
<!-- 日期 -->
<view class="date-wrap">
    <!-- 上个月日期 -->
    <view class="mouth-date last-mouth">
        <text class="day-text">29</text>
        <text class="day-nongli">十五</text>
        <text class="day-dot"></text>
    </view>
    <view class="mouth-date last-mouth">
        <text class="day-text">30</text>
        <text class="day-nongli">十六</text>
        <text class="day-dot"></text>
    </view>
    <view class="mouth-date last-mouth">
        <text class="day-text">31</text>
        <text class="day-nongli">十七</text>
        <text class="day-dot"></text>
    </view>
    <!-- 当月日期 -->
    <view class="mouth-date current-mouth" wx:for="{{31}}">
       <view class="day-box {{index==0?'active':''}}">
        <text class="day-text {{index==2||index==4||index==6||index==8?'color':''}}">{{index+1}}</text>
        <text class="day-nongli">十八</text>
        <text class=" {{index==2||index==4||index==6||index==8?'day-dot':'not-dot'}}"></text>
       </view>
    </view>
    <!-- 下个月日期 -->
    <view class="mouth-date next-mouth">
        <text class="day-text">1</text>
        <text class="day-nongli">十五</text>
        <text class="day-dot"></text>
    </view>
</view>
  • xx-calendar.wxss
/* components/xx-calendar/xx-calendar.wxss */
/* 头部样式start */
.title-wrap{
    background-color: #fff;
    padding-top: 20rpx;
    border-bottom: 1px solid #D4DBDC;
    padding-bottom: 10rpx;
}
.change-date{
    display: flex;
    justify-content: center;
    align-items: center;
}
.change-date image{
    width: 50rpx;
    height: 50rpx;
    transform: scale(1.5);
    display: flex;
}
.year-mouth{
    margin: 0 60rpx;
}
.week{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    margin-top: 30rpx;
    color: #1F1F1F;
}
.week text{
    flex: 1;
    text-align: center;
}
/* 头部样式end */
/* 日期区域样式start */
.date-wrap{
    height: 500rpx;
    background-color: #F8F9F9;
    display: flex;
    flex-wrap: wrap;
}
.mouth-date{
    display: flex;
    font-size: 24rpx;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 7);
    border-bottom: 1rpx solid rgb(229, 234, 235);
    padding-top: 10rpx;
}
.last-mouth text,.next-mouth text{
    opacity: 0;
}
.mouth-date .day{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1F1F1F;

}
.mouth-date  .day-nongli{
    font-size: 18rpx;
    color: #888888;
    margin-bottom: 6rpx;
}
.mouth-date .color{
    color: #8096F0;
}
.mouth-date  .day-dot{
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color: #8096F0;
}
.mouth-date .day-box{
    border-radius: 10rpx;
    width: 80rpx;
    padding-top: 6rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mouth-date .active{
    background-color: #A1D7EE;
}
.mouth-date .active text{
    color: #fff;
}
.mouth-date .active .day-text{
    font-weight: 600;
}
.not-dot{
    width: 8rpx;
    height: 8rpx;
}
  • 样式写完就是下面这个样子了，注意：⚠️css和dom后面还会根据实际情况微调
image.png
  • 选中状态和已打卡样式都暂时是根据索引模拟出来的，农历日期也不对
  • 下面就来写js，获取上个月日期数组、当月日期数组和下个月日期数组
  • 农历暂时先放一放
  • 下面先来写三个方法，分别来 获取上个月日期、当月日期和下个月日期
  • xx-calendar.js
  • 点定义好本月的年月，渲染日历头部，并且把星期也换成变量，即：
data:{
   year: new Date().getFullYear(),
   month: new Date().getMonth() + 1,
   weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
}
  • 在日历dom处渲染这三个变量
image.png
image.png
  • 下面在data里再定义几个变量，用来存储日期
data:{
        nowMonth: new Date().getMonth() + 1, //本月是几月
        nowDay: new Date().getDate(), //本月当天的日期
        lastMonthDays: [], //上一个月
        nowMonthDays: [], //本月 
        nextMonthDays: [], //下一个月
}
  • 在methods里定义三个方法
 /**
     * 组件的方法列表
     */
    methods: {
        /** 获取上个月日期 */
        getLastMonthDays(year,month){},
       /** 获取当月日期 */
        getNowMonthDays(year, month) {},
        /** 获取下个月日期 */
        getNextMonthDays(year, month) {},
    }
  • 为了方便调用，写一个总方法，一并调用这三个方法，并在ready里调用这个总方法，传入year和month，逻辑需要，还要写一个获取当月天数的方法
 /**
     * 组件的方法列表
     */
    methods: {
         //获取当月天数
        getThisMonthDays(year, month) {
            return new Date(year, month, 0).getDate();
        },
        /** 总方法 */
        //创建日期
        createDays(year, month) {
            this.getLastMonthDays(year, month)
            this.getNowMonthDays(year, month)
            this.getNextMonthDays(year, month)
        },
        /** 获取上个月日期 */
        getLastMonthDays(year, month) {},
       /** 获取当月日期 */
        getNowMonthDays(year, month) {},
        /** 获取下个月日期 */
        getNextMonthDays(year, month) {},
    },
    ready(){
        let { year,month } = this.data
        this.createDays(year,month)
    }
  • 接下来，先写获取上个月日期的方法，如下：
/** 获取上个月日期 */
        getLastMonthDays(year, month) {
            let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
            let lastMonthDays = []
            if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
                //上个月显示多少天
                let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年
                //上个月从几号开始显示
                for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
                    let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
                    lastMonthDays.push({
                        date: i, //几号
                        week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
                        time,
                        isNowMonthDay: ''
                    });
                }
            }
            this.setData({
                lastMonthDays
            })
            console.log(lastMonthDays);
        },
  • 打印结果可以看到 ，已经拿到上个月的日期已经对应的数据
  • ⚠️：安卓手机上会存在bug，写法造成的，解决方法我放到文章最后
image.png
  • 上个月的日期已经拿到了，下面可以在dom里渲染这个【lastMonthDays】数组了
image.png
  • 下面在编写获取当月日期的方法
 getNowMonthDays(year, month) {
            let {
                nowMonth,
                nowDay
            } = this.data
            let nowMonthDays = []
            let days = this.getThisMonthDays(year, month); //获取当月的天数
            for (let i = 1; i <= days; i++) {
                let d = new Date(year, month - 1, i)
                let years = d.getFullYear()
                let months = d.getMonth() + 1
                let day = d.getDate()
                let time = `${years+'/'+months +'/'+day}` // 2023/3/3
                nowMonthDays.push({
                    date: i, //几号
                    week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
                    time,
                    color: false, //为已打卡日期样式做准备
                    day, //后面会改成农历
                    isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : ""
                });
            }
            this.setData({
                nowMonthDays
            })
            console.log(nowMonthDays);
        },
  • 打印可以拿到当月的所有日期数组，主要圈出来的，默认选中当天的日期
image.png

  • 日期数组拿到了，当天的选中状态条件也拿到了，下面微调下dom，渲染【nowMonthDays】和完善默认选中条件


    image.png
  • 在接下来，编写获取下个月的日期方法
/** 获取下个月日期 */
        getNextMonthDays(year, month) {
            let {
                lastMonthDays,
                nowMonthDays,
            } = this.data
            let nextMonthDays = []
            let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
            let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
            let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
            if (nextMonthNums) { //判断当前天数是否大于零
                for (let i = 1; i <= nextMonthNums; i++) {
                    let time = new Date(year, month - 1, i).toLocaleDateString()
                    nextMonthDays.push({
                        date: i, //几号
                        week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
                        time,
                        isNowMonthDay: ''
                    });
                }
            }
            this.setData({
                nextMonthDays
            })
            console.log(nextMonthDays)
        },
  • 打印数组
image.png
  • 下面渲染这个【nextMonthDays】数组
image.png
  • 还没渲染农历的样子，就是下图
image.png
  • 下面渲染农历，需要用到一个公共方法，这个方法很复杂，也很长，就不再这里展示了，你可以访问我的github仓库下载源码获取这个方法. https://github.com/chenxuba/xx-calendar
  • 页面内引入这个js
import calendarFormatter from "./index";
  • 需要修改的是获取当月日期的这个方法，上下月都不展示，就不修改其他俩方法了，如果你需要请自行二开
 getNowMonthDays(year, month) {
            let {
                nowMonth,
                nowDay
            } = this.data
            let nowMonthDays = []
            let days = this.getThisMonthDays(year, month); //获取当月的天数
            for (let i = 1; i <= days; i++) {
                let d = new Date(year, month - 1, i)
                let years = d.getFullYear()
                let months = d.getMonth() + 1
                let day2 = d.getDate()
                let time = `${years+'/'+months +'/'+day2}` // 2023/3/3
                let timer = time.replace(/\//g, "-")
                let timer2 = timer.split('-')
                var day = calendarFormatter.solar2lunar(timer2[0], timer2[1], timer2[2]);
                let newdate
                if (day.IDayCn == '初一') {
                    newdate = day.IMonthCn
                } else {
                    newdate = day.IDayCn
                }
                nowMonthDays.push({
                    date: i, //几号
                    week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
                    time,
                    color: false,
                    day: newdate,
                    isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : ""
                });
            }
            this.setData({
                nowMonthDays
            })
            console.log(nowMonthDays);
        },
嗯～实现了
image.png
  • 下面在实现点击左右箭头切换月份
image.png
/** 切换月份 */
        changeMonthFun(e){
            let {
                year,
                month
            } = this.data
            let type = e.currentTarget.dataset.type //类型
            if (type == 'prev') { //上一个月
                year = month - 1 > 0 ? year : year - 1
                month = month - 1 > 0 ? month - 1 : 12
            } else { //next 下个月
                year = (parseInt(month) + 1) > 12 ? year + 1 : year
                month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
            }
            this.setData({
                year,
                month,
            })
            this.createDays(year, month)
        }
  • 这样就实现了切换月份
image.png
  • 有点小瑕疵，不打紧，之前写静态页面的时候固定高度了，注释掉就可以了
image.png
  • 一切正常
image.png
  • 下面在实现点击日期，拿到当前年月日
selectDate(e){
            let type = e.currentTarget.dataset.type //选择的时间类型
            let index = e.currentTarget.dataset.index //选择的下标
            let date = e.currentTarget.dataset.item.time //选择的下标
            let selectDate = date.replace(/\//g, "-")
            console.log("选择的时间", selectDate)
            // 自定义事件，父组件调用，回调 选择的时间selectDate
            this.triggerEvent('selectDate', selectDate)
             //将选择的时间类型的 isNowMonthDay 全改为''
             this.data[type]?.forEach(item => {
                item.isNowMonthDay = ''
            })
            this.data[type]?.forEach((item, idx) => {
                if (index == idx) {
                    item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判断当前选中的日期是否是当前时间
                } else {
                    item.isNowMonthDay = ''
                }
            })
            this.setData({
                [type]: this.data[type],
            })
        },
image.png

  • 最后实现 已打卡日期的样式展示，要从父组件接收一个已打卡日期数组，通过对比当月日期，来动态改变之前备用的color字段

  • 先接收一个数组
  /**
     * 组件的属性列表
     */
    properties: {
        use_date_arr:{
            type:Array,
            value:[]
        }
    },
  • 然后修改getNowMonthDays方法
 this.data.use_date_arr.forEach(ele => {
                ele = ele.replace(/\-/g, "/")
                nowMonthDays.forEach(item => {
                    if (ele == item.time) {
                        console.log(item);
                        item.color = true
                    }
                })
            })
image.png
  • 然后在父组件传入这个use_date_arr数组
data: {
    use_date_arr:['2023-3-1','2023-3-2','2023-3-3','2023-3-5','2023-3-8']
  },

<xx-calendar use_date_arr="{{use_date_arr}}"></xx-calendar>
  • 最后的效果
image.png
  • 取消高度导致圆点没距离了，稍微微调下
image.png
  • 搞定
image.png
打卡原生sectionblockquotecode

有关原生微信小程序实现打卡日历组件的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  5. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  7. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  8. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  9. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  10. ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2

    在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

随机推荐