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