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

第9章“记账本微信”小程序云开发综合案例：记账本微信小程序采用云开发模式开发。其功能包括显示账户列表、创建新账户、显示账户明细、记一笔账户明细，以及分页显示账本列表和创建新账本。本章导读Thechapter’sintroduction目录导航9.1需求描述9.3相关知识点9.2设计思路9.4准备工作9.6小结9.5设计流程9.1需求描述记账本微信小程序需要完成以下主要功能。1显示账户列表功能，包括显示账户总金额和不同账户信息；创建新账户功能；显示账户明细列表功能；记一笔账户明细功能，相应页面如图所示。“账户”页面“账户明细”页面“记一笔”页面“创建账户”页面9.1需求描述2分页显示账本列表功能，可动态加载账本数据；创建新账本功能，选择账本类型并输入账本名称就可以创建一个新的账本，相应页面如图所示。“记账本”页面“创建账本”页面目录导航9.1需求描述9.3相关知识点9.2设计思路9.4准备工作9.6小结9.5设计流程9.2设计思路

设计底部标签导航。准备好底部标签导航的图标，并建立两个相应的页面；设置标签导航默认图标和选中时的图标，标签导航名称采用两种颜色，黄色为标签导航选中时的颜色，灰色为默认颜色。01设计“账户”页面。先进行页面布局设计，然后通过云函数获取账户列表信息。有两种方式来调用云函数：一种是在页面JavaScript的业务逻辑处理文件里使用wx.cloud.callFunction来调用登录的云函数；另一种是在页面JavaScript的业务逻辑处理文件里直接使用云函数。02设计创建新账户功能。选择账户类型，填写账户名称、余额、备注后，点击“创建”按钮就可以创建一个新的账户。03设计显示账户明细功能。这需要传递账户ID参数来获取账户明细列表。04设计记一笔账户明细功能。每一个账户都可以记录每一笔的收入和支出情况。05设计分页显示账本列表功能。通过云函数的skip和limit来实现动态获取账本列表数据。06设计创建新账本功能。选择账本类型和输入账本名称后，点击“创建”按钮即可创建新账本。07目录导航9.1需求描述9.3相关知识点9.2设计思路9.4准备工作9.6小结9.5设计流程9.3相关知识点需要使用云开发的数据查询、数据更新、数据分页、数据新增功能。页面刷新功能可通过配置"enablePullDownRefresh":true属性来实现。使用wx.showToast微信小程序API来进行页面交互设计。使用wx.navigateBack微信小程序API来实现返回指定页面。页面样式设计。需要使用WXSS样式进行页面的美化和渲染。这时经常会用到flex弹性布局，从而更好地进行页面布局设计。01在进行页面布局的时候，会用到微信小程序的组件，包括view组件、image组件、icon组件、form组件、radio组件等。02030405069.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();目录导航9.1需求描述9.3相关知识点9.2设计思路9.4准备工作9.6小结9.5设计流程9.4准备工作需要准备一个AppID，用来创建项目。准备制作底部标签导航所需的图标，包括标签导航选中时的图标和默认图标，并放置在images/bar文件夹中。在云开发控制台上新建集合“account”（账户），字段属性如表所示。属性类型说明_idstring主键ID，使用系统自动生成的ID，账户ID_openidstring微信用户身份的唯一标识balancestring账户金额iconstring账户图标namestring账户名称remarkstring账户备注typeIdstring账户类别：0现金，1支付宝，2微信createTimestring创建时间updateTimestring修改时间9.4准备工作在云开发控制台上新建集合“accountDetail”（账户明细），字段属性如表所示。属性类型说明_idstring主键ID，使用系统自动生成的ID，账户明细id_openidstring微信用户身份的唯一标识accountIdstring账户IDbalancestring交易金额totalBalancenumber账户余额tradeDatestring交易日期remarkstring账户明细备注typestring账户明细列表：0收入，1支出createTimestring创建时间updateTimestring修改时间9.4准备工作在云开发控制台上新建集合“accountBook”（账本），字段属性如表所示。属性类型说明_idstring主键ID，使用系统自动生成的ID，账户明细ID_openidstring微信用户身份的唯一标识namestring账本名称iconstring账本图标typeIdstring账本类型ID：0日常，1生意，2家庭，3旅行，4装修，5结婚，6校园，7班费typeNamestring账本类型名称createTimestring创建时间updateTimestring修改时间目录导航9.1需求描述9.3相关知识点9.6小结9.2设计思路9.5设计流程9.4准备工作9.5.1账户列表“账户”页面中显示已经创建的账户列表。账户类型分为微信、现金、支付宝。在每个账户里都可以记录收入和支出，同时显示所有账户的总金额。“账户”页面效果如图所示。“账户”页面效果9.5.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"}9.5.1账户列表在pages/account/account.json文件里配置账户导航标题。代码如下。{"navigationBarTitleText":"账户"}在pages/account/account.wxml文件里进行“账户”页面布局设计。代码如下。<viewclass="content"><viewclass="line"></view><viewclass="stat"><view>净资产</view><viewclass="count">{{total}}</view><viewclass="total"><text>负债：0</text><text>总资产：{{total}}</text></view></view><viewclass="title">我的账户({{count}})</view><viewclass="items"><blockwx:for="{{accounts}}"wx:key="item"><viewclass="item"bindtap="seeDetail"data-id="{{item._id}}"data-balance="{{item.balance}}"><viewclass="before"><view><imagesrc="{{item.icon}}"style="width:30px;height:30px;"></image></view> <view><viewclass="name">{{}}</view>9.5.1账户列表<viewclass="desc">{{item.remark}}</view></view></view><viewclass="after">{{item.balance}}</view></view></block></view><viewclass="add"bindtap="add"><imagesrc="/images/account/add.jpg"style="width:15px;height:15px;"></image>添加账户</view></view>在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;}9.5.1账户列表.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;}在pages/account/account.js文件里添加账户跳转、查看账户明细跳转、获取openid功能，实现根据openid来加载账户信息功能。代码如下。varapp=getApp();//初始化云开发wx.cloud.init({env:'test'});//初始化数据库constdb=wx.cloud.database();9.5.1账户列表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=>{9.5.1账户列表console.log("获取账户信息="+res);varaccounts=res.data;vartotal=0;for(vari=0;i<accounts.length;i++){total+=parseFloat(accounts[i].balance);}that.setData({accounts:accounts,count:accounts.length,total:total});});},getOpenid:function(){ //获取openidvarthat=this;wx.cloud.callFunction({ //调用云函数name:'login',data:{},success:res=>{console.log('[云函数][login]useropenid:',res.result.openid)constopenid=res.result.openidthis.setData({"openid":openid});that.loadAccount(openid);},fail:err=>{console.error('[云函数][login]调用失败',err)}})}})9.5.1账户列表在cloudfunctions/login创建登录函数。在index.js文件中获取WXContext（微信调用上下文），包括openid、appid及unionid（unionid获取：小程序与开放平台账号下应用绑定，且用户已授权）等信息。//云函数模板//部署：在cloudfunctions/login文件夹上单击鼠标右键，选择“上传并部署”constcloud=require('wx-server-sdk')//初始化云函数cloud.init({//云函数环境IDenv:cloud.DYNAMIC_CURRENT_ENV})/***这个示例将经过自动鉴权的小程序用户openid返回给小程序**event参数包含小程序调用传入的data**/exports.main=(event,context)=>{console.log(event)console.log(context)//可执行其他自定义逻辑//console.log的内容可以在云开发的云函数调用日志中查看//获取WXContext，包括openid、appid及unionid等信息constwxContext=cloud.getWXContext()return{event,openid:wxContext.OPENID,appid:wxContext.APPID,unionid:wxContext.UNIONID,env:wxContext.ENV,}}9.5.2创建账户账户可以通过动态的方式来进行添加，点击“添加账户”链接，可以跳转到“创建账户”页面，创建现金、支付宝、微信3种类型的账户，如图所示。“创建账户”页面效果9.5.2创建账户在app.json文件里配置“创建账户”页面路径（pages/createAccount/createAccount）。在pages/createAccount/createAccount.json文件里配置“创建账户”导航标题。代码如下。在pages/createAccount/createAccount.wxml文件里进行“创建账户”页面布局设计。代码如下。{"navigationBarTitleText":"创建账户"}<formbindsubmit="formSubmit"bindreset="formReset"><viewclass="content"><viewclass="line"></view><viewclass="item"><view>账户类型</view><view><radio-groupclass="radin-group"bindchange="radioChange"name="id"><radiovalue="0"checked="true">现金</radio><radiovalue="1">支付宝</radio><radiovalue="2">微信</radio></radio-group></view></view>9.5.2创建账户<viewclass="line"></view><viewclass="item"><view>账户名称</view><view><inputtype="text"placeholder="请填写(10个字以内)"placeholder-class="holder"name="name"/></view></view><viewclass="line"></view><viewclass="item"><view>余额</view><view><inputtype="text"placeholder="0.00"placeholder-class="holder"name="balance"/></view></view><viewclass="line"></view><viewclass="item"><view>备注</view><view><inputtype="text"placeholder="选填"placeholder-class="holder"name="remark"/></view></view><viewclass="line"></view><viewclass="btn"><buttonform-type="submit">创建</button></view></view></form>9.5.2创建账户.content{background-color:#ffffff;height:700px;}.line{height:1px;width:100%;background-color:#666;opacity:0.2;}.item{padding:10px;display:flex;flex-direction:row;justify-content:space-between;font-size:13px;align-items:center;}在pages/createAccount/createAccount.wxss文件里进行“创建账户”页面样式渲染。代码如下。.itemradio{margin-right:10px;}.iteminput{text-align:right;}.holder{font-size:10px;color:#B5B5B5;}.btn{text-align:center;padding-top:10px;}.btnbutton{width:90%;color:#ffffff;background:#FFD700;height:40px;border-radius:20px;}9.5.2创建账户在pages/createAccount/createAccount.js文件里进行“创建账户”页面业务逻辑处理。代码如下。Page({data:{types:[{"id":"0","icon":"/images/account/xj.jpg","typeName":"现金"},{"id":"1","icon":"/images/account/zfb.jpg","typeName":"支付宝"},{"id":"2","icon":"/images/account/wx.jpg","typeName":"微信"}]},formSubmit:function(e){ //创建账户

