小程序开发实战项目：构建简易待办事项列表

小程序开发实战项目：构建简易待办事项列表

随着移动互联网的飞速发展，小程序以其便捷性、即用即走的特点，成为了连接用户与服务的重要桥梁。无论是电商平台的购物助手，还是餐饮行业的点餐系统，小程序都在各个领域发挥着巨大的作用。

小程序开发基础

1. 小程序简介

小程序是一种无需下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序的出现，不仅降低了应用的开发门槛，还为用户提供了更加流畅的使用体验。

2. 小程序开发环境

要进行小程序开发，首先需要准备开发环境。开发者工具是官方提供的小程序开发工具，它集成了代码编写、调试、预览等功能，是开发者进行小程序开发的必备工具。

. 小程序项目结构

小程序项目结构通常包括app.js、app.json、app.wxss以及pages文件夹。其中，app.js是全局脚本文件，用于定义全局变量和函数；app.json是全局配置文件，用于配置小程序的页面路径、导航栏样式等；app.wxss是全局样式文件，用于定义小程序的样式；pages文件夹则用于存放小程序的各个页面。

小程序开发核心技能

1. 数据绑定与事件处理

在小程序中，数据绑定与事件处理是实现页面交互的重要技能。通过数据绑定，可以将页面的数据与逻辑层的数据进行关联，实现数据的动态更新。而事件处理则用于响应用户的交互行为，如点击、滑动等，从而触发相应的逻辑处理。

技能点	描述
数据绑定	将页面的数据与逻辑层的数据进行关联，实现数据的动态更新
事件处理	响应用户的交互行为，如点击、滑动等，触发相应的逻辑处理

2. 页面生命周期

小程序中的页面具有生命周期的概念，它描述了页面从加载到卸载的整个过程。开发者可以通过监听页面的生命周期事件，来执行相应的逻辑处理。

生命周期事件	描述
onLoad	页面加载时触发
onShow	页面显示时触发
onHide	页面隐藏时触发
onUnload	页面卸载时触发

. 网络请求与数据缓存

在小程序中，网络请求和数据缓存是实现与外部服务器交互的重要技能。通过网络请求，可以获取服务器上的数据，并更新到页面上。而数据缓存则可以提高数据访问速度，减少网络请求次数。

技能点	描述
网络请求	通过HTTP协议向服务器发送请求，获取数据
数据缓存	将数据存储在本地，提高数据访问速度

4. 组件与API

小程序提供了丰富的组件和API，用于实现各种功能。组件是构成页面的基本元素，如按钮、输入框等。而API则是小程序提供的各种功能接口，如文件操作、地理位置获取等。

组件/API	描述
按钮组件	用于创建按钮元素
输入框组件	用于创建输入框元素
网络请求API	用于向服务器发送HTTP请求
数据缓存API	用于管理本地数据缓存

实战项目：构建待办事项列表

在掌握了小程序开发的核心技能后，我们可以开始构建待办事项列表小程序了。该项目将涵盖数据绑定、事件处理、页面生命周期、网络请求与数据缓存等多个技能点，让你在实践中巩固所学知识。

1. 修改app.json

在app.json中，我们需要添加新页面的路径。

代码语言：javascript代码运行次数：0运行复制

{
  "pages": [
    "pages/index/index", // 默认页面
    "pages/todo/todo" // 新增的待办事项页面
  ],
  "window": {
    "navigationBarTitleText": "TodoList"
  }
}

2. 创建待办事项页面

在pages文件夹下，创建一个名为todo的文件夹，并在其中创建todo.js、todo.json、todo.wxml和todo.wxss文件。

todo.json

配置页面的基本属性，如导航栏标题等。

代码语言：javascript代码运行次数：0运行复制

{
  "navigationBarTitleText": "待办事项"
}

todo.wxml

编写页面的结构，包括输入框、添加按钮和事项列表。

代码语言：javascript代码运行次数：0运行复制

<!-- todo.wxml -->
<view class="container">
  <!-- 输入框 -->
  <input type="text" placeholder="请输入待办事项" bindinput="handleInput" value="{{inputValue}}" />
  <!-- 添加按钮 -->
  <button bindtap="addItem">添加</button>
  <!-- 事项列表 -->
  <block wx:for="{{items}}" wx:key="index">
    <view class="item">
      <text>{{item}}</text>
      <!-- 删除按钮 -->
      <button bindtap="deleteItem" data-index="{{index}}">删除</button>
    </view>
  </block>
</view>

todo.wxss

编写页面的样式，使界面更加美观。

代码语言：javascript代码运行次数：0运行复制

/* todo.wxss */
.container {
  padding: 20px;
}

input {
  width: 80%;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}

.item {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item button {
  background-color: #ff5722;
}

todo.js 编写页面的逻辑，包括数据绑定、事件处理等。

代码语言：javascript代码运行次数：0运行复制

// todo.js
Page({
  data: {
    inputValue: '', // 输入框的值
    items: [] // 待办事项列表
  },

  // 处理输入框输入事件
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value // 更新输入框的值
    });
  },

  // 添加待办事项
  addItem() {
    ct { inputValue, items } = this.data;
    if (() !== '') { // 检查输入框是否为空
      this.setData({
        items: [...items, inputValue], // 将新事项添加到列表中
        inputValue: '' // 清空输入框
      });
    } else {
      wx.showToast({
        title: '请输入待办事项',
        icon: 'none'
      });
    }
  },

  // 删除待办事项
  deleteItem(e) {
    ct { items } = this.data;
    ct index = dataset.index; // 获取要删除的项的索引
    this.setData({
      items: items.filter((_, i) => i !== index) // 从列表中移除该项
    });
  }
});

代码详解

• todo.wxml：
• • 使用<input>标签创建输入框，绑定bindinput事件处理函数handleInput，用于实时更新输入框的值。
  • 使用<button>标签创建添加按钮，绑定bindtap事件处理函数addItem，用于添加待办事项。
  • 使用<block wx:for="{{items}}">循环渲染待办事项列表，每个事项包含一个文本和一个删除按钮。
  • 删除按钮绑定bindtap事件处理函数deleteItem，并传递当前项的索引data-index="{{index}}"。
• todo.wxss：
• • 设置容器的内边距。
  • 设置输入框的宽度、内边距、边框、边框半径等样式。
  • 设置按钮的内边距、背景、文字颜、边框、边框半径等样式。
  • 设置事项列表项的样式，包括上边距、布局方式（flex）、子元素的对齐方式（align-items: center）和间距（justify-content: space-between）。
• todo.js：
• • 在data对象中定义inputValue（输入框的值）和items（待办事项列表）。
  • handleInput函数用于处理输入框的输入事件，更新inputValue的值。
  • addItem函数用于添加待办事项，首先检查输入框是否为空，如果不为空，则将新事项添加到items列表中，并清空输入框。
  • deleteItem函数用于删除待办事项，根据传递的索引index从items列表中移除对应的项。

总结

通过本次实战项目，我们掌握了小程序开发的基本流程，包括项目初始化、页面创建、数据绑定、事件处理等核心技能。同时，我们也学会了如何编写清晰、易读的代码，并对每一行代码进行了详细的注释，以便读者能够更好地理解和掌握小程序开发的精髓。希望本文能够帮助你快速上手小程序开发，并激发你探索更多小程序开发技能的兴趣。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2024-12-26，如有侵权请联系 cloudcommunity@tencent 删除前往查看开发数据网络小程序函数