微信小程序开发教学系列（12）- 实战项目案例

news2024/12/24 10:51:05

十二、实战项目案例

本章将通过一个简单的实战项目案例来帮助读者巩固之前学习到的知识。我们将搭建一个名为“ToDoList”的微信小程序，实现一个简单的任务清单功能。

项目介绍

ToDoList是一个用于记录和管理任务的小程序。用户可以添加、编辑、完成和删除任务，以及查看任务清单。

功能需求

  1. 显示任务列表：在首页展示用户添加的任务列表。
  2. 添加任务：用户可以在首页添加新的任务。
  3. 编辑任务：用户可以点击任务进行编辑操作，修改任务的标题和描述。
  4. 完成任务：用户可以点击任务前的复选框完成任务。
  5. 删除任务：用户可以删除不再需要的任务。
  6. 清空任务：用户可以一键清空所有任务。

开发准备

在开始开发之前，我们需要准备以下内容：

  1. 微信开发者工具：用于编写、调试和预览小程序代码。
  2. 一个微信小程序的AppID：用于在微信开发者工具中创建项目。

项目搭建

创建项目

  1. 打开微信开发者工具，点击左上角的“新建小程序”按钮。
  2. 填写项目信息，包括项目名称、AppID（可先使用体验版AppID）、项目目录和模板选择。
  3. 点击“确定”按钮创建项目。

目录结构

在创建好的项目中，我们可以看到以下的目录结构：

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── detail
│       ├── detail.js
│       ├── detail.json
│       ├── detail.wxml
│       └── detail.wxss
└── utils
    └── util.js

其中，app.js 是小程序的入口文件，app.json 是小程序的全局配置文件，app.wxss 是小程序的全局样式文件。

pages 文件夹中存放了小程序的页面文件，每个页面都有独立的文件夹，包含了对应的 .js, .json, .wxml, .wxss 文件。

utils 文件夹中存放了一些通用的工具函数，我们将在后续的开发中用到。

页面设计与布局

首页

在 pages/index 文件夹中，我们将实现任务清单的首页。

在 index.wxml 中，我们将创建一个简单的任务列表和添加任务的表单。

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="header">
    <text class="title">ToDoList</text>
  </view>
  <view class="task-list">
    <!-- 任务列表 -->
    <block wx:for="{{taskList}}" wx:key="index">
      <view class="task-item">
        <checkbox class="checkbox" value="{{item.completed}}" bindchange="completeTask" data-index="{{index}}"></checkbox>
        <view class="task-info">
          <text class="{{item.completed ? 'completed' : ''}}">{{item.title}}</text>
        </view>
        <image class="delete-icon" src="../../images/delete.svg" bindtap="deleteTask" data-index="{{index}}"></image>
      </view>
    </block>
    <!-- 任务为空时显示的提示 -->
    <view class="empty-hint" wx:if="{{taskList.length === 0}}">暂无任务</view>
  </view>
  <view class="task-form">
    <input class="task-input" placeholder="请输入任务内容" bindinput="inputTask" value="{{inputValue}}"></input>
    <button class="add-button" bindtap="addTask">添加任务</button>
  </view>
</view>

上述代码中，我们引用了一个delete.svg文件，这其实是一个矢量图文件，阿里云为我们提供了丰富的免费矢量图，我们可用访问https://www.iconfont.cn/搜索下载需要的图片。
图示
这里我复制其svg代码，在我们项目中创建images目录，并创建delete.svg文件,置入我们复制的代码即可。

在 index.wxss 中，我们将为首页的样式文件添加一些基本样式和布局。

/* pages/index/index.wxss */
.container {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
}

.task-list {
  margin-bottom: 20rpx;
}

.task-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.checkbox {
  margin-right: 10rpx;
}

.task-info {
  flex: 1;
}

.completed {
  text-decoration: line-through;
}

.delete-icon {
  width: 20rpx;
  height: 20rpx;
}

.empty-hint {
  text-align: center;
  color: #999;
  font-size: 16rpx;
  margin-top: 20rpx;
}

.task-form {
  display: flex;
  align-items: center;
}