varid=e.detail.value.id; //账户类型idvarname=; //账户名称

varbalance=e.detail.value.balance; //账户余额

varremark=e.detail.value.remark; //账户备注

vartype=this.data.types[id]; //账本类型对象

wx.cloud.callFunction({ //调用云函数

name:'saveAccount',data:{typeId:id,typeName:,name:name,9.5.2创建账户icon:type.icon,balance:balance,remark:remark},success:res=>{console.log('[云函数][saveAccount]创建账户:',res);varerrMsg=res.result.errMsg;if(errMsg=="collection.add:ok"){wx.showToast({title:'创建成功',icon:'success',duration:1000,success:function(){wx.navigateBack({delta:1})}})}},fail:err=>{console.error('[云函数][saveAccount]创建账户',err);}})}})9.5.2创建账户在cloudfunctions/saveAccount中创建保存账户函数，在index.js文件里添加如下代码，用来处理保存账户逻辑。//云函数入口文件constcloud=require('wx-server-sdk')cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();varresult=awaitdb.collection('account').add({data:{typeId:event.typeId,typeName:event.typeName,name:,icon:event.icon,balance:event.balance,remark:event.remark,createTime:newDate(),updateTime:newDate(),openid:wxContext.OPENID}});returnresult;}9.5.3账户明细列表“账户明细”页面以列表形式显示账户的每一笔收入和支出，包括日期、收入支出的类型、收入支出的金额及余额情况，在页面底部固定“记一笔”入口区域，如图所示。“账户明细”页面效果9.5.3账户明细列表在app.json文件里配置“账户明细”页面路径（pages/accountDetail/accountDetail）。在pages/accountDetail/accountDetail.json文件里配置“账户明细”页面的导航标题。代码如下。{"navigationBarTitleText":"账户明细"}在pages/accountDetail/accountDetail.wxml文件里进行“账户明细”页面布局设计。代码如下。<viewclass="content"><viewclass="line"></view><viewclass="balance">

