1. 项目规划
-
功能需求：
-
添加待办事项
-
标记完成/未完成
-
删除待办事项
-
分类或标签管理（可选）
-
数据持久化（本地存储）
2. 实现功能
-
添加待办事项：
-
监听输入框和按钮事件，将输入内容添加到列表。
-
标记完成/未完成：
-
使用复选框或滑动操作，更新事项状态。
-
删除待办事项：
-
支持左滑删除或长按删除。
-
数据持久化：
-
使用本地存储待办事项数据。
3. 代码实现
基于微信小程序开发一个待办事项应用，主要包括以下功能：
- 创建待办事项
- 标记完成状态
- 删除待办事项
- 本地存储待办事项数据
首先，我会创建以下文件：
-
app.json- 小程序全局配置 -
pages/index/index.js- 页面逻辑 -
pages/index/index.wxml- 页面结构 -
pages/index/index.wxss- 页面样式 -
pages/index/index.json- 页面配置{ "pages": "pages/index/index", "window": { "navigationBarTitleText": "待办事项", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
添加 {{item.text}} 删除.container { padding: 20px; } .header { display: flex; margin-bottom: 20px; } .header input { flex: 1; margin-right: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .todo-list { margin-top: 20px; } .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; margin-bottom: 10px; border: 1px solid #eee; border-radius: 4px; } .todo-item.done { text-decoration: line-through; color: #999; }
Page({ data: { todos: \[\], inputValue: '' }, onLoad() { this.loadTodos(); }, loadTodos() { const todos = wx.getStorageSync('todos') || \[\]; this.setData({ todos }); }, saveTodos() { wx.setStorageSync('todos', this.data.todos); }, addTodo() { if (!this.data.inputValue.trim()) return; const newTodo = { id: Date.now(), text: this.data.inputValue, done: false }; this.setData({ todos: ...this.data.todos, newTodo, inputValue: '' }, this.saveTodos); }, toggleTodo(e) { const { id } = e.currentTarget.dataset; const todos = this.data.todos.map(todo => todo.id === id ? { ...todo, done: !todo.done } : todo ); this.setData({ todos }, this.saveTodos); }, deleteTodo(e) { const { id } = e.currentTarget.dataset; const todos = this.data.todos.filter(todo => todo.id !== id); this.setData({ todos }, this.saveTodos); }, inputChange(e) { this.setData({ inputValue: e.detail.value }); } });