publish一个微信小程序的日历组件_黑色瓶子的专栏文章_微信文章

公司下一个小程序项目会用到日历组件，所以准备自己先写一个。由于小程序支持了npm，可以开发和使用第三方自定义组件包，索性就尝试下发布一个日历组件。在设计稿没出来前，样式就先这样了（有没有一丝熟悉感）

使用

1.安装

npm install --save miniprogram-simple-calendar
复制代码

2.在需要使用 calendar 的页面 page.json 中添加 calendar 自定义组件配置

{
  "usingComponents": {
    "simple-calendar": "miniprogram-simple-calendar"
  }
}
复制代码

在wxml中使用

<simple-calendar bindselect="select"></simple-calendar>
复制代码

注意：使用npm前，先在根目录npm init，然后执行安装命令，再点击开发者工具中的菜单栏：工具 --> 构建 npm ，再勾选“使用 npm 模块”选项，具体查看文档。

开发小程序组件

怎么开发并发布一个小程序插件，官方文档在这里：开发第三方自定义组件

根据介绍下载官方的项目模板，结构如下：

|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js
复制代码

miniprogram_dev：npm run dev或npm run watch都会生成小程序代码到此目录，在开发者工具中打开此目录就可以预览
miniprogram_dist：npm run build打包出的文件
src：源码目录，我们需在此开发组件，源代码会被构建并生成到 miniprogram_dev/components 目录下

使用less

项目支持配置 less 开发，但是需要改几处地方：

tools/config.js中

 wxss: {
  less: true, // 使用 less 来编写 wxss
  // ...
}
复制代码

tools/checkcomponents.js中

 componentListMap.wxssFileList.push(`${fileBase}.less`) // 后缀改为less
复制代码

tools/build.js中

/**
  * 监听 wxss 变化
  */
 gulp.task(`${id}-watch-wxss`, () => {
   this.cachedComponentListMap.wxssFileList = null
   return gulp.watch(
     '**/*.less',   // 将这里改为.less
     {cwd: srcPath, base: srcPath},
     gulp.series(`${id}-component-wxss`)
   )
 })
复制代码

获取每月天数

关于开发日历的原理，随便一搜都能看到很多，我就不多说了，不过有一点我想提一下，那就是每个月天数的获取。不少教程都是把月份的天数存为一个数组，然后根据闰平年计算二月的天数，这样也很容易实现，而我用的是另外一个方法，也有不少教程说到，那就是获取每个月的最后一天是几号，最后一天是几号那这个月就多少天了。

在JavaScript中，要获取指定日期，比如获取2019-02-01的日期，我们可以这样：

new Date(2019,1,1)
复制代码

正式因为我明确知道要获取几月几号的日期，所以才可以这么写，那如果要获取最后一天的日期呢？其实可以这么写：

new Date(2019,2,0) // 获取2月的最后一天日期
复制代码

初看觉得很奇怪，很容易以为是获取 2 月的的第一天，但这里需要注意的是，月份是从 0 开始的，所以这里的 2 表示的是 3 月，而 0 其实就表示往 1 号前退一天，那就是 2 月的最后一天了，再使用getDate()就可以拿到本月天数了

写在结束

这只是一个开发小程序组件的尝试，组件功能很简陋，后面会考虑根据实际需求加功能。当然有啥好建议给我最好了。

想要10个赞😢