从零入门微信小程序开发：打造一个 Todo 小程序

2023-10-18 06:30:27

微信小程序初探

微信小程序是一种轻量级的应用程序，可以在微信生态系统内运行。与传统应用程序不同，小程序无需下载安装，只需在微信内即可使用，为用户提供了便捷的交互方式。

从零开始构建 Todo 小程序

一、小程序目录结构

小程序目录结构包含一个整体程序的 app 和多个各自页面的 page。

app 包含三个部分：app.js、app.json 和 app.wxss。其中，app.js 是小程序的入口文件，负责小程序的初始化和全局逻辑；app.json 定义了小程序的配置信息，如页面路径、窗口大小和权限；app.wxss 则包含小程序的全局样式。

每个 page 包含四个部分：page.js、page.json、page.wxml 和 page.wxss。page.js 是页面的逻辑代码，负责处理页面数据和事件；page.json 定义了页面的配置信息，如页面标题和导航栏；page.wxml 是页面的结构和内容，使用类似 HTML 的语法；page.wxss 是页面的样式文件，使用类似 CSS 的语法。

二、创建 Todo 列表

我们首先创建一个小程序页面，展示一个 Todo 列表。在 page.wxml 中，使用 v-for 循环动态渲染 Todo 列表中的每一项：

<view class="todo-list">
  <view class="todo-item" v-for="(item, index) in todos" :key="index">
    <checkbox :checked="item.completed" @change="toggleCompleted(index)" />
    <text>{{ item.title }}</text>
    <button @click="deleteTodo(index)">删除</button>
  </view>
</view>

三、事件处理

小程序提供了丰富的事件系统，允许开发者响应用户的操作。例如，当用户点击 Todo 列表中的复选框时，我们可以使用 v-on 指令绑定 toggleCompleted 方法：

<checkbox :checked="item.completed" @change="toggleCompleted(index)" />

四、数据存储

为了使 Todo 列表的数据在页面刷新后仍然存在，我们需要使用数据存储。小程序提供了多种数据存储方式，例如全局数据和本地存储。在这里，我们使用 Vuex 来管理 Todo 列表的数据：

import Vuex from 'vuex'
const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    toggleCompleted(state, index) {
      state.todos[index].completed = !state.todos[index].completed
    },
    deleteTodo(state, index) {
      state.todos.splice(index, 1)
    }
  }
})

五、样式设计

小程序使用类似 CSS 的语法进行样式设计。我们可以将样式代码写在 page.wxss 中：

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #eee;
}

.todo-item--completed {
  background-color: #ccc;
}