1.?項目規劃

• 功能需求：
  • 添加待辦事項
  • 標記完成/未完成
  • 刪除待辦事項
  • 分類或標簽管理（可選）
  • 數據持久化（本地存儲）

2.?實現功能

• 添加待辦事項：
  • 監聽輸入框和按鈕事件，將輸入內容添加到列表。?
• 標記完成/未完成：
  • 使用復選框或滑動操作，更新事項狀態。
• 刪除待辦事項：
  • 支持左滑刪除或長按刪除。
• 數據持久化：
  • 使用本地存儲待辦事項數據。

3.?代碼實現

基于微信小程序開發一個待辦事項應用，主要包括以下功能：

1. 創建待辦事項
2. 標記完成狀態
3. 刪除待辦事項
4. 本地存儲待辦事項數據

首先，我會創建以下文件：

1. app.json?- 小程序全局配置
2. pages/index/index.js?- 頁面邏輯
3. pages/index/index.wxml?- 頁面結構
4. pages/index/index.wxss?- 頁面樣式
5. pages/index/index.json?- 頁面配置

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "待辦事項","navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

<view class="container"><view class="header"><inputplaceholder="添加待辦事項"value="{{inputValue}}"bindinput="inputChange"bindconfirm="addTodo"/><button bindtap="addTodo">添加</button></view><view class="todo-list"><viewwx:for="{{todos}}"wx:key="id"class="todo-item {{item.done ? 'done' : ''}}"bindtap="toggleTodo"data-id="{{item.id}}"><text>{{item.text}}</text><button bindtap="deleteTodo" data-id="{{item.id}}">刪除</button></view></view>
</view>

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