.task-input {
  flex: 1;
  border: 1rpx solid #999;
  padding: 5rpx;
  border-radius: 5rpx;
}

.add-button {
  background-color: #51a1e7;
  color: #fff;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
  margin-left: 10rpx;
}

在 index.js 中，我们将在 index.js 中实现首页的逻辑和数据绑定。

// pages/index/index.js
Page({
  data: {
    taskList: [], // 任务列表数据
    inputValue: '', // 输入框的值
  },

  // 监听输入框输入事件
  inputTask: function (event) {
    this.setData({
      inputValue: event.detail.value,
    });
  },

  // 添加任务
  addTask: function () {
    const title = this.data.inputValue.trim();
    if (title === '') {
      return;
    }
    const newTask = {
      title: title,
      completed: false,
    };
    const taskList = this.data.taskList;
    taskList.push(newTask);
    this.setData({
      taskList: taskList,
      inputValue: '',
    });
  },

  // 完成任务
  completeTask: function (event) {
    const index = event.currentTarget.dataset.index;
    const taskList = this.data.taskList;
    taskList[index].completed = !taskList[index].completed;
    this.setData({
      taskList: taskList,
    });
  },

  // 删除任务
  deleteTask: function (event) {
    const index = event.currentTarget.dataset.index;
    const taskList = this.data.taskList;
    taskList.splice(index, 1);
    this.setData({
      taskList: taskList,
    });
  },
});

在 index.json 中，我们只需要设置页面标题即可。

{
  "navigationBarTitleText": "ToDoList"
}

至此，我们已经完成了首页的设计和布局。接下来我们将完成任务详情页的设计和逻辑部分。

任务详情页

在 pages/detail 文件夹中，在 pages/detail 文件夹中，我们将实现任务的编辑和详情展示功能。

在 detail.wxml 中，我们将展示任务的标题和描述，并提供编辑和保存功能。

<!-- pages/detail/detail.wxml -->
<view class="container">
  <view class="header">
    <text class="title">{{task.title}}</text>
  </view>
  <view class="content">
    <view class="label">描述：</view>
    <textarea class="description" bindinput="inputDescription" value="{{task.description}}"></textarea>
  </view>
  <view class="footer">
    <button class="edit-button" bindtap="toggleEditMode">{{editMode ? '保存' : '编辑'}}</button>
  </view>
</view>

在 detail.wxss 中，我们为任务详情页添加一些样式。

/* pages/detail/detail.wxss */
.container {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
}

.content {
  margin-bottom: 20rpx;
}

.label {
  font-weight: bold;
  margin-bottom: 10rpx;
}

.description {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #999;
  padding: 5rpx;
  border-radius: 5rpx;
}

.footer {
  text-align: center;
}

.edit-button {
  background-color: #51a1e7;
  color: #fff;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
}

我们将在 detail.js 中实现任务详情页的逻辑和数据绑定。

// pages/detail/detail.js
Page({
  data: {
    task: {}, // 任务数据
    editMode: false, // 编辑模式开关
  },

  // 监听页面加载事件
  onLoad: function (options) {
    const task = JSON.parse(options.task);
    this.setData({
      task: task,
    });
  },

  // 监听输入框输入事件
  inputDescription: function (event) {
    const task = this.data.task;
    task.description = event.detail.value;
    this.setData({
      task: task,
    });
  },

  // 切换编辑模式
  toggleEditMode: function () {
    if (this.data.editMode) {
      // 保存修改
      // 这里可以添加保存任务的逻辑，比如更新后端数据等
      // 这里只是简单地将编辑模式关闭
      this.setData({
        editMode: false,
      });
    } else {
      // 进入编辑模式
      this.setData({
        editMode: true,
      });
    }
  },
});

在 detail.json 中，我们只需要设置页面标题即可。

{
  "navigationBarTitleText": "任务详情"
}

至此，我们已经完成了任务详情页的设计和逻辑部分。

小结

通过这个实战项目案例，我们学习了如何搭建一个简单的任务清单小程序，并实现了添加、编辑、删除和查看任务的功能。同时，我们还学习了如何设计页面结构和布局，如何进行数据的绑定和事件的处理。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/939910.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

