没有合适的资源?快使用搜索试试~ 我知道了~
《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉

《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.pdf
资源推荐
资源详情
资源评论

















第8章 综合案例:记账本微信小程序云开发
课程名称
任务名称
项目性质
授课班级
微信小程序开发图解案例
教程
记账本微信小程序云开发
□演示性
项目名称
课时
□综合性
记账本微信小程序云开发
6
□验证性 √设计性
授课日期 授课地点
(1)学会利用微信小程序来完成界面布局以及给界面添加相关的布局样式
(2)学会使用页面刷新功能,通过配置"enablePullDownRefresh": true属性
教学目标
(3)学会使用wx.showToast微信小程序API接口来进行界面交互设计
(4)学会使用wx.navigateBack微信小程序API接口来进行返回指定页面
(5)重点掌握云开发来进行数据的新增、修改、查询以及分页查询功能
(1)账户列表
(2)创建账户
(3)账户明细列表
(4)记一笔账户明细
(5)分页获取账本列表
(6)创建记账本
教学内容
教学重点
教学难点
账户列表、创建账户、账户明细列表、记一笔账户明细、分页获取账本列表、创建记账本
采用云开发的模式制作账本微信小程序
装有微信小程序的开发工具的电脑
教学准备
教学课件PPT
教材:《微信小程序开发图解案例教程(附精讲视频)(第3版)》
作业设计

教学过程
教学环节
教学内容与过程
(教学内容、教学方法、组织形式、教学手段)
做好上课前的各项准备工作(打开电脑、打开课件、打开软件、打开U 盘中的素材位置、打开授
课计划、教案等),吸引学生注意力。
【课前说明】
回顾
view视图容器组件、image图片组件、icon图标组件、form表单组件、radio单项选择器组件等组
件 , flex 弹 性 布 局 设 计 , 云 开 发 的 数 据 查 询 、 数 据 更 新 、 数 据 分 页 、 数 据 新 增 功 能 ,
enablePullDownRefresh": true属性、wx.showToast、wx.navigateBack等API接口相关知识点,了解
记账本微信小程序的功能与结构。
【目的】
使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。
课前组织
课程说明
8.1 需求描述
记账本微信小程序需要完成以下主要功能。
(1)完成账户列表设计,包括账户总余额和不同账户信息;完成创建新账户功能;完成账户明
细列表设计;完成记一笔账户明细功能,如图所示。
课程内容
描述
账户列表 创建新账户

账户明细 记一笔
(2)完成分页获取账本列表功能,动态加载账本数据,同时完成账本创建功能,选择账本类别
和输入账本名称就可以创建一个新的账本,如图所示。
账本列表 创建账本
8.2 设计思路
(1)设计底部标签导航,准备好底部标签导航的图标,并建立2 个相应的页面;设置默认时图
片和选中时图片,标签名称采用两种颜色,红色为选中颜色,灰色为默认颜色;
(2)设计账户列表页面,先进行页面布局设计,账户列表通过云函数来获取账户列表信息,在
使用云函数调用的时候,有两种方式来调用云函数,一种是在页面js 的业务逻辑处理文件里使用
wx.cloud.callFunction 来调用登录的云函数,另一种是在页面 js 的业务逻辑处理文件里直接使用
云函数;

(3)设计创建账户功能,选择账户类型、填写账户名称、金额、备注就可以创建一个新的账
户;
(4)设计账户明细列表功能,需要传递账户 id 参数来获取账户明细列表;
(5)设计记一笔账户明细功能,每一个账户可以记录每一笔的收入和支出情况,通过记一笔功
能,来记录账户收入支出情况;
(6)分页获取账本列表,通过云函数的 skip 和 limit 来进行动态的获取账本列表数据;
(7)创建记账本功能,选择账本类别和输入账本名称来创建新账本。
8.3 相关知识点
(1)在界面布局的时候,会用到微信小程序的组件,包括view 视图容器组件、image 图片组
件、icon 图标组件、form 表单组件、radio 单项选择器组件等组件的使用。
(2)界面样式设计,需要写一些 wxss 样式进行界面的美化和渲染,经常会用到 flex 弹性布局
设计,来更好的进行页面布局设计。
(3)需要使用云开发的数据查询、数据更新、数据分页、数据新增功能。
//查询数据
db.collection('account').where({
_id: accountId // 填入账户 id
}).get()
//新增数据
db.collection('account').add({
data: {
xxx: event.xx
_openid: wxContext.OPENID
}
});
//修改数据
db.collection('account').doc(accountId).update({
data: {
balance: totalBalance,
updateTime: new Date()
}
});
//分页查询数据
db.collection('accountBook').where({
_openid: wxContext.OPENID // 填入当前用户 openid
}).skip(pageIndex).limit(pageSize).orderBy('createTime', 'desc').get();
(4)页面刷新功能,通过配置"enablePullDownRefresh": true 属性。
(5)使用 wx.showToast 微信小程序 API 接口来进行界面交互设计。
(6)使用 wx.navigateBack 微信小程序 API 接口来进行返回指定页面。

8.4 准备工作
(1)我们需要准备一个 AppID,用来创建项目。
(2)底部标签导航,需要有选中图标和默认图标,放置在images/bar 文件夹下。
(3)在云开发控制台上新建集合 account 账户,字段属性如表所示。
account 账户集合
字段
_id
_openid
balance
icon
name
remark
typeId
createTime
updateTime
类型
string
string
string
string
string
string
string
string
string
说明
主键 id,使用系统自动生成的 ID,账户 id
微信用户身份的唯一标识
账户金额
账户图标
账户名称
账户备注
账户类别:0 现金,1 支付宝,2 微信
创建时间
修改时间
(4)在云开发控制台上新建集合 accountDetail 账户明细,字段属性如表所示。
accountDetail 账户明细集合
字段
_id
_openid
accountId
balance
类型
string
string
string
string
说明
主键 id,使用系统自动生成的 ID,账户明细 id
微信用户身份的唯一标识
账户 id
交易金额
账户余额
交易日期
账户明细备注
账户明细列表:0 收入,1 支出
创建时间
修改时间
totalBalance number
tradeDate
remark
type
createTime
updateTime
string
string
string
string
string
剩余36页未读,继续阅读
资源评论

- guigu20122022-11-30发现一个宝藏资源,赶紧冲冲冲!支持大佬~
是原来的你吗
- 粉丝: 3232
- 资源: 2万+

上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助

会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制
