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

十二、实战项目案例

本章将通过一个简单的实战项目案例来帮助读者巩固之前学习到的知识。我们将搭建一个名为“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.mzph.cn/news/66339.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker部署RustDesk Server 设置开机自启

三、Docker安装 Docker官方和国内daocloud都提供了一键安装的脚本&#xff0c;使得Docker的安装更加便捷。 官方的一键安装方式&#xff1a; curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 国内 daocloud一键安装命令&#xff1a; curl -sSL https://…

Docker学习

文章目录 我的docker环境替换apt软件包镜像源docker安装以apt包管理器安装docker卸载 以docker官方存储库安装卸载 添加某用户到docker组配置docker镜像 docker命令学习操作守护进程相关命令操作镜像相关命令查看镜像搜索镜像拉取镜像删除镜像 操作容器相关命令查看容器创建容器…

索引 事务 存储引擎

################索引##################### 一、索引的概念 ●索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于C语言的链表通过指针指向数据记录的内存地址&#xff09;。 ●使用索引后可以不用扫描全表来…

Python算法——排序算法(冒泡、选择、插入、快速、堆排序、并归排序、希尔、计数、桶排序、基数排序)

本文章只展示代码实现 &#xff0c;原理大家可以参考&#xff1a; https://zhuanlan.zhihu.com/p/42586566 一、冒泡排序 def bubble_sort(lst):for i in range(len(lst) - 1): # 表示第i趟exchange False # 每一趟做标记for j in range(len(lst)-i-1): # 表示箭头if ls…

Deepin 图形化部署 Hadoop Single Node Cluster

Deepin 图形化部署 Hadoop Single Node Cluster 升级操作系统和软件 快捷键 ctrlaltt 打开控制台窗口 更新 apt 源 sudo apt update更新 系统和软件 sudo apt -y dist-upgrade升级后建议重启 开启ssh服务 打开资源管理器 进入系统盘 找到 etc 目录 在系统盘的 etc 目录上 右键…

DB2和MYSQL的LOAD原理和比较测试

DB2 load的过程&#xff1a; &#xff08;1&#xff09;、装入阶段 装入阶段将源数据解析成物理数据页的格式&#xff0c;直接装入到数据页中。必要时还收集索引键和表统计信息。 &#xff08;2&#xff09;、构建索引阶段 根据在装入阶段收集的索引键创建表索引。 &#xff08…

使用 htmx 构建交互式 Web 应用

学习目标&#xff1a;了解htmx的基本概念、特点和用法&#xff0c;并能够运用htmx来创建交互式的Web应用程序。 学习内容&#xff1a; 1. 什么是htmx&#xff1f; - htmx是一种用于构建交互式Web应用程序的JavaScript库。 - 它通过将HTML扩展为一种声明性的交互式语言&a…

【校招VIP】前端校招考点之UDP

考点介绍&#xff1a; UDP是非面向连接协议&#xff0c;使用udp协议通讯并不需要建立连接&#xff0c;它只负责把数据尽可能发送出去&#xff0c;并不可靠&#xff0c;在接收端&#xff0c;UDP把每个消息断放入队列中&#xff0c;接收端程序从队列中读取数据。 『前端校招考点…

【leetcode 力扣刷题】汇总区间//合并区间//插入区间

一些关于区间的力扣题目 228. 汇总区间56. 合并区间57. 插入区间 228. 汇总区间 题目链接&#xff1a;228.汇总区间 题目内容&#xff1a; 看题目真是没懂这个题到底是要干啥……实际上题目要求的恰好覆盖数组中所有数字的最小有序区间范围列表&#xff0c;这个最小是指一个区…

使用Docker安装和部署kkFileView

&#x1f388;1 参考文档 kkFileView官方文档 &#x1f680;2 安装kkFileView 拉取Redis镜像。 docker pull keking/kkfileview启动docker容器。 docker run -it -d -p 8012:8012 keking/kkfileview --restart always解释&#xff1a; docker run redis # 从kkfileview镜像运行…

