从零到一实现微信小程序计划时钟：完整教程

在本教程中，我们将一起实现一个微信小程序------计划时钟。这个小程序的核心功能是帮助用户添加任务、设置任务的时间范围，并且能够删除和查看已添加的任务。通过以下步骤，我们将带你从零开始实现一个具有基本功能的微信小程序计划时钟。

项目需求

在我们的计划时钟应用中，我们将实现以下功能：

任务添加：用户可以输入任务内容，并选择任务的开始时间和结束时间。
任务删除：用户可以删除不再需要的任务。
数据持久化：所有任务数据将保存在微信小程序的本地存储中，以确保用户重启应用后数据依旧存在。

我们将通过以下几个步骤来完成这一小程序的设计与开发。

步骤一：设计数据结构

首先，我们需要定义应用的基本数据结构，用来存储任务。我们将使用 tasks 数组来保存任务，每个任务包含内容、开始时间和结束时间等信息。任务将按日期进行分类，便于展示。

javascript 复制代码

// 初始数据结构
data: {
  tasks: {},            // 存储每个日期的任务列表
  all_tasks: {},        // 存储所有日期的任务数据
  selectedDate: '',     // 当前选中的日期
  startDate: '',        // 任务开始日期
  startTime: '',        // 任务开始时间
  endDate: '',          // 任务结束日期
  endTime: '',          // 任务结束时间
  content: '',          // 任务内容
  isModalVisible: false, // 是否显示输入框弹窗
  isModalTimeVisible: false, // 是否显示时间选择弹窗
}

步骤二：添加新任务功能

任务的添加是通过弹出一个输入框，让用户填写任务内容，并在填写完成后选择任务的开始时间和结束时间。我们使用 wx.showModal 来显示输入框，并获取用户的输入内容。

javascript 复制代码

// 新增计划
addNewTask(e) {
  // 使用 wx.showModal 来获取用户输入
  wx.showModal({
    title: '请输入计划内容',
    editable: true,
    placeholderText: '请填写计划内容',
    success: (res) => {
      if (res.confirm) {
        this.setData({
          isModalVisible: false,  // 隐藏任务输入蒙版
          isModalTimeVisible: true,  // 显示时间选择蒙版
        });
        const content = res.content;  // 获取用户输入
        if (content) {
          // 显示时间选择器
          this.setData({
            content: content,       // 存储任务内容
          });
        } else {
          wx.showToast({
            title: '请输入内容',
            icon: 'none',
          });
        }
      }
    }
  });
}

解析：

addNewTask 方法通过 wx.showModal 弹出一个输入框，让用户填写任务内容。
如果用户输入内容且确认，我们会保存任务内容，并切换到时间选择模式。

步骤三：时间选择功能

用户在输入任务内容后，接下来需要设置任务的开始时间和结束时间。我们通过微信小程序的日期和时间选择器来实现这一功能。

javascript 复制代码

// 选择开始日期
onStartDateChange(e) {
  this.setData({
    startDate: e.detail.value
  });
}

// 选择开始时间
onStartTimeChange(e) {
  this.setData({
    startTime: e.detail.value
  });
}

// 选择结束日期
onEndDateChange(e) {
  this.setData({
    endDate: e.detail.value
  });
}

// 选择结束时间
onEndTimeChange(e) {
  this.setData({
    endTime: e.detail.value
  });
}

解析：

onStartDateChange 和 onStartTimeChange 处理任务开始时间的设置。
onEndDateChange 和 onEndTimeChange 处理任务结束时间的设置。
每当用户选择日期或时间时，相关的状态数据会更新。

步骤四：任务数据的保存

用户完成任务输入和时间设置后，我们需要将任务保存到本地存储，以便用户在下次打开小程序时可以看到自己的任务。我们使用 wx.setStorageSync 来实现任务数据的持久化。

javascript 复制代码

// 确认选择并保存任务
confirmSelection: function () {
  const { startDate, startTime, endDate, endTime, content } = this.data;
  const newTask = { content, startDate, startTime, endDate, endTime };
  const tasks = this.data.tasks;
  const section = this.data.currentSection;
  const all_tasks = this.data.all_tasks;

  // 确保 tasks[section] 存在且是一个数组
  if (!tasks[section]) {
    tasks[section] = [];
  }

  tasks[section].push(newTask);  // 添加新任务

  all_tasks[this.data.selectedDate] = tasks;

  // 更新任务数据到本地缓存
  wx.setStorageSync('tasks', tasks);
  wx.setStorageSync('all_tasks', all_tasks);

  // 关闭弹窗并更新界面
  this.setData({
    isModalTimeVisible: false,
    isModalVisible: true,
    tasks,
    all_tasks,
  });
}

解析：

在 confirmSelection 中，我们将任务的内容和时间保存到 tasks 数组。
任务数据通过 wx.setStorageSync 方法存储在本地，以保证数据持久化。

步骤五：删除任务功能

用户可以删除任务。当点击任务旁边的删除按钮时，任务会被从列表中移除并且同步更新本地存储。

javascript 复制代码

// 删除任务
deleteTask(e) {
  const index = e.currentTarget.dataset.index;
  const section = this.data.currentSection;
  const tasks = this.data.tasks;
  const all_tasks = this.data.all_tasks;

  // 确保 tasks[section] 存在且是一个数组
  if (tasks[section]) {
    tasks[section].splice(index, 1); // 删除指定索引的任务
  }

  all_tasks[this.data.selectedDate] = tasks;

  // 更新任务数据到本地缓存
  wx.setStorageSync('tasks', tasks);
  wx.setStorageSync('all_tasks', all_tasks);

  this.setData({
    tasks,
    all_tasks
  });
}

解析：

deleteTask 方法通过 splice 删除任务，并更新 tasks 和 all_tasks。
删除后的数据同步更新到本地存储。

步骤六：界面设计与用户体验

界面设计是小程序成功的关键部分之一。你可以通过以下几种方式增强用户体验：

使用日期选择器和时间选择器来简化时间输入。
使用 wx.showModal 提示用户输入任务内容。
通过清晰的按钮和反馈信息，帮助用户操作。

总结

在本教程中，我们从零开始实现了一个简单的微信小程序计划时钟。通过使用微信小程序的核心 API，我们实现了任务的添加、时间选择、删除以及数据持久化等功能。最终，用户可以轻松地管理自己的任务，并确保数据在会话之间不丢失。

通过这个项目，你可以学到：

如何利用微信小程序的 wx.showModal 来获取用户输入。
如何使用日期和时间选择器来选择任务时间。
如何使用本地存储来实现数据的持久化。

在后续的开发中，你可以继续扩展功能，例如添加任务分类、提醒功能等，进一步提升小程序的实用性和用户体验。