在本教程中，我們將一起實現一個微信小程序——計劃時鐘。這個小程序的核心功能是幫助用戶添加任務、設置任務的時間范圍，并且能夠刪除和查看已添加的任務。通過以下步驟，我們將帶你從零開始實現一個具有基本功能的微信小程序計劃時鐘。

項目需求

在我們的計劃時鐘應用中，我們將實現以下功能：

1. 任務添加：用戶可以輸入任務內容，并選擇任務的開始時間和結束時間。
2. 任務刪除：用戶可以刪除不再需要的任務。
3. 數據持久化：所有任務數據將保存在微信小程序的本地存儲中，以確保用戶重啟應用后數據依舊存在。

我們將通過以下幾個步驟來完成這一小程序的設計與開發。

步驟一：設計數據結構

首先，我們需要定義應用的基本數據結構，用來存儲任務。我們將使用 tasks 數組來保存任務，每個任務包含內容、開始時間和結束時間等信息。任務將按日期進行分類，便于展示。

// 初始數據結構
data: {tasks: {},            // 存儲每個日期的任務列表all_tasks: {},        // 存儲所有日期的任務數據selectedDate: '',     // 當前選中的日期startDate: '',        // 任務開始日期startTime: '',        // 任務開始時間endDate: '',          // 任務結束日期endTime: '',          // 任務結束時間content: '',          // 任務內容isModalVisible: false, // 是否顯示輸入框彈窗isModalTimeVisible: false, // 是否顯示時間選擇彈窗
}

步驟二：添加新任務功能

任務的添加是通過彈出一個輸入框，讓用戶填寫任務內容，并在填寫完成后選擇任務的開始時間和結束時間。我們使用 wx.showModal 來顯示輸入框，并獲取用戶的輸入內容。

// 新增計劃
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?彈出一個輸入框，讓用戶填寫任務內容。
• 如果用戶輸入內容且確認，我們會保存任務內容，并切換到時間選擇模式。

步驟三：時間選擇功能

用戶在輸入任務內容后，接下來需要設置任務的開始時間和結束時間。我們通過微信小程序的日期和時間選擇器來實現這一功能。

// 選擇開始日期
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 來實現任務數據的持久化。

// 確認選擇并保存任務
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?方法存儲在本地，以保證數據持久化。

步驟五：刪除任務功能

用戶可以刪除任務。當點擊任務旁邊的刪除按鈕時，任務會被從列表中移除并且同步更新本地存儲。

// 刪除任務
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，我們實現了任務的添加、時間選擇、刪除以及數據持久化等功能。最終，用戶可以輕松地管理自己的任務，并確保數據在會話之間不丟失。

通過這個項目，你可以學到：

1. 如何利用微信小程序的?wx.showModal?來獲取用戶輸入。
2. 如何使用日期和時間選擇器來選擇任務時間。
3. 如何使用本地存儲來實現數據的持久化。

在后續的開發中，你可以繼續擴展功能，例如添加任務分類、提醒功能等，進一步提升小程序的實用性和用戶體驗。