手把手教你写一个符合自己需求的小程序日历组件

时间：2024-03-01 10:44:14

前言

很多时候，我们生活中会有各种打卡的情况，比如 keep 的运动打卡、单词的学习打卡和各种签到打卡或者酒店的入住时间选择，这时候就需要我们书写一个日历组件来处理我们这种需求。

但是更多时候，我们都是网上找一个插件直接套用了，有没有想过自己实现一下呢？如果有，但是感觉不太会的话，接下来跟着我一起实现符合自己需求的日历吧

准备工作

因为我们是小程序日历嘛，所以必不可少的肯定是微信开发者工具啦。项目目录结构如下：

|-- calendar
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- project.config.json
    |-- sitemap.json
    |-- components
    |   |-- calendar
    |       |-- index.js
    |       |-- index.json
    |       |-- index.wxml
    |       |-- index.wxss
    |-- pages
        |-- index
            |-- index.js
            |-- index.json
            |-- index.wxml
            |-- index.wxss

使用 git 下载空白模板:

git clone -b calendar  https://gitee.com/gating/demo.git

ps: 下面步骤有点啰嗦，如果看目录结构就能懂的话就不需要跟着步骤啦

  1. 新建一个名为calendar的空文件夹

  2. 打卡微信开发者工具，新增项目，选中刚刚创建的calendar文件夹，开发模式选中小程序，AppID 使用测试号即可，如图所示：
    新建calendar项目

  3. 创建完后，开发者工具会默认帮我们生成默认的代码，我们在当前文件夹新增components文件家，再在components文件夹中新增calendar文件夹，再从当前文件夹新增名为index的组件，如图：

    新建calendar组件

ps:因为开发者工具会默认生成初始代码，所以直接使用他创建组件比较方便

  1. 删除一些和本次博文无关的代码，比如app.js中的本地缓存能力，具体参考空白模板

编写代码

接下来编写代码部分我们直接在VSCode编写，因为微信开发者工具实在太。。。- -所以还是使用VSCode编写比较合适

思考一下

想要实现日历，我们需要知道几个小知识：

  1. 根据常识，我们知道一个月最少有 28 天，最多有 31 天，一周有 7 天，那么就可以有 5 排，但如果有一个月的第一天为星期六且当月有 31 天，那么他就会有 6 排格子才对。比如2020年8月，如图所示：

    2020年8月

  1. 我们需要知道，当月的第一天是周几

  2. 我们需要知道，当月有多少天

  3. 最重要的是小程序没有 DOM 操作概念，所以我们不能动态往当月第一天插入格子，所以只能根据第一天是周几循环插入格子

知道以上四点后，我们就可以编写我们的代码啦

首先，第二第三点是最简单的，我先书写第二第三点，怎么获取当前是周几呢？其实js的Date对象直接有现成的方法，我们直接拿来用就好了

console.log("今天是星期" + new Date().getDay());

我想有点小难度的是第三点，获取当月有多少天，因为你想，其他的月份的天数是固定的，唯独 2 月，在平年和闰年的不同年份中，2 月的天数也是不同的，那么有没有简单的方法获取当月有多少天呢，其实也是有的，Date实例中的getDate就可以实现我们想要的效果了

// 获取一个月有多少天
const getMonthDays = (year, month) => {
  let days = new Date(year, month + 1, 0).getDate();
  return days;
};

我们通过 Date 的第三个参数传 0 就可以获取上个月的最后一天，最后通过 getDate() 获取它的日期就可以对应我们当月的天数，那么就不需要我们自己处理平年和闰年的 2 月有多少天了

是不是又学到了小知识点呢？

解决了 2.3 两个问题，我们就可以往下书写我们的日历了。

众所周知，小程序规定宽度为750rpx(尺寸单位)，而我们的一周有 7 天，即 7 格，那么就是每个格子的宽度为107rpx，不建议使用小数，因为 rpx 计算的时候，遇到小数会存在少量偏差。这里我们使用flex布局解决。

所以接下来就可以写我们的布局和生成我们的数据啦，从上面我们分析了，我们有 6 排格子，一排有 7 个，也就是一共 42 个格子。即需要遍历 42 次

先定义一下我们所需要的数据，便于我们后续操作：

[
  {
    "dataStr": "2020/06/08",
    "day": "08",
    "month": "08",
    "otherMonth": false,
    "today": true,
    "year": 2020
  }
]

这里我只定义个几个简单的基本数据，如果有不同的业务场景可以自行添加基础数据

小 tips

IOS 端的日期格式必须为/才可以转化为日期格式，比如2018/07/08，而2018-07-08则返回Invalid Date，所以我们需要把-都替换为/。

不单单是小程序，微信公众号，safari 都是一样的。

正式开始编写代码

那么就可以写我们的 js 代码了，在 components -> calendar目录下新建utils.js文件，书写我们创建数据的基础方法：

/**
 * 获取当月有多少天
 * @param {String | Number} year => 年
 * @param {String | Number} month => 月
 */
const getMonthDays = (year, month) => {
  let days = new Date(year, month + 1, 0).getDate();
  return days;
};
/**
 * 补0
 * @param {String | Number} num
 */
const toDou = (num) => {
  return num > 9 ? num : "0" + num;
};

/**
 * 转换为日期格式
 * @param {*} date
 */
const transformDate = (date) => {
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  return date;
};
/**
 * 获取当前日期的年月日
 * @param {any} date => 日期对象
 */
const getDateObj = (date) => {
  date = transformDate(date);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return {
    year,
    month,
    day,
    dataStr: `${year}/${toDou(month)}/${toDou(day)}`,
  };
};

/**
 * 获取当月1号的时间戳
 * @param {Date} date => 日期对象
 */
const startOfMonth = (date) => {
  return date.setDate(1);
};

// 获取今天，导出供组件作为默认值使用
const { dataStr } = getDateObj(new Date());

/**
 * 生成日历数据
 * @param {Date} date => 日期对象
 */
const getDate = (date) => {
  date = transformDate(date);
  // 计算需要补的格子
  let dist;
  const { year, month } = getDateObj(date);
  // 获取当月有多少天
  const days = getMonthDays(year, month - 1);
  // 获取当前日期是星期几
  let currentDate = new Date(startOfMonth(date)).getDay();
  // 众所周知的原因，一周的第一天时星期天，而我们做的日历星期天是放在最后的，所以我们这里需要改一下值
  if (currentDate == 0) {
    currentDate = 7;
  }
  dist = currentDate - 1;
  currentDate -= 2;
  const res = [];
  for (let i = 0; i < 42; i++) {
    // 是否不是当前月
    const otherMonth = i >= dist + days || i <= currentDate;
    const date = new Date(year, month - 1, -currentDate + i);
    const dateObj = getDateObj(date);
    res.push({
      ...dateObj,
      today: dataStr === dateObj.dataStr,
      otherMonth,
    });
  }
  return res;
};

module.exports = {
  getMonthDays,
  toDou,
  getDateObj,
  startOfMonth,
  getDate,
  dataStr,
  transformDate,
};

这里代码都比较简单，注释也有写，所以就不详细解释了，如有问题就评论，我看到会第一时间回复的。。。。

在 components -> calendar -> index.js 引入一下 utils.js 文件，然后在created这个生命周期打印一下我们的基础数据，看是否符合预期：

如果你打印的和我打印的一致，那么就可以愉快的写我们组件的界面啦

相关文章