当前位置：首页 > news >正文

微信小程序开发系列之-实战搭建一个简单的待办事项小程序

news 来源：原创 2024/9/29 0:55:59

微信小程序开发系列之-实战搭建一个简单的待办事项小程序

在这个教程中，我们将一起建立一个简单的待办事项（To-Do List）小程序。这个小程序将允许用户添加、查看和删除待办事项，使用 WXML、WXSS、JavaScript 以及小程序提供的 API。通过这个项目，我们不仅可以了解小程序的基本构建方式，还可以掌握状态管理、数据绑定及事件处理等核心概念。

一、项目结构

我们会根据以下的项目结构来组织我们的代码：

/todo-app├── /pages│   └── /index│       ├── index.wxml│       ├── index.wxss│       ├── index.js│       └── index.json└── app.js└── app.json└── app.wxss

说明

app.js: 小程序的入口文件。
app.json: 小程序的全局配置文件。
app.wxss: 小程序的全局样式文件。
pages/index: 这是我们主要的待办事项页面。

二、创建项目

在开始之前，请确保你已经安装了微信开发者工具。然后可以按照以下步骤创建一个新的小程序项目：

打开微信开发者工具，选择 “新建小程序”。
输入 AppID，可以选择填写任意字符进行测试。
选择项目目录，输入项目名称（例如 “todo-app”）。
点击“创建”按钮。

三、配置 app.json

在项目根目录下的 app.json 文件添加以下代码来配置我们的页面：

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "待办事项","navigationBarBackgroundColor": "#007aff","navigationBarTextStyle": "white"}
}

解释

pages: 定义了小程序的页面路径。
window: 配置了小程序窗口的导航栏的样式。

四、搭建基本界面

接下来，我们创建待办事项页面的 UI，由于我们只需要一个输入框和一个按钮来添加待办事项，下面是我们在 index.wxml 中的代码：

1. index.wxml

<view class="container"><view class="header"><input placeholder="请输入待办事项" bindinput="onInput" value="{{inputValue}}" /><button bindtap="addTodo">添加</button></view><view class="todos"><block wx:for="{{todos}}" wx:key="index"><view class="todo-item"><text>{{item}}</text><button bindtap="removeTodo" data-index="{{index}}">删除</button></view></block></view>
</view>

解释

input: 用户输入待办事项。
button: 用于添加待办事项。
wx:for: 遍历待办事项数组，动态生成对应的列表。
data-index: 在删除按钮上添加一个索引，以便我们在删除时知道要删除哪个事项。

2. index.wxss

.container {padding: 20rpx;
}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;
}input {flex: 1;height: 40rpx;border: 1px solid #ccc;border-radius: 4rpx;padding: 0 10rpx;
}button {margin-left: 10rpx;background-color: #007aff;color: white;border: none;border-radius: 4rpx;padding: 10rpx 15rpx;
}.todos {margin-top: 20rpx;
}.todo-item {display: flex;justify-content: space-between;align-items: center;padding: 10rpx;border-bottom: 1px solid #f0f0f0;
}

解释

.container: 页面容器的样式。
.header: 输入框和按钮的布局。
.todo-item: 每个待办事项的样式。

五、编写逻辑代码

在 index.js 中，我们将实现添加和删除待办事项的逻辑：

1. index.js

Page({data: {inputValue: '',  // 保存用户输入的待办事项todos: []        // 待办事项数组},// 处理输入框变化onInput(event) {this.setData({inputValue: event.detail.value});},// 添加待办事项addTodo() {if (this.data.inputValue.trim() === '') {wx.showToast({title: '待办事项不能为空',icon: 'none'});return;}this.setData({todos: [...this.data.todos, this.data.inputValue],inputValue: ''  // 重置输入框});},// 删除待办事项removeTodo(event) {const index = event.currentTarget.dataset.index;const todos = this.data.todos;todos.splice(index, 1); // 删除对应索引的事项this.setData({todos});}
});

解释

data: 定义小程序的数据状态，包括输入框的值和待办事项数组。
onInput: 处理输入框的事件，将输入的值更新到 inputValue 中。
addTodo: 添加待办事项。如果输入为空，将弹出提示框。
removeTodo: 根据点击按钮的索引，删除对应的待办事项。

六、运行与测试

在完成代码后，点击微信开发者工具中的 “预览” 按钮，可以在模拟器中查看我们的待办事项小程序。输入待办事项并测试加、删功能，确保一切工作正常。

七、完善小程序

虽然我们已经实现了一个基础功能的小程序，但我们可以进一步增强其体验：

1. 数据持久化

为了避免每次重新进入小程序时丢失待办事项数据，我们可以利用微信小程序的 wx.setStorage 和 wx.getStorage 方法进行数据存储。

在页面加载时读取存储的待办事项：

index.js 更新

Page({data: {inputValue: '',todos: []},onLoad() {const todos = wx.getStorageSync('todos') || [];  // 从本地存储中读取this.setData({todos});},// 添加待办事项addTodo() {if (this.data.inputValue.trim() === '') {wx.showToast({title: '待办事项不能为空',icon: 'none'});return;}const newTodos = [...this.data.todos, this.data.inputValue];this.setData({todos: newTodos,inputValue: ''});wx.setStorageSync('todos', newTodos); // 存储到本地},// 删除待办事项removeTodo(event) {const index = event.currentTarget.dataset.index;const todos = this.data.todos;todos.splice(index, 1);this.setData({ todos });wx.setStorageSync('todos', todos); // 更新存储}
});