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

这篇具有很好参考价值的文章主要介绍了微信小程序开发教学系列(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/搜索下载需要的图片。
微信小程序开发教学系列(12)- 实战项目案例,微信小程序教学系列专栏,微信小程序,小程序
这里我复制其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": "任务详情"
}

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

小结

通过这个实战项目案例,我们学习了如何搭建一个简单的任务清单小程序,并实现了添加、编辑、删除和查看任务的功能。同时,我们还学习了如何设计页面结构和布局,如何进行数据的绑定和事件的处理。文章来源地址https://www.toymoban.com/news/detail-678736.html

到了这里,关于微信小程序开发教学系列(12)- 实战项目案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发15 项目实战 基于云开发开发一个在线商城小程序

    在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识。在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识和能力。而第 4 个模块里,我带你认识了微信小程序的云

    2024年02月11日
    浏览(50)
  • 【微信小程序开发】宠物预约医疗项目实战-环境配置与Vant UI集成

    第一章 宠物预约医疗项目实战-环境配置与Vant UI集成 Vant是一个轻量、可靠的移动端组件库,于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 微信小程序版本的Vant组件库是Vant Weapp,其官方文档是

    2024年02月07日
    浏览(47)
  • 抖音小程序开发教学系列(4)- 抖音小程序组件开发

    在本章中,我们将深入探讨抖音小程序的组件开发。组件是抖音小程序中的基本构建块,它们负责展示数据和与用户交互。了解组件的开发方法和使用技巧是进行抖音小程序开发的重要一步。 抖音小程序提供了许多常用的基本组件,它们分别具有不同的功能和用途。在我们的

    2024年02月09日
    浏览(51)
  • uniapp和springboot微信小程序开发实战:前端架构搭建之HBuilder X创建项目以及目录介绍

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开

    2024年02月09日
    浏览(52)
  • 微信小程序开发系列(六)·小程序配置文件详细介绍·项目配置文件和配置Sass以及sitemap.json文件

    微信小程序开发_时光の尘的博客-CSDN博客 目录 1.  项目配置文件和配置Sass 2.  sitemap.json文件         在创建项目的时候,每个项目的根目录生成两个config.json文件,用于保存开发者在工具上做的个性化配置,例如和编译有关的配置。         当重新安装微信开发者工

    2024年03月12日
    浏览(45)
  • uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具的配置

    ✨ 原创不易,还希望各位大佬支持一下! 👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 打开uniapp的开发工具(HBuilder X),点击左上角的文件》新建》项目 选择左侧栏的uniapp(一般默认打开就是),然

    2024年02月09日
    浏览(40)
  • 微信小程序开发 案例二 调查问卷

    第一步:主界面代码 **第二步:css样式修改 第三步:安装环境 先安装node.js node.js官网 进入官网安装稳定版本 安装完毕后在同一级创建一个空文件夹 最好都用英文文件夹名 打开新文件夹 打开命令提示符cmd 地址找到新建的文件夹 输入 npm init -y 再输入 npm install express --save 用

    2024年02月09日
    浏览(45)
  • 小程序开发实战案例之二|如何实现小程序支付

    上一章讲完如何获取用户信息授权  后,下一步就可以进行小程序支付了。 本期就来介绍下支付宝小程序支付如何实现。   PS:接入前的准备工作可以参考: 接入准备 ;接入指南可参考: 接入指南 ~   获取权限分为三步:分别是 账号开通 JSAPI 支付 、 账号与小程序账号绑

    2024年02月05日
    浏览(43)
  • 小程序开发实战案例四 | 小程序标题栏如何设置

    上一期我们了解了 小程序底部导航栏 的实现效果,今天一起来了解下如何设置小程序标题栏~   小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块,其中能够调整的部分只有标题和背景色。 另外 IDE上无法展示收藏按钮 ,如果测试收藏按钮的相关功能 需要使用

    2024年02月05日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包