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">
    <input
      placeholder="添加待办事项"
      value="{{inputValue}}"
      bindinput="inputChange"
      bindconfirm="addTodo"
    />
    <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 });
  }
});