迅为RK3568开发板位置提取ROI

迅为RK3568开发板位置提取ROI

本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程 \04_OpenCV 开发配套资料\06”目录下&#xff0c;如下图所示&#xff1a; 在 2.2 小节中学习了 imread()函数用来读取图像文件&#xff0c;以下面的代码为例读取到的信息会被保存到 img 变量中。 …
阅读更多...
mybatis：拦截器Interceptor:

mybatis：拦截器Interceptor:

Mybatis执行概要图 可以从图中看出Mybatis可以被拦截的类型按先后顺序有以下四种&#xff1a; 1.Executor&#xff1a;拦截执行器的方法。 2.StatementHandler&#xff1a;拦截Sql语法构建的处理。 3.ParameterHandler&#xff1a;拦截参数的处理。 4.ResultHandler&#xff1a…
阅读更多...
奥迪A6 C5空调制冷效果差维修（part 1）

奥迪A6 C5空调制冷效果差维修（part 1）

一台2003年出厂的一汽奥迪A6 C5 2.8L轿车&#xff0c;装备BBG发动机及双区自动空调&#xff0c;行驶约159000公里。 该车空调制冷效果差。空调面板设定22度&#xff0c;用手感知出风口温度&#xff0c;凉&#xff0c;但不够凉。 压缩机离合器正常吸合、皮带盘正常运行。 该车…
阅读更多...
第三讲，旋转向量和欧拉角

第三讲，旋转向量和欧拉角

1.旋转向量 旋转矩阵来描述旋转&#xff0c;有了变换矩阵描述一个六自由度 的三维刚体运动&#xff0c;是不是已经足够了呢&#xff1f;但是&#xff0c;矩阵表示方式至少有以下几个缺点&#xff1a; SO(3) 的旋转矩阵有九个量&#xff0c;但一次旋转只有三个自由度。因此这种…
阅读更多...
spring之swagger接口文档

spring之swagger接口文档

ApiOperation(value"") 用在接口方法上 ApiParam(value"") 用在具体参数上 ApiModelProperty(value"") 解释属性
阅读更多...
RBAC实现授权

RBAC实现授权

RBAC分为两种方式&#xff1a; 基于角色的访问控制&#xff08;Role-Based Access Control&#xff09; 基于资源的访问控制&#xff08;Resource-Based Access Control&#xff09; 角色的访问控制&#xff08;Role-Based Access Control&#xff09;是按角色进行授权&…
阅读更多...
算法 -汉诺塔，哈夫曼编码

算法 -汉诺塔，哈夫曼编码

有三个柱子，分别为 from、buffer、to。需要将 from 上的圆盘全部移动到 to 上，并且要保证小圆盘始终在大圆盘上。 这是一个经典的递归问题，分为三步求解： ① 将 n-1 个圆盘从 from -> buffer ② 将 1 个圆盘从 from -> to ③ 将 n-1 个圆盘从 buffer -> to 如果…
阅读更多...
促进企业数字化转型，数据成为新的生产要素

促进企业数字化转型，数据成为新的生产要素

企业围绕运营流程&#xff0c;打造数字经营能力&#xff0c;管理模式从经验驱动向数据驱动转变。现在的企业除了引进先进的设备同时还以数据流为牵引&#xff0c;实现对生产管理、质量管理等功能的深度分析&#xff0c;生产效率提升可达30%&#xff1b;还有智能算法实现智能图形…
阅读更多...
【Java 中级】一文精通 Spring MVC - 数据验证（七）

【Java 中级】一文精通 Spring MVC - 数据验证（七）

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…
阅读更多...
安卓手机如何使用邮箱客户端收发邮件

安卓手机如何使用邮箱客户端收发邮件

安卓手机品牌较多&#xff0c;设置界面都不太相同&#xff0c;部分手机常见的如vivo、小米手机都是直接填写邮箱用户名和密码&#xff0c;软件自动设置&#xff0c;即可登录邮箱&#xff0c;其他安卓手机或者第三方安卓手机软件有时候需要手动设置&#xff0c;此处以安卓手机的…
阅读更多...
docker高级（redis集群三主三从）

docker高级（redis集群三主三从）

