没有合适的资源?快使用搜索试试~ 我知道了~
《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
54 浏览量
2022-07-05
22:41:31
上传
评论 1
收藏 518KB DOCX 举报
《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx《微信小程序开发图解案例教程》教学教案—12记账本微信小程序云开发.docx
资源推荐
资源详情
资源评论





















第8章 综合案例:记账本微信小程序云开发
微信小程序开发图解案例
教程
记账本微信小程序云开发
6
记账本微信小程序云开发
□演示性
□验证性
√设计性
□综合性
(5)重点掌握云开发来进行数据的新增、修改、查询以及分页查询功能
(1)账户列表
(2)创建账户
账户列表、创建账户、账户明细列表、记一笔账户明细、分页获取账本列表、创建记账本
采用云开发的模式制作账本微信小程序
装有微信小程序的开发工具的电脑
教学课件PPT

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

账户明细
记一笔
(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').add({
data: {
xxx: event.xx
_openid: wxContext.OPENID
}
});
//修改数据
db.collection('account').doc(accountId).update({
data: {
balance: totalBalance,
updateTime: new Date()
}
});
//分页查询数据
db.collection('accountBook').where({
(5)使用 wx.showToast 微信小程序 API 接口来进行界面交互设计。
(6)使用 wx.navigateBack 微信小程序 API 接口来进行返回指定页面。

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

竖子敢尔
- 粉丝: 3968
- 资源: 2477

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

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