『PyQt5-Qt Designer篇』| 08 Qt Designer中容器布局和绝对布局的使用

08 Qt Designer中容器布局和绝对布局的使用 1 容器布局1.1 设计容器布局1.2 保存文件并执行2 绝对布局2.1 设计绝对布局2.2 保存文件并执行1 容器布局 1.1 设计容器布局 先拖入一个容器Frame容器,然后拖入几个控件: 把拖入的控件拖入容器中: 选中容器,右键-布局-栅格布局:…

Python大数据处理利器之Pyspark详解

摘要&#xff1a; 在现代信息时代&#xff0c;数据是最宝贵的财富之一&#xff0c;如何处理和分析这些数据成为了关键。Python在数据处理方面表现得尤为突出。而pyspark作为一个强大的分布式计算框架&#xff0c;为大数据处理提供了一种高效的解决方案。本文将详细介绍pyspark…

docker安装elasticsearch、kibana

安装过程中&#xff0c;遇到最大的问题就是在安装kibana的时候发现 一直连接不上 elasticsearch。最后解决的问题就是 我通过 ifconfig en0 | grep inet| awk {print $2} 在mac中找到本机的ip&#xff0c;然后去到kibana容器中 修改 vi config/kibana.yml中的elasticsearch.hos…

leetcode做题笔记125. 验证回文串

如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &#xff1b;否则&#…

Redis 学习笔记

文章目录 一、简介二、下载三、安装四、启动和关闭五、配置文件六、常用指令七、安全加固 版权声明&#xff1a;本文为CSDN博主「杨群」的原创文章&#xff0c;遵循 CC 4.0 BY-SA版权协议&#xff0c;于2023年9月3日首发于CSDN&#xff0c;转载请附上原文出处链接及本声明。 原…

父组件调用子组件 ref 不生效?组件暴露 ref ?

向你的组件暴露 ref 要暴露 ref 最关键的就是 forwardRef forwardRef 是 React 中的一个高阶函数&#xff0c;用于在函数组件中将 ref 属性向下传递给子组件。 在 React 中&#xff0c;我们可以使用 ref 属性来获取对一个组件实例的引用&#xff0c;以便在父组件中操作子组件。…

Dynamic ReLU:根据输入动态确定的ReLU

这是我最近才看到的一篇论文&#xff0c;它提出了动态ReLU (Dynamic ReLU, DY-ReLU)&#xff0c;可以将全局上下文编码为超函数&#xff0c;并相应地调整分段线性激活函数。与传统的ReLU相比&#xff0c;DY-ReLU的额外计算成本可以忽略不计&#xff0c;但表示能力明显增强&…

项目(补充2):智慧教室

一。emWin环境的搭建 1.codeBlock下载 开源免费。 2.使用stm的Cubemx提供的作图软件 &#xff08;1&#xff09;在C盘下找到第三方的固件库&#xff0c;旁边有个ST文件夹 注意&#xff1a;我在下载cubemx为默认的路径 &#xff08;2&#xff09;STemWin中的Soft提供了绘图…

JavaScript:反转数组的四种方法

1.使用For循环反转数组&#xff1a; 我们将为这种方法使用递减循环&#xff0c;以迭代给定数组的每个元素。 数组的最后一个元素将是循环的起点(arr.length — 1) &#xff0c;它将一直运行直到到达数组的起点(i ≥ 0) var arr [1, 2, 3, 4, 5, 6, 7, 8, 9];function reverse…

一文1800字从0到1使用Python Flask实战构建Web应用

Python Flask是一个轻量级的Web框架&#xff0c;它简单易用、灵活性高&#xff0c;适用于构建各种规模的Web应用。本文将介绍如何使用Python Flask框架来实战构建一个简单的Web应用&#xff0c;并展示其基本功能和特性。 第一部分&#xff1a;搭建开发环境 在开始之前我们需要…