微信小程序开发入门之共享账本（十一）
接着上一篇
（备注：微信小程序的wxml文件相当于HTML文件，wxss文件相当于CSS文件，js文件就是JavaScript文件，数据库为NoSQL数据库，数据库脚本语言也同NoSQL）
上一篇完成了数据落库的功能，本篇将介绍页面和组件之前是如何进行通信的
首先是主页面调起组件时如何传数据
比如调起新增记录组件，需要传一个账本名称。给组件传递数据靠的是组件的properties
我们在newBillSteps.js
/** * 组件的属性列表 */ properties: { accountBookName:{ type:String, default:'' } }
注意properties的地位是和data以及methods是同等的，不要放错位置
这里我们定义了一个名为accountBookName的property，用来传递正在使用的账本名称
然后在调用新增记录的云函数部分，将accountBookName字段赋值为该property，如下
accountBookName:this.data.accountBookName
可以看到获取properties值的方式和获取data的一样
同样的，我们在index.js的data中也增加一个用来存储账本名称的字段，不妨也叫
accountBookName:'tempAccountBook', showNewBillWindow:false
然后在index.wxml中，给声明newBillSteps组件的地方加上传值的语句
其中acctbookName="{{acctbookName}}"就是用来给组件的properties传值的方式，wx:if的使用方式在newBillSteps.wxml中也讲到过，就不赘述了
然后我们给底部的新增按钮添加一个方法，用来切换新增记录组件的显示和隐藏，就是下面这个按钮
增加新的bindtap事件，如下
然后在index.js中增加showNewBill
showNewBill(){ this.setData({ showNewBillWindow: !this.data.showNewBillWindow }) }
编译运行，点击按钮可以切换新增记录组件的显示和隐藏
但是这里按钮没有变化显得很生硬，所以我们给他加上点样式变化，首先在index.wxml中给按钮部分代码加点东西
表示在显示和隐藏新增组件的过程中添加或删除rotative样式
然后在index.wxss中新增一个样式rotative
.rotative{ transform: rotate(135deg) }
并且给.new-bill样式增加一句
transition: .6s;
样式rotative的作用是让按钮顺时针旋转135度，transition: .6s是定义旋转过程应该持续0.6s
再次编译运行，按钮的变化是不是赏心悦目许多
现在已经可以通过properties给组件传递数据，那组件如何主动和其调用方交流呢
组件通过事件来进行通信
比如我们的新增记录组件，在完成操作之后要通知index关闭自己，接下来来说明如何完成
首先打开index.wxml，修改声明组件的语句，如下
bind:finished="onNewBillFinish"表示如果组件发出一个finished事件，index就用onNewBillFinished函数来接收并处理它
所以我们先在index.js中增加一个onNewBillFinished函数，内容如下
onNewBillFinished(e){ let billItems = this.data.billItems billItems.push(e.detail.bill) this.setData({ showNewBillWindow: false, billItems: billItems }) },
功能有两个，一个是将新的记录加入billItems数组中，第二个就是隐藏新增记录组件
我们还要修改下index.wxml文件，之前显示记录的部分已经不再适用，对
{{item.date}}-{{item.category}}{{item.remark.length>0?'('+item.remark+')':''}}: {{item.amount}}
是针对记录内容进行拼接显示
头像部分暂时传一个默认值
然后修改newBillSteps.js文件，还是nextStep函数部分，我们先把
if(currentStep == 3)
判断中的内容提出来，单独为一个complete函数，complete函数如下
complete(){ let bill = this.generateBill() let result = wx.cloud.callFunction({ name: 'addBill', data: { bill: bill, accountBookName: this.data.accountBookName } }) result.then(res => { wx.showToast({ title: '记账成功', }) }).catch(err => { wx.showToast({ title: '记账失败', }) }) this.triggerEvent('finished', {'bill':bill}, {}) }
把拼记录的工程也单独出来成一个函数generateBill，如下
generateBill(){ let bill = { createTime: new Date().toString(), editTime: new Date().toString(), type: this.data.isPay ? 'pay' : 'income', category: this.data.tagChosed, amount: this.data.amount, date: this.data.date, remark: this.data.remark, picUrls: this.data.picUrls, voiceUrl: this.data.voiceUrl } return bill }
最后nextStep中
if(currentStep == 3)
里的内容就是一句
this.complete()
注意到complete函数的最后一句了吗
this.triggerEvent('finished', {'bill':bill}, {})
这个就是触发finished事件的方式
第一个参数是要触发的事件名，第二个参数是要传递的数据，这里我们将新的记录传了回去，第三个是事件触发选项，这里默认就行
编译运行程序，点击新增记录，填写记录，完成填写后会显示在主页上
OK，今日份开发到此结束，下一篇开始设计用户，账本和记录的关系