《微信小程序开发图解案例教程》教学教案12记账本微信小程序云开发.docx
《《微信小程序开发图解案例教程》教学教案12记账本微信小程序云开发.docx》由会员分享，可在线阅读，更多相关《《微信小程序开发图解案例教程》教学教案12记账本微信小程序云开发.docx（64页珍藏版）》请在冰点文库上搜索。
《微信小程序开发图解案例教程》教学教案12记账本微信小程序云开发
第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:
newDate（）
}
}）;
//分页查询数据
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
string
主键id，使用系统自动生成的ID，账户id
_openid
string
微信用户身份的唯一标识
balance
string
账户金额
icon
string
账户图标
name
string
账户名称
remark
string
账户备注
typeId
string
账户类别：
0现金，1支付宝，2微信
createTime
string
创建时间
updateTime
string
修改时间
（4）在云开发控制台上新建集合accountDetail账户明细，字段属性如表所示。
accountDetail账户明细集合
字段
类型
说明
_id
string
主键id，使用系统自动生成的ID，账户明细id
_openid
string
微信用户身份的唯一标识
accountId
string
账户id
balance
string
交易金额
totalBalance
number
账户余额
tradeDate
string
交易日期
remark
string
账户明细备注
type
string
账户明细列表：
0收入，1支出
createTime
string
创建时间
updateTime
string
修改时间
（5）在云开发控制台上新建集合accountBook账本，字段属性如表所示。
accountBook账本集合
字段
类型
说明
_id
string
主键id，使用系统自动生成的ID，账户明细id
_openid
string
微信用户身份的唯一标识
name
string
账本名称
icon
string
账本图标
typeId
string
类型id：
0日常、1生意、2家庭、3旅行、4装修、5结婚、6校园、7班费
typeName
string
类型名称
createTime
string
创建时间
updateTime
string
修改时间
8.5设计流程
8.5.1账户列表
账户列表页面显示已经创建的账户列表，账户类型分为微信、现金、支付宝，在每个账户里可以记录每一笔的收入和支出，同时显示所有账户的总金额，如图所示。
账户
（1）创建cashbook记账本项目，使用云开发方式，在app.json文件配置账户、账本底部标签导航，配置账户"pages/account/account"、账本"pages/accountBook/accountBook"页面路径，代码如下所示。
{
"pages":
[
"pages/account/account",
"pages/accountBook/accountBook"
],
"window":
{
"backgroundColor":
"#F6F6F6",
"backgroundTextStyle":
"light",
"navigationBarBackgroundColor":
"#ffffff",
"navigationBarTitleText":
"记账本",
"navigationBarTextStyle":
"black"
},
"tabBar":
{
"selectedColor":
"#FFD700",
"backgroundColor":
"#ffffff",
"borderStyle":
"black",
"color":
"#999999",
"list":
[
{
"pagePath":
"pages/account/account",
"text":
"账户",
"iconPath":
"/images/bar/account-0.jpg",
"selectedIconPath":
"/images/bar/account-1.jpg"
},
{
"pagePath":
"pages/accountBook/accountBook",
"text":
"账本",
"iconPath":
"/images/bar/book-0.jpg",
"selectedIconPath":
"/images/bar/book-1.jpg"
}
]
},
"sitemapLocation":
"sitemap.json",
"style":
"v2"
}
（2）在pages/account/account.json文件里配置账户导航标题，代码如下所示。
{
"navigationBarTitleText":
"账户"
}
（3）在pages/account/account.wxml文件里进行账户列表布局设计，代码如下所示。
净资产
{{total}}
负债：
0
总资产：
{{total}}
我的账户（{{count}}）
for="{{accounts}}"wx:
key="item">
30px;height:
30px;">
{{item.name}}
{{item.remark}}
{{item.balance}}
添加账户
（4）在pages/account/account.wxss文件里进行账户列表样式渲染，代码如下所示。
.stat{
background-color:
#fff;
padding:
10px;
}
.line{
height:
1px;
width:
100%;
background-color:
#666;
opacity:
0.2;
}
.count{
font-size:
25px;
}
.total{
font-size:
12px;
color:
#B5B5B5;
}
.totaltext{
margin-right:
10px;
}
.title{
padding-top:
10px;
padding-left:
10px;
font-size:
10px;
color:
#B5B5B5;
}
.items{
padding:
10px;
}
.item{
display:
flex;
flex-direction:
row;
justify-content:
space-between;
background-color:
#ffffff;
padding:
5px;
border-radius:
5px;
align-items:
center;
margin-bottom:
10px;
}
.before{
display:
flex;
flex-direction:
row;
align-items:
center;
margin-left:
10px;
}
.beforeimage{
margin-right:
10px;
}
.after{
margin-right:
10px;
}
.desc{
font-size:
10px;
color:
#B5B5B5;
}
.add{
margin:
10px;
background-color:
#ffffff;
border-radius:
5px;
font-size:
13px;
color:
#FFD700;
padding:
12px;
text-align:
center;
display:
flex;
justify-content:
center;
align-items:
center;
margin-top:
0px;
}
.addimage{
margin-right:
10px;
}
（5）在pages/account/account.js文件里添加账户跳转、查看账户明细跳转、获取openid、根据openid来加载账户信息，代码如下所示。
varapp=getApp（）;
//初始化云开发
wx.cloud.init（{
env:
'test'
}）;
//初始化数据库
constdb=wx.cloud.database（）;
Page（{
data:
{
openid:
null,
accounts:
[],
count:
0,
total:
0
},
onShow:
function（）{
this.getOpenid（）;
},
add:
function（）{//添加账户跳转
wx.navigateTo（{
url:
'../createAccount/createAccount',
}）
},
seeDetail:
function（e）{//查看账户明细跳转，传递账户id、余额参数
varid=e.target.dataset.id;
varbalance=e.target.dataset.balance;
wx.navigateTo（{
url:
'../accountDetail/accountDetail?
id='+id+'&balance='+balance,
}）
},
loadAccount:
function（openid）{//根据openid来加载账户信息
varthat=this;
db.collection（'account'）.where（{
_openid:
openid//填入当前用户openid
}）.orderBy（'createTime','desc'）.get（）.then（res=>{
console.log（"获取账户信息="+res）;
varaccounts=res.data;
vartotal=0;
for（vari=0;itotal+=parseFloat（accounts[i].balance）;
}
that.setData（{
accounts:
accounts,
count:
accounts.length,
total:
total
}）;
}）;
},
getOpenid:
function（）{//获取openid
varthat=this;
//调用云函数
wx.cloud.callFunction（{
name:
'login',
data:
{},
success:
res=>{
console.log（'[云函数][login]useropenid:
',res.result.openid）
constopenid=res.result.openid
this.setData（{
"openid":
openid
}）;
that.loadAccount（openid）;
},
fail:
err=>{
console.error（'[云函数][login]调用失败',err）
}
}）
}
}）
（6）在cloudfunctions/login创建登录函数，在login.js获取WXContext（微信调用上下文），包括OPENID、APPID、及UNIONID（需满足UNIONID获取条件）等信息，代码如下所示。
//云函数模板
//部署：
在cloud-functions/login文件夹右击选择“上传并部署”
constcloud=require（'wx-server-sdk'）
//初始化cloud
cloud.init（{
//API调用都保持和云函数当前所在环境一致
env:
cloud.DYNAMIC_CURRENT_ENV
}）
/**
*这个示例将经自动鉴权过的小程序用户openid返回给小程序端
*
*event参数包含小程序端调用传入的data
*
*/
exports.main=（event,context）=>{
console.log（event）
console.log（context）
//可执行其他自定义逻辑
//console.log的内容可以在云开发云函数调用日志查看
//获取WXContext（微信调用上下文），包括OPENID、APPID、及UNIONID（需满足UNIONID获取条件）等信息
constwxContext=cloud.getWXContext（）
return{
event,
openid:
wxContext.OPENID,
appid:
wxContext.APPID,
unionid:
wxContext.UNIONID,
env:
wxContext.ENV,
}
}
这样就完成账户列表的设计，同时可以看到在获取openid的时候，通过在wx.cloud.callFunction来调用登录的云函数，而登录的云函数是放在cloudfouctions目录下，而根据openid来加载loadAccount方法里是直接调用云函数，可以看到使用云函数有两种方式来使用。
8.5.2创建账户
账户可以通过动态的方式来进行添加，单击添加账户链接，可以跳转到创建账户页面，可以创建现金、支付宝、微信三种类型的账户，如图所示。
创建账户
（1）在app.json文件里配置"pages/createAccount/createAccount"创建账户页面路径。
（2）在pages/createAccount/createAccount.json文件里配置创建账户导航标题，代码如下所示。
{
"navigationBarTitleText":
"创建账户"
}
（3）在pages/createAccount/createAccount.wxml文件里进行创建账户页面布局设计，代码如下所示。
账户类型
现金
支付宝
微信
账户名称
升级会员 