UniApp实战：构建一个待办事项列表应用

UniApp是一个基于Vue.js的跨平台应用开发框架，它能够使用一套代码构建同时运行在多个平台的应用，包括iOS、Android、Web等。本文将指导你如何使用UniApp开发一个简单的待办事项列表应用。

1. 创建UniApp项目

首先，确保你已经安装了最新版本的HBuilderX（UniApp官方开发工具）。在HBuilderX中，选择“新建项目”并填写项目名称、目录和模板类型，选择“Hello UniApp”模板即可。

2. 编写组件

在项目中，UniApp使用Vue.js的语法来编写组件。我们首先创建一个TodoList组件来展示待办事项列表。在项目的/components目录下创建一个新文件TodoList.vue，并将以下代码添加到文件中：

<template>
  <div class="todo-list">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: ['任务1', '任务2', '任务3'],
    };
  },
};
</script>

<style scoped>
.todo-list {
  margin: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}
</style>

在上面的代码中，我们定义了一个todos数组来存储待办事项的列表数据，并在模板中使用v-for指令来循环渲染每个待办事项。

3. 使用组件

接下来，在主页面中使用TodoList组件来展示待办事项列表。打开/pages/index/index.vue文件，并将以下代码添加到文件中：

<template>
  <div class="container">
    <h1>待办事项列表</h1>
    <TodoList />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList';

export default {
  components: {
    TodoList,
  },
};
</script>

<style>
.container {
  text-align: center;
  padding: 20px;
}
</style>

在上面的代码中，我们导入了TodoList组件并在components选项中注册了它。然后，我们在模板中使用TodoList组件来展示待办事项列表。

4. 运行应用

现在，我们已经完成了待办事项列表应用的开发。在HBuilderX中点击运行按钮，选择运行的平台（如iOS模拟器、Android模拟器或Web浏览器），即可在所选平台上查看并测试应用。

5. 扩展功能

你可以进一步扩展该应用的功能，例如添加新的待办事项、标记已完成的任务、删除任务等。可以通过对todos数组进行增删改操作来实现这些功能。

<template>
  <div class="todo-list">
    <input type="text" v-model="newTodo" placeholder="添加新任务" @keydown.enter="addTodo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
        <button @click="completeTodo(index)">完成</button>
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { title: '任务1', completed: false },
        { title: '任务2', completed: true },
        { title: '任务3', completed: false },
      ],
      newTodo: '',
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({ title: this.newTodo, completed: false });
        this.newTodo = '';
      }
    },
    completeTodo(index) {
      this.todos[index].completed = true;
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.todo-list {
  margin: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

.completed {
  text-decoration: line-through;
}
</style>

在上面的代码中，我们添加了输入框和两个按钮来实现添加新任务的功能。还添加了completeTodo和deleteTodo方法来标记任务为完成状态或删除任务。

现在，你可以根据需要自由扩展该应用的功能。

6. 数据持久化

在上面的示例中，我们将待办事项数据存储在组件的数据对象中，但这种方式只能在应用运行期间保存数据。如果应用关闭后再次打开，数据将丢失。为了实现数据的持久化存储，我们可以使用本地存储机制。

在UniApp中，可以使用uni.setStorageSync和uni.getStorageSync方法来进行本地存储操作。我们将使用本地存储来保存待办事项列表数据。

首先，在TodoList组件的created生命周期钩子中加载本地存储的数据，并在更新数据时将数据保存到本地存储中。打开/components/TodoList.vue文件，并更新代码如下：

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: '',
    };
  },
  created() {
    const storedTodos = uni.getStorageSync('todos');
    if (storedTodos) {
      this.todos = storedTodos;
    }
  },
  methods: {
    addTodo() {
      // ...
      uni.setStorageSync('todos', this.todos);
    },
    completeTodo(index) {
      // ...
      uni.setStorageSync('todos', this.todos);
    },
    deleteTodo(index) {
      // ...
      uni.setStorageSync('todos', this.todos);
    },
  },
};
</script>

在上面的代码中，我们在created生命周期钩子中尝试获取本地存储的待办事项数据，并将其赋值给todos数组。在每次更新数据时，我们使用uni.setStorageSync方法将数据保存到本地存储中。

现在，当应用关闭并重新打开时，待办事项列表数据将被恢复。

7. 构建和发布应用

在开发完成后，我们可以将UniApp应用构建为不同平台的应用程序包，并进行发布。

在HBuilderX中，选择菜单栏中的“运行” > “运行到手机或模拟器”并选择目标平台，将应用运行在真机或模拟器中进行测试。

要构建发布应用程序包，选择菜单栏中的“发行” > “原生APP-云打包”或“发行” > “H5+”等选项，根据所选平台和发布方式进行配置和操作。具体的构建和发布过程可以参考UniApp官方文档中的相关指南。

总结

本文介绍了使用UniApp开发一个简单待办事项列表应用的实战技术。我们通过编写组件、使用组件、数据持久化和构建发布等步骤，演示了UniApp的基本开发流程。

通过UniApp，你可以高效地开发跨平台应用，并且使用Vue.js的语法和特性来构建丰富的应用程序。