技术宅原创爱情天数计数器微信小程序组件，就是一个简单的记录情侣们已经在一起多少天的小程序组件。
以上就是爱情天数计数器组件在小程序中的预览。
使用方法
1. 安装组件
将上述四个文件放入小程序项目的components/loveDaysCounter目录下（如果没有该目录请创建）。
2. 在页面中使用组件
步骤 1：在页面的 json 文件中声明组件
例如，在 pages/index/index.json 中添加：
{
"usingComponents": {
"love-days-counter": "/components/loveDaysCounter/loveDaysCounter"
}
}
步骤 2：在页面的 wxml 中使用组件
1、基础用法（使用默认配置）：
<love-days-counter />
2、自定义配置用法：
<!-- 只显示天数 --> <love-days-counter start-date="2023-05-20" prefix-text="我们在一起已经 " format="days" /> <!-- 自定义样式 --> <love-days-counter start-date="2022-10-01" prefix-text="恋爱时长: " format="days hours minutes" background="#ffebee" text-color="#c62828" count-color="#b71c1c" update-interval="500" />
3、自定义开始日期和时间
<!-- 只指定日期（默认时间为 00:00:00） --> <love-days-counter start-date="2023-01-01" /> <!-- 同时指定日期和时间（精确到秒） --> <love-days-counter start-date="2022-10-01" start-time="08:30:00"<!-- 格式：HH:MM:SS --> />
4、修改前缀文本
<love-days-counter start-date="2023-05-20" prefix-text="恋爱时长："<!-- 替换默认的"我们已经相爱了 " --> />
5、自定义显示格式（控制显示的时间单位）
通过 format 属性指定需要显示的单位（可选值：days 天、hours 时、minutes 分、seconds 秒，用空格分隔）：
<!-- 只显示天数 --> <love-days-counter start-date="2023-01-01" format="days" <!-- 仅显示“X天” --> /> <!-- 显示天+时+分 --> <love-days-counter start-date="2023-01-01" format="days hours minutes" <!-- 显示“X天 X小时 X分钟” --> /> <!-- 只显示时分秒 --> <love-days-counter start-date="2023-01-01" format="hours minutes seconds" <!-- 显示“X小时 X分钟 X秒” --> />
6、时区调整（解决时间偏差）
默认使用北京时间（UTC+8），可通过 timezone-offset 调整时区：
<!-- 强制使用UTC+0时区（格林尼治时间） --> <love-days-counter start-date="2023-01-01" timezone-offset="0" <!-- 0表示UTC时区 --> /> <!-- 使用UTC+9时区（如日本时间） --> <love-days-counter start-date="2023-01-01" timezone-offset="9" />
7、样式自定义（外观调整）
通过属性修改背景色、文本色等样式，或添加自定义类名：
7-1、直接修改颜色和背景
<love-days-counter start-date="2023-01-01" background="#fef3f4" <!-- 背景色（支持十六进制、rgba等） --> text-color="#d32f2f" <!-- 前缀文本颜色 --> count-color="#b71c1c" <!-- 数字颜色 --> />
7-2、添加自定义样式类（适合复杂样式）
在页面的 .wxss 中定义样式类：
/* pages/index/index.wxss */
.my-custom-counter { padding: 15px 30px;
border: 2px solid #ff6b81;
border-radius: 10px;
font-size: 18px; }
.my-custom-counter .prefix { font-style: italic; }
8、性能相关配置（调整更新频率）
通过 update-interval（显示刷新频率）和 cache-update-interval（计算缓存更新频率）优化性能：
<!-- 适合对实时性要求不高的场景（如只显示天数） --> <love-days-counter start-date="2023-01-01" format="days" update-interval="5000" <!-- 每5秒刷新一次显示 --> cache-update-interval="300000" <!-- 每5分钟重新计算一次（减少计算量） --> /> <!-- 适合实时性要求高的场景（如显示秒数） --> <love-days-counter start-date="2023-01-01" format="days hours minutes seconds" update-interval="1000" <!-- 每秒刷新显示 --> cache-update-interval="60000" <!-- 每分钟重新计算一次 --> />
在 .wxml 中引用：
<love-days-counter start-date="2023-01-01" custom-class="my-custom-counter" <!-- 应用自定义类 --> />
9、特殊场景：未来日期处理
如果 start-date 设置为未来日期，组件会自动显示 “尚未开始”：
<!-- 假设当前时间为2023年，开始日期设置为2024年 --> <love-days-counter start-date="2024-01-01" prefix-text="距离我们相遇还有：" <!-- 即使设置前缀，也会显示“尚未开始” --> />
3. 可用属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| start-date | String | '2025-02-04' | 开始日期，格式为 'Y-m-d' |
| prefix-text | String | ' 我们已经相爱了 ' | 显示的前缀文本 |
| format | String | 'days hours minutes seconds' | 显示的时间单位，空格分隔，可选值：days, hours, minutes, seconds |
| update-interval | Number | 1000 | 刷新间隔时间（毫秒） |
| custom-class | String | '' | 自定义样式类名 |
| background | String | 'rgba(255, 255, 255, 0.8)' | 背景颜色 |
| text-color | String | '#ff6b81' | 文本颜色 |
| count-color | String | '#ff4757' | 数字颜色 |
通过这种组件化的方式，你可以在小程序的任何页面中轻松调用这个爱情天数计数器，并且每个页面可以根据需要自定义不同的样式和参数。
组件目录
这是小程序组件，你需要了解并知道如何使用小程序组件，组件目录如下：
你的小程序项目根目录/ ├─ components/ │ └─ loveDaysCounter/ # 组件文件夹（必须与组件名一致） │ ├─ loveDaysCounter.js # 组件逻辑文件 │ ├─ loveDaysCounter.wxml # 组件模板文件 │ ├─ loveDaysCounter.wxss # 组件样式文件 │ └─ loveDaysCounter.json # 组件配置文件
大神真厉害！佩服佩服