1. 前言
本章将介绍如何使用uniapp开发一个简单的TodoList应用程序。通过这个项目实践，你将巩固所学的uniapp基础知识和技能，并且了解如何将它们应用到实际开发中。
2. 项目概述
我们要实现一个TodoList应用程序，它具有以下功能：
- 添加待办事项
- 查看待办事项列表
- 标记已完成事项
- 删除事项
3. 页面设计
为了实现上述功能，我们需要创建两个页面：添加待办事项页面和待办事项列表页面。
3.1 添加待办事项页面
在HBuilder X中创建一个新页面，命名为addTodo，然后在页面结构中添加以下组件：
<template>
<view class="add-todo">
<input type="text" placeholder="请输入待办事项内容" v-model="todo" />
<button type="primary" @tap="addTodo">添加</button>
</view>
</template>
这里使用了uniapp的内置组件<input>和<button>，并使用了v-model指令进行双向数据绑定。同时，我们给按钮添加了@tap事件处理函数addTodo，用于添加新的待办事项。
3.2 待办事项列表页面
在HBuilder X中再创建一个新页面，命名为todoList，然后在页面结构中添加以下组件：
<template>
<view class="todo-list">
<view class="todo-item" v-for="(item, index) in todoList" :key="index">
<checkbox :value="item.done" @change="onCheckboxChange(index)" />{{ item.content }}
<button type="warn" size="mini" @tap="deleteTodo(index)">删除</button>
</view>
</view>
</template>
这里使用了uniapp的内置组件<checkbox>和<button>，并使用了v-for指令进行列表渲染。同时，我们给复选框添加了@change事件处理函数onCheckboxChange，用于标记已完成事项；给按钮添加了@tap事件处理函数deleteTodo，用于删除事项。
- 数据管理
在addTodo页面中，我们需要将用户输入的待办事项内容保存到一个数组中。在todoList页面中，我们需要展示这个数组，并提供标记已完成和删除事项的功能。
在uni-app中可以使用vuex来进行全局数据的管理，但是在这个简单的项目中使用vuex代价太大，因此我们使用uniapp的另一种数据管理方式：使用App.vue作为全局事件总线来传递数据。
首先，在App.vue文件中定义一个空数组todoList，我们将在后面的步骤中对它进行操作：
export default {
data() {
return {
todoList: []
}
}
}
然后，在addTodo页面中，我们在addTodo方法中将用户输入的待办事项保存到App.vue的todoList数组中，并且使用uniapp的路由功能返回到todoList页面：
export default {
methods: {
addTodo() {
if (!this.todo) return
this.$parent.todoList.push({
content: this.todo,
done: false
})
uni.navigateBack()
}
}
}
在todoList页面中，我们通过computed属性来获取App.vue的todoList数组，并提供标记已完成和删除事项的方法：
export default {
computed: {
todoList() {
return this.$parent.todoList
}
},
methods: {
onCheckboxChange(index) {
this.todoList[index].done = !this.todoList
[index].done
},
deleteTodo(index) {
this.todoList.splice(index, 1)
}
}
}
5. 总结
到这里，我们已经完成了一个简单的TodoList应用程序的开发。通过这个项目实践，我们巩固了uniapp的基础知识和技能，并且了解如何将它们应用到实际开发中。
在实际开发中，我们可以进一步扩展应用程序的功能，例如：添加搜索、过滤、排序等功能；使用本地存储或后端API来持久化数据等。同时，我们也可以继续学习uniapp的高级特性和扩展库，以提高自身的技能水平。
网友评论