基于uniapp的简单TodoList应用程序实现

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，用于删除事项。

4. 数据管理
   在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的高级特性和扩展库，以提高自身的技能水平。