微信小程序开发，实现事件提醒功能

原创于 2025-02-11 11:29:52 发布 · 1.6k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

微信小程序开发入门专栏收录该内容

29 篇文章

订阅专栏

文章目录

1. 微信小程序开发官方文档指南

文档指南： https://developers.weixin.qq.com/miniprogram/dev/framework/

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)
    }
  }
})