账户余额：{{balance}}</view><viewclass="hr"></view><viewclass="title">

账户明细</view><viewclass="line"></view><blockwx:for="{{accountDetails}}"wx:key="item"><viewclass="item"><viewclass="date">{{item.tradeDate}}</view><viewclass="{{item.type==0?'trade_in':'trade_out'}}">{{item.type==0?'收入':'支出'}}：{{item.balance}}</view><view>

余额：{{item.totalBalance}}</view></view><viewclass="line"></view></block><viewclass="bg"><viewclass="writeOne"bindtap="writeOne">记一笔</view></view></view>9.5.3账户明细列表在pages/accountDetail/accountDetail.wxss文件里进行“账户明细”页面样式渲染。代码如下。.content{background-color:#fff;}.line{height:1px;width:100%;background-color:#666;opacity:0.2;}.balance{padding:10px;color:#ffd700;font-weight:bold;text-align:center;}.hr{width:100%;height:10px;background-color:#f9f8f6;}.title{padding:10px;font-size:15px;font-weight:bold;}.item{padding:10px;display:flex;flex-direction:row;justify-content:space-between;font-size:12px;}.date{width:40%;}.trade_in{width:30%;color:#00BFFF;}.trade_out{width:30%;color:#ffd700;}.bg{background-color:#ffffff;height:40px;border:1pxsolid#f2f2f2;position:fixed;bottom:0px;width:100%;}.writeOne{line-height:40px;text-align:center;font-size:16px;color:#ffd700;}9.5.3账户明细列表在pages/accountDetail/accountDetail.js文件里添加“记一笔”页面跳转路径及加载账户明细业务逻辑处理。示例代码如下。Page({data:{balance:0, //账户总余额id:null, //账户IDaccountDetails:[] //账户明细列表},onLoad:function(e){console.log(e);varid=e.id; //账户IDvarbalance=e.balance; //账户金额this.setData({balance:balance,id:id});this.loadAccountDetail(id);},writeOne:function(){ //“记一笔”页面跳转路径，传递账户ID参数varthat=this;wx.navigateTo({url:'../writeOne/writeOne?accountId='+that.data.id,})},9.5.3账户明细列表loadAccountDetail:function(accountId){ //加载账户明细varthat=this;wx.cloud.callFunction({ //调用云函数name:'loadAccountDetail',data:{accountId:accountId //账户ID},success:res=>{console.log('[云函数][loadAccountDetail]加载账户明细：',res);varresult=res.result.data;that.setData({accountDetails:result});},fail:err=>{console.error('[云函数][loadAccountDetail]加载账户明细',err);}})}})9.5.3账户明细列表在cloudfunctions/loadAccountDetail中创建加载账户明细函数。在index.js文件里添加如下代码，用来加载账户明细。//云函数入口文件constcloud=require('wx-server-sdk')cloud.init()constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();varaccountId=event.accountId;varresult=awaitdb.collection('accountDetail').where({accountId:accountId}) //填入账户ID.orderBy('createTime','desc').get();returnresult;}9.5.4“记一笔”账户明细“记一笔”账户明细功能用来记录账户的收入和支出情况，包括交易类型、交易日期、交易金额、备注。“记一笔”页面如图所示。“记一笔”页面9.5.4“记一笔”账户明细在app.json文件里配置“记一笔”页面路径（pages/writeOne/writeOne）。在pages/writeOne/writeOne.json文件里配置“记一笔”导航标题，代码如下。{"navigationBarTitleText":"记一笔"}在pages/writeOne/writeOne.wxml文件里进行“记一笔”页面布局设计，代码如下。<formbindsubmit="formSubmit"bindreset="formReset"><viewclass="content"><viewclass="line"></view><viewclass="item"><view>交易类型</view><view><radio-groupclass="radin-group"bindchange="radioChange"name="type"><radiovalue="0"checked="true">收入</radio><radiovalue="1">支出</radio></radio-group></view></view><viewclass="line"></view>9.5.4“记一笔”账户明细<viewclass="item"><view>交易日期</view><view><pickermode="multiSelector"value="{{dateTime}}"bindchange="changeDateTime"bindcolumnchange="changeDateTimeColumn"range="{{dateTimeArray}}"name="tradeDate"><viewclass="tui-picker-detail">{{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}}{{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}</view></picker></view></view><viewclass="line"></view><viewclass="item"><view>交易金额</view><view><inputtype="text"placeholder="0.00"placeholder-class="holder"name="balance"/></view></view><viewclass="line"></view><viewclass="item"><view>备注</view><view><inputtype="text"placeholder="选填"placeholder-class="holder"name="remark"/></view></view><viewclass="line"></view><viewclass="btn"><buttonform-type="submit">记一笔</button></view></view></form>9.5.4“记一笔”账户明细在pages/writeOne/writeOne.wxss文件里进行“记一笔”页面样式渲染。代码如下。.content{background-color:#ffffff;height:700px;}.line{height:1px;width:100%;background-color:#666;opacity:0.2;}.item{padding:10px;display:flex;flex-direction:row;justify-content:space-between;font-size:13px;align-items:center;}.itemradio{margin-right:10px;}.iteminput{text-align:right;}.holder{font-size:10px;color:#B5B5B5;}.btn{text-align:center;padding-top:10px;}.btnbutton{width:90%;color:#ffffff;background:#FFD700;height:40px;border-radius:20px;}在pages/writeOne/writeOne.js文件里初始化交易日期、提交交易明细表单、根据账户ID获取账户信息、更新账号余额。代码如下。vardateTimePicker=require('../../utils/dateTimePicker.js');Page({data:{dateTimeArray:null,dateTime:null,startYear:2010, //开始年份9.5.4“记一笔”账户明细endYear:2050, //结束年份accountId:null, //账户IDtradeDate:null, //交易日期totalBalance:0 //总金额},onLoad:function(e){varaccountId=e.accountId;console.log(accountId);this.setData({accountId:accountId});this.initDate(); //初始化日期this.loadAccount(accountId); //加载账户信息},initDate:function(){ //初始化日期//获取完整的年月日时分秒信息，以及默认显示的数组varobj=dateTimePicker.dateTimePicker(this.data.startYear,this.data.endYear);//精确到分的处理，将数组的秒去除varlastArray=obj.dateTimeArray.pop();varlastTime=obj.dateTime.pop();//初始化交易日期9.5.4“记一笔”账户明细vartradeDate=obj.dateTimeArray[0][obj.dateTime[0]]+"-"+obj.dateTimeArray[1][obj.dateTime[1]]+"-"+obj.dateTimeArray[2][obj.dateTime[2]]+""+obj.dateTimeArray[3][obj.dateTime[3]]+":"+obj.dateTimeArray[4][obj.dateTime[4]];this.setData({dateTimeArray:obj.dateTimeArray,dateTime:obj.dateTime,tradeDate:tradeDate});},changeDateTime(e){ //根据选择的时间重新设置交易日期vardateTimeArray=this.data.dateTimeArray;vardateTime=e.detail.value;//交易日期vartradeDate=dateTimeArray[0][dateTime[0]]+"-"+dateTimeArray[1][dateTime[1]]+"-"+dateTimeArray[2][dateTime[2]]+""+dateTimeArray[3][dateTime[3]]+":"+dateTimeArray[4][dateTime[4]];console.log(tradeDate);this.setData({dateTime:e.detail.value,tradeDate:tradeDate});},9.5.4“记一笔”账户明细formSubmit:function(e){ //记录交易明细varthat=this;vartype=e.detail.value.type; //交易类型varbalance=e.detail.value.balance; //交易金额varremark=e.detail.value.remark; //备注//计算操作后的余额vartotalBalance=parseFloat(that.data.totalBalance);if(type==0){totalBalance=totalBalance+parseFloat(balance);}else{totalBalance=totalBalance-parseFloat(balance);}wx.cloud.callFunction({ //调用云函数name:'saveAccountDetail',data:{type:type,balance:balance,remark:remark,accountId:that.data.accountId,tradeDate:that.data.tradeDate,totalBalance:totalBalance},9.5.4“记一笔”账户明细success:res=>{console.log('[云函数][saveAccountDetail]记录交易明细：',res);varerrMsg=res.result.errMsg;if(errMsg=="collection.add:ok"){that.updateAccount(that.data.accountId,totalBalance);}},fail:err=>{console.error('[云函数][saveAccountDetail]记录交易明细',err);}})},loadAccount:function(accountId){ //根据账户ID加载账户信息varthat=this;wx.cloud.callFunction({ //调用云函数name:'loadAccount',data:{accountId:accountId},success:res=>{console.log('[云函数][loadAccount]加载账户信息：',res);varobj=res.result.data[0];9.5.4“记一笔”账户明细that.setData({totalBalance:obj.balance});},fail:err=>{console.error('[云函数][loadAccount]加载账户信息',err);}})},updateAccount:function(accountId,totalBalance){ //更新账户余额wx.cloud.callFunction({ //调用云函数name:'updateAccount',data:{accountId:accountId,totalBalance:totalBalance},success:res=>{console.log('[云函数][updateAccount]更新账户余额：',res);varerrMsg=res.result.errMsg;if(errMsg=="document.update:ok"){wx.showToast({

9.5.4“记一笔”账户明细title:'创建成功',icon:'success',duration:1000,success:function(){//返回上一页面wx.navigateBack({delta:2})}})}},fail:err=>{console.error('[云函数][updateAccount]更新账户余额',err);}})}})9.5.4“记一笔”账户明细在cloudfunctions/saveAccountDetail中创建保存账户明细函数，在index.js文件里添加如下代码，用来保存账户明细。//云函数入口文件constcloud=require('wx-server-sdk')cloud.init()constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();varresult=awaitdb.collection('accountDetail').add({data:{type:event.type,balance:event.balance,remark:event.remark,accountId:event.accountId,tradeDate:event.tradeDate,totalBalance:event.totalBalance,createTime:newDate(),updateTime:newDate(),_openid:wxContext.OPENID}});returnresult;}在cloudfunctions/loadAccount中创建加载账户函数，在index.js文件里添加如下代码，处理加载账户信息逻辑。//云函数入口文件constcloud=require('wx-server-sdk')cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();varaccountId=event.accountId;varresult=awaitdb.collection('account').where({_id:accountId //输入账户ID}).get();returnresult;}9.5.4“记一笔”账户明细在cloudfunctions/updateAccount中创建修改账户函数，在index.js文件里添加如下代码，用来处理更新账户余额逻辑。//云函数入口文件constcloud=require('wx-server-sdk')cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();varaccountId=event.accountId;vartotalBalance=event.totalBalance;varresult=awaitdb.collection('account').doc(accountId).update({data:{balance:totalBalance,updateTime:newDate()}});returnresult;}9.5.5分页获取账本列表账本列表页面用来显示创建好的账本，如图所示。如果没有账本，可通过点击“创建记账本”链接跳转到“创建账本”页面。“记账本”页面效果9.5.5分页获取账本列表在pages/accountBook/accountBook.json文件里配置下拉刷新属性。代码如下。{"enablePullDownRefresh":true}在app.js里配置云开发环境ID。在pages/accountBook/accountBook.wxml文件里进行进行“记账本”页面布局设计。代码如下。<viewclass="content"><blockwx:for="{{books}}"wx:key="item"><viewclass="line"></view><viewclass="item"><viewclass="name"><view><imagesrc="{{item.icon}}"style="width:50px;height:60px;"></image></view><viewclass="book"><viewclass="title">{{item.typeName}}</view><viewclass="desc">{{}}</view></view></view><viewclass="count">共0笔账单</view></view></block><viewclass="line"></view><viewclass="btn"bindtap="createBook">+创建记账本</view></view>9.5.5分页获取账本列表在pages/accountBook/accountBook.wxss文件里进行“记账本”页面样式渲染。代码如下。.content{background-color:#ffffff;height:600px;}.line{height:1px;width:100%;background-color:#666;opacity:0.2;}.item{display:flex;flex-direction:row;padding:10px;justify-content:space-between;align-items:center;}.name{display:flex;flex-direction:row;}.nameimage{margin-right:10px;}.book{height:60px;line-height:25px;}.title{font-size:15px;margin-bottom:10px;}.desc{font-size:12px;color:#B5B5B5;}.count{font-size:12px;color:#B5B5B5;}.count{font-size:12px;color:#B5B5B5;}.btn{font-size:13px;color:#3e13da;padding:5px;text-align:right;margin-right:10px;}9.5.5分页获取账本列表在pages/accountBook/accountBook.js文件里添加“创建账本”页面跳转、分页加载账本逻辑。示例代码如下。Page({data:{books:[], //账本列表

pageIndex:0, //分页开始序号

pageSize:2 //每页显示账本数

},onShow:function(e){//加载账本前，需要初始化分页开始序号值为0、账本数组为空

this.setData({pageIndex:0,books:[]});this.loadBook();},createBook:function(){ //创建账本跳转

wx.navigateTo({url:'../createBook/createBook',})},loadBook:function(){ //分页加载账本

varthat=this; varpageIndex=this.data.pageIndex; //分页起始值序号

varbooks