待办事项小程序开发

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"> <button bindtap="addTodo">添加</button> </view> <view class="todo-list"> <view wx: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 });
   }
   });