微信小程序开发图解案例教程电子教案 第9章 综合案例：“记账本微信”小程序云开发

PAGE2PAGE第9章综合案例：云开发记账本微信小程序课程名称微信小程序开发图解案例教程项目名称综合案例：云开发记账本微信小程序任务名称综合案例：云开发记账本微信小程序课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．了解云开发项目的开发过程。2．掌握云函数的使用方法。3．掌握云开发数据库的使用方法。4．掌握小程序组件、WXSS样式语言的使用方法。能力目标1．能够独立完成云开发项目的设计工作。2．能够使用云开发完成项目的开发工作。素质目标1．培养创新工作模式的能力。2．培养敏锐的洞察力和观察力。教学内容1.任务描述本章将通过开发一个完整的记账本微信小程序，帮助学生掌握云开发模式下的项目开发流程，包括云函数的创建与调用、云开发数据库的增删改查及分页查询、组件布局与WXSS样式渲染等核心技能，综合运用云开发各项能力完成实际项目开发。2.任务展示与实现（1）演示记账本微信小程序的完整云开发流程，包括账户列表显示、创建新账户、账户明细查看、记一笔账户明细、分页显示账本列表、创建新账本。（2）学生动手操作：独立完成记账本微信小程序的核心功能开发。3.教师讲解本任务涉及的知识点（1）云开发项目的创建与环境配置。（2）云函数的创建、部署与调用（login、saveAccount、loadAccountDetail、saveAccountDetail、loadAccount、updateAccount、loadBook、saveBook等）。（3）云开发数据库的集合设计与数据操作（account、accountDetail、accountBook三个集合的查询、新增、修改、分页查询）。（4）组件在云开发项目中的综合运用（view、image、icon、form、radio、radio-group、picker等）。（5）WXSS样式在云开发项目中的应用（flex布局、列表样式、表单样式等）。（6）页面交互设计（wx.showToast提示、wx.navigateBack返回、下拉刷新）。4.任务小结总结云开发记账本微信小程序的完整开发流程，回顾云函数的创建与调用、数据库的增删改查与分页查询、组件与样式的综合运用，强调云开发模式在降低后端开发门槛、提高开发效率方面的重要作用。教学重点1.云函数的创建、部署与wx.cloud.callFunction调用流程。2.云开发数据库的查询、新增、修改及分页查询操作。3.账户与账本两大功能模块的完整开发流程。教学难点理解云开发数据库的分页查询实现机制（通过skip和limit组合实现分页，结合concat拼接数据实现下拉加载更多），以及记账操作中账户余额的联动更新逻辑（记录交易明细后同步更新账户余额）。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述云开发记账本微信小程序中用到的云函数及其各自功能。2.简述云开发数据库分页查询的实现方法，说明skip和limit参数的作用。3.拓展练习：在记账本微信小程序的基础上，为账户明细列表添加按日期范围筛选的功能，通过云函数实现条件查询。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章是第三个综合案例章节，将采用云开发模式开发一个完整的记账本微信小程序。云开发让开发者无须搭建服务器即可使用云端能力，大大降低了后端开发的学习成本。通过本章的学习，学生将掌握云函数、云开发数据库等核心技术的综合运用方法。【目的】使学生明确本章的学习目标，理解云开发项目的完整开发流程，掌握云函数的创建与调用、数据库的增删改查与分页查询、组件与样式的综合运用，能够独立使用云开发模式完成微信小程序的全栈开发。一、项目需求与数据库设计介绍记账本微信小程序的主要功能需求：显示账户列表（包括账户总金额和不同账户信息）、创建新账户（选择现金、支付宝、微信三种类型）、显示账户明细（列出每笔收入和支出）、记一笔账户明细（记录交易类型、日期、金额、备注）、分页显示账本列表（通过skip和limit实现动态加载）、创建新账本（选择日常、生意、家庭、旅行、装修、结婚、校园、班费等类型）。讲解云开发数据库的三个集合设计：account集合（字段包括_id、_openid、balance余额、icon图标、name名称、remark备注、typeId类型ID、createTime、updateTime），accountDetail集合（字段包括_id、_openid、accountId账户ID、balance交易金额、totalBalance账户余额、tradeDate交易日期、remark备注、type类型——0收入1支出、createTime、updateTime），accountBook集合（字段包括_id、_openid、name名称、icon图标、typeId类型ID、typeName类型名称、createTime、updateTime）。所有集合均使用_openid字段关联用户身份，确保每个用户只能操作自己的数据。二、账户列表与创建账户功能设计讲解账户列表的实现方法：在app.json中配置底部标签导航（账户和账本两个页面），在account.wxml中设计净资产展示区域（总资产和负债统计）、我的账户列表区域（通过wx:for循环渲染，每项显示图标、名称、备注和余额，绑定seeDetail事件跳转明细页）和添加账户入口（绑定add事件），在account.wxss中使用flex布局设置列表项水平排列（左侧图标与文字、右侧余额），在account.js中通过调用login云函数获取用户openid（使用wx.cloud.callFunction调用），根据openid调用db.collection('account').where查询账户列表并按创建时间降序排列，遍历计算总资产金额。讲解创建账户功能的实现：在createAccount.wxml中使用form组件设计表单（账户类型使用radio-group提供现金、支付宝、微信三个单选按钮，账户名称输入框限制10字以内，余额输入框，备注输入框选填），在createAccount.wxss中设置表单项水平排列样式和创建按钮黄色圆角样式，在createAccount.js中通过formSubmit事件获取表单数据并调用saveAccount云函数，云函数中使用db.collection('account').add方法新增记录（包含typeId、name、icon、balance、remark及自动生成的createTime、updateTime和_openid），创建成功后使用wx.showToast提示并调用wx.navigateBack返回上一页面。三、账户明细列表与记一笔功能设计讲解账户明细列表的实现方法：从账户列表页面通过seeDetail事件传递账户ID和余额参数跳转到accountDetail页面，在accountDetail.wxml中显示账户余额、账户明细标题和明细列表（每项通过wx:for循环渲染，显示交易日期、收入或支出类型及金额、余额，根据type字段判断使用trade_in蓝色或trade_out黄色样式），页面底部固定“记一笔”入口区域，在accountDetail.js的onLoad中接收参数并调用loadAccountDetail云函数，云函数根据accountId查询accountDetail集合并按创建时间降序排列。讲解记一笔功能的实现：从账户明细页面点击“记一笔”跳转到writeOne页面并传递accountId参数，在writeOne.wxml中使用form组件设计表单（交易类型使用radio-group提供收入支出单选按钮，交易日期使用picker的multiSelector多列选择器实现年月日时分选择，交易金额输入框，备注输入框选填），在writeOne.js中初始化日期选择器（通过dateTimePicker工具函数生成年份、月份、日期、小时、分钟数组），在formSubmit事件中根据交易类型计算操作后的余额（收入则余额增加、支出则余额减少），调用saveAccountDetail云函数保存交易明细（包含type、balance、remark、accountId、tradeDate、totalBalance），保存成功后调用updateAccount云函数更新账户余额（使用db.collection('account').doc(accountId).update方法），更新成功后提示成功并返回上一页面。整个记账流程涉及两个云函数的连续调用和两个集合的联动更新，体现了云开发数据库操作的核心业务逻辑。四、分页显示账本列表与创建账本功能设计讲解分页显示账本列表的实现方法：在accountBook.json中配置enablePullDownRefresh为true开启下拉刷新，在accountBook.wxml中使用wx:for循环渲染账本列表（每项显示账本图标、类型名称、账本名称），底部提供“创建记账本”入口，在accountBook.js中定义pageIndex分页开始序号和pageSize每页显示数量，在loadBook函数中调用loadBook云函数并传入pageIndex和pageSize参数，云函数中使用db.collection('accountBook').where({_openid})、.skip(pageIndex)、.limit(pageSize)、.orderBy('createTime','desc')、.get()实现分页查询，返回数据后通过books.concat(result)拼接数据并更新pageIndex，在onPullDownRefresh中调用loadBook实现下拉刷新加载。讲解创建账本功能的实现：在createBook.wxml中使用form组件设计表单（账本类型使用radio-group循环渲染types数组提供日常、生意、家庭、旅行、装修、结婚、校园、班费8种类型，账本名称输入框），在createBook.js中定义types数组（每种类型包含id、icon图标路径、typeName名称），在formSubmit事件中根据选中的类型ID获取对应类型对象并调用saveBook云函数，云函数中使用db.collection('accountBook').add方法新增记录（包含typeId、typeName、name、icon及自动生成的createTime、updateTime和_openid），创建成功后返回账本列表页面。【任务一】搭建云开发环境与账户模块1.教师演示：创建cashbook云开发项目，在云开发控制台创建account、accountDetail、accountBook三个集合并设计字段，创建login云函数获取用户openid，配置底部标签导航（账户和账本两个页面），实现账户列表页面（调用云函数获取数据并渲染），实现创建账户页面（表单设计、云函数调用保存数据）。2.学生动手：独立完成云开发环境搭建、集合创建、云函数编写与部署、账户列表和创建账户页面的完整开发，测试账户创建功能是否能成功保存数据并刷新列表。【任务二】开发账户明细与账本模块1.教师指导：带领学生实现账户明细列表页面（传递参数获取数据、根据类型显示不同颜色），实现记一笔功能（日期选择器配置、余额联动更新逻辑、两个云函数连续调用），实现分页显示账本列表（skip和limit分页查询、concat拼接数据、下拉刷新），实现创建账本功能（radio-group循环渲染类型、云函数保存数据）。2.学生动手：独立完成账户明细、记一笔、账本列表和创建账本页面的完整开发，在模拟器中测试记账后余额是否正确更新、分页加载是否正常、下拉刷新是否生效，使用“预览”功能在手机上体验实际效果。【课堂总结】1.回顾记账本微信小程序的完整功能模块：账户模块（账户列表显示总资产、创建账户支持三种类型、账户明细查看每笔收支、记一笔联动更新余额），账本模块（分页显示账本列表支持下拉加载更多、创建账本支持八种类型）。2.总结云开发项目中使用到的8个云函数及其职责：login（获取openid）、saveAccount（保存账户）、loadAccountDetail（加载账户明细）、saveAccountDetail（保存交易明细）、loadAccount（加载账户信息）、updateAccount（更新账户余额）、loadBook（分页加载账本）、saveBook（保存账本）。3.梳理云开发数据库的核心操作：查询（where条件查询+orderBy排序）、新增（add方法+自动注入_openid）、修改（doc(id).update方法更新指定字段）、分页查询（skip+limit组合+concat拼接实现下拉加载更