1. 新建6个docker容器redis实例 docker run -d --name redis-node-1 --net host --privilegedtrue -v /redis/share/redis-node-1:/data redis:6.0.8 --cluster-enabled yes --appendonly yes --port 6381docker run -d --name redis-node-2 --net host --privilegedtrue -v /…
阅读更多...
本地化部署ChatGLM2-6B模型

本地化部署ChatGLM2-6B模型

本地化部署ChatGLM2-6B模型 简介硬件需求 环境部署安装Miniconda创建虚拟环境下载模型和源码安装依赖GPU部署CPU部署 运行程序GPU模式CPU模式命令行运行网页版运行API运行 简介 ChatGLM是清华大学开源的方案&#xff0c;中文效果还是很不错的。基于 General Language Model (G…
阅读更多...
2023年高教社杯数学建模思路 - 案例：感知机原理剖析及实现

2023年高教社杯数学建模思路 - 案例：感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…
阅读更多...
TCP与UDP的区别（什么是三次握手和四次挥手）

TCP与UDP的区别（什么是三次握手和四次挥手）

目录 一、TCP和UDP是什么 二、TCP和UDP的区别 三、TCP协议三次握手 为什么是三次握手而不是两次握手 &#xff1f; 在不可靠信道上建立可靠连接会产生什么问题呢&#xff1f; 四、四次挥手 为什么客户端需要等待超时时间&#xff1f; 总结&#xff1a; 我们日常生活中微…
阅读更多...
医疗中心管理环境温湿度，这样操作就对了！

医疗中心管理环境温湿度，这样操作就对了！

随着医疗技术的不断发展&#xff0c;越来越多的医疗设备对于稳定的工作环境要求越来越高&#xff0c;而环境温湿度是影响这些设备性能和可靠性的关键因素之一。 为了确保医疗设备的正常运行和患者的安全&#xff0c;医疗机构越来越倾向于采用精密空调监控系统来维护设备的稳定性…
阅读更多...
如何输出高质量软文，媒介盒子教你4大技巧

如何输出高质量软文，媒介盒子教你4大技巧

作为一名软文作者&#xff0c;只有知道软文写作的要求&#xff0c;才能打造一篇成功的软文&#xff0c;以便为企业或产品带来较高的关注度和曝光率&#xff0c;提高企业的知名度和品牌形象。下面就随小编一起来看看吧&#xff01; 1、吸引眼球的标题 标题是软文写作的灵魂&am…
阅读更多...
css-伪类:not实现列表最后一项没有样式

css-伪类:not实现列表最后一项没有样式

有了&#xff1a;not这个选择符&#xff0c;那么你将可以很好的处理类似这样的场景&#xff1a;假定有个列表&#xff0c;每个列表项都有一条底边线&#xff0c;但是最后一项不需要底边线。 示例&#xff1a; html: <ul><li>111111111111</li><li>21…
阅读更多...
传统品牌如何通过3D虚拟数字人定制和动捕设备加速年轻化发展？

传统品牌如何通过3D虚拟数字人定制和动捕设备加速年轻化发展？

步入Z时代&#xff0c;年轻一代消费者的生活方式深受互联网技术和媒介环境影响&#xff0c;对新潮事物感兴趣&#xff0c;消费思维也相对前卫&#xff0c;品牌需要探索契合Z世代的消费观念&#xff0c;寻找新的链接拉近品牌与消费者的距离&#xff0c;而3D虚拟数字人定制可以帮…
阅读更多...
900ES1-0100 honeywell 可减少视觉引导应用的整体开发时间

900ES1-0100 honeywell 可减少视觉引导应用的整体开发时间

900ES1-0100 honeywell 可减少视觉引导应用的整体开发时间 CV2视觉系统配有高柔性电缆(以太网或USB)。通过将高柔性电缆作为所有CV2视觉系统的标准配置&#xff0c;Epson CV2摄像机可以安装在机器人臂(移动)或固定装置(固定)上。基于向导的校准使机器人到视觉系统的校准变得轻…
阅读更多...
内网穿透——搭建私人影音媒体平台

内网穿透——搭建私人影音媒体平台

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023