Release a calendar component of wechat applets

Your next applets project will use the calendar component, so be prepared to write one yourself. Since applets support NPM, you can develop and use third-party custom component packages, so simply try publishing a calendar component. Before the design draft came out, the style was like this (any sense of familiarity)

use

Updated 0.0.4 to pass in lists of data to mark dates

address

1. Install

npm install --save miniprogram-simple-calendar
Copy the code

2. Add calendar custom component configuration to page. Json where Calendar is required

{
  "usingComponents": {
    "simple-calendar": "miniprogram-simple-calendar"}}Copy the code

3. Used in WXML

<simple-calendar bindselect="select"></simple-calendar>
Copy the code

Note: Before using NPM, first in the root directory NPM init, and then execute the install command, and then click on the menu bar of developer Tools: Tools –> Build NPM, and then check the “use NPM module” option to see the documentation.

Develop applets

How to develop and distribute a small program plug-in, the official document is here: develop third-party custom components

Download the official project template according to the introduction, the structure is as follows:

|--miniprogram_dev // The development environment builds the directory
|--miniprogram_dist // The production environment builds the directory
|--src / / the source code
|   |--components // Generic custom components
|   |--images // Image resources
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // Exposed JS module/custom component entry file
|
|--test // Test case
|--tools // Build the relevant code
|   |--demo // The demo program directory is copied to the miniprogram_dev directory in the development environment
|   |--config.js // Build the relevant configuration file
|
|--gulpfile.js
Copy the code

• Miniprogram_dev:npm run devornpm run watchGenerates applets to this directory, which you can preview by opening in developer tools
• Miniprogram_dist:npm run buildA file packed out
• SRC: source directory where we develop components. The source code is built and generated in the miniprogram_dev/components directory

Use less

The project supports configuration less development, but several changes are needed:

1. tools/config.jsIn the

    wxss: {
     less: true.// Write WXSS using less
     // ...
   }
   Copy the code

2. tools/checkcomponents.jsIn the

    componentListMap.wxssFileList.push(`${fileBase}.less`) // Change the suffix to less
   Copy the code

3. tools/build.jsIn the

   /** * listen for WXSS changes */
    gulp.task(`${id}-watch-wxss`, () = > {this.cachedComponentListMap.wxssFileList = null
      return gulp.watch(
        '**/*.less'.// Change this to.less
        {cwd: srcPath, base: srcPath},
        gulp.series(`${id}-component-wxss`))})Copy the code

Obtaining monthly days

I won’t go into the details of how calendars are developed, but one thing I want to mention is the number of days per month. Many tutorials save the days of the month as an array, and then calculate the days of February based on the leap year, which is also easy to implement, but I use another method, many tutorials say, is to get the last day of each month, the last day of the month is the number of days.

In JavaScript, to get the specified date, such as the date of 2019-02-01, we can do this:

new Date(2019.1.1)
Copy the code

I can write this because I know exactly what date I want to get, but what if I want to get the last date? It could be written like this:

new Date(2019.2.0) // Get the last day of February
Copy the code

At first glance feel very strange, it is easy to think is to get the first day of February, but here it is important to note that the month begins with 0, so the 2 said here is march, and 0 is said to back a day before 1, that is the last day of February, reuse getDate () can get the number of days this month

Written in the end

This is just an attempt to develop a small program component, component function is very simple, later will consider adding functions according to the actual needs. Of course I’d love to have some good advice.

Want 10 likes 😢