1. 微信小程序开发官方文档指南
2. 使用的技术点
- 使用
setTimeout来实现定时任务
3. 代码实现过程
1.编写index.wxml布局文件
<view class="container">
<view class="reminder-form">
<view class="form-item">
<text>提醒内容：</text>
<input placeholder="请输入提醒内容" bindinput="onContentInput" value="{
{content}}"/>
</view>
<view class="form-item">
<text>选择日期：</text>
<picker mode="date" value="{
{date}}" bindchange="onDateChange">
<view>{
{date || '请选择日期'}}</view>
</picker>
</view>
<view class="form-item">
<text>选择时间：</text>
<picker mode="time" value="{
{time}}" start="00:00" end="23:59" bindchange="onTimeChange">
<view class="picker-view">{
{time}}</view>
</picker>
</view>
<button type="primary" bindtap="setReminder">设置提醒</button>
</view>
</view>
- 编写index.wxss样式文件
.reminder-form {
background: #fff;
padding: 20rpx;
border-radius: 10rpx;
}
.form-item {
margin-bottom: 20rpx;
display: flex;
align-items: center;
}
.form-item text {
width: 160rpx;
}
- 编写index.js 具体逻辑实现
Page({
data: {
content: '测试数据',
date: '',
time: '',
},
onLoad() {
// 设置默认的日期和时间
this.setDefaultDateTime()
// 设置默认时间
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const currentTime = `${
hours}:${
minutes}`;
this.setData({
time: currentTime
});
},
// 设置默认日期时间
setDefaultDateTime() {
const now = new Date()
// 格式化日期 YYYY-MM-DD
const year = now.getFullYear()
const month = (now.getMonth() + 1).toString().padStart(2, '0')
const day = now.getDate().toString().padStart(2, '0')
const defaultDate = `${
year}-${
month}-${
day}`
// 格式化时间 HH:mm
const hours = now.getHours().toString().padStart(2, '0')
const minutes = now.getMinutes().toString().padStart(2, '0')
const defaultTime = `${
hours}:${
minutes}`
this.setData({
date: defaultDate,
time: defaultTime
})
},
// 输入提醒内容
onContentInput(e) {
this.setData({
content: e.detail.value
})
},
// 选择日期
onDateChange(e) {
this.setData({
date: e.detail.value
})
},
// 选择时间
onTimeChange(e) {
this.setData({
time: e.detail.value
})
},
// 设置提醒
setReminder() {
const {
content, date, time } = this.data
if (!content || !date || !time) {
wx.showToast({
title: '请填写完整信息',
icon: 'none'
})
return
}
// 创建提醒对象
const reminder = {
id: Date.now(),
content,
date,
time
}
// 设置提醒 Toast
this.checkReminder(reminder)
// 清空表单
this.setData({
content: '',
date: '',
time: ''
})
wx.showToast({
title: '提醒设置成功'
})
setTimeout(() => {
wx.navigateBack()
}, 200);
},
// 检查提醒时间
checkReminder(reminder) {
const {
content, date, time } = reminder
const reminderTime = new Date(`${
date} ${
time}`).getTime()
const now = Date.now()
// 计算时间差（毫秒）
const timeDiff = reminderTime - now
if (timeDiff > 0) {
// 设置定时器
setTimeout(() => {
wx.showModal({
title: "今日提醒",
content: `提醒：${
content}`,
complete: (res) => {
if (res.cancel) {
}
if (res.confirm) {
}
}
})
}, timeDiff)
}
}
})
4. 演示效果
5. 关于作者其它项目视频教程介绍
- Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
- Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
- Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
- Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
- Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
- 为什么要封装BaseActivity?: https://www.bilibili.com/video/BV11S411A7R5/?vd_source=984bb03f768809c7d33f20179343d8c8
- 为什么要封装BaseFragment?：https://www.bilibili.com/video/BV1Um421G7yC/?vd_source=984bb03f768809c7d33f20179343d8c8