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

、Jamson

于 2024-09-28 23:00:20 发布

阅读量656

点赞数 16

分类专栏：微信小程序文章标签：小程序微信小程序微信小程序开发软件开发

本文链接：https://blog.csdn.net/qq_41287993/article/details/142623508

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

在这个教程中，我们将一起建立一个简单的待办事项（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); // 更新存储
  }
});