微信小程序开发入门之共享账本（十一）

微信小法式开辟入门之同享账本（十一）

接着上一篇

（备注：微信小法式的wxml文件相当于HTML文件，wxss文件相当于CSS文件，js文件就是JavaScript文件，数据库为NoSQL数据库，数据库剧本说话也同NoSQL）

上一篇完成了数据落库的功用，本篇将先容页面和组件之前是若何停止通讯的

首先是主页面调起组件时若何传数据

比如调起新增记录组件，需要传一个账本称号。给组件传递数据靠的是组件的properties

我们在newBillSteps.js中增加一个accountBookName的property
/*** 组件的属性列表*/properties: { accountBookName:{ type:String, default:'' }}
留意properties的职位是和data以及methods是同等的，不要放错位置

这里我们界说了一个名为accountBookName的property，用来传递正在利用的账本称号

然后在挪用新增记录的云函数部分，将accountBookName字段赋值为该property，以下
accountBookName:this.data.accountBookName
可以看到获得properties值的方式和获得data的一样

一样的，我们在index.js的data中也增加一个用来存储账本称号的字段，无妨也叫accountBookName，同时将showNewBillWindow字段置为false，以下
accountBookName:'tempAccountBook',showNewBillWindow:false
然后在index.wxml中，给声明newBillSteps组件的地方加上传值的语句
<newBillSteps wx:if="{{showNewBillWindow}}" accountBookName="{{accountBookName}}"></newBillSteps>
其中acctbookName="{{acctbookName}}"就是用来给组件的properties传值的方式，wx:if的利用方式在newBillSteps.wxml中也讲到过，就不赘述了

然后我们给底部的新增按钮增加一个方式，用来切换新增记录组件的显现和隐藏，就是下面这个按钮

增加新的bindtap事务，以下
<button class="menu new-bill" bindtap="showNewBill"></button>
然后在index.js中增加showNewBill方式
showNewBill(){ this.setData({ showNewBillWindow: !this.data.showNewBillWindow })}
编译运转，点击按钮可以切换新增记录组件的显现和隐藏

可是这里按钮没有变化显得很僵硬，所以我们给他加上点款式变化，首先在index.wxml中给按钮部分代码加点工具
<button class="menu new-bill {{showNewBillWindow?'rotative':''}}" bindtap="showNewBill"></button>
暗示在显现和隐藏新增组件的进程中增加或删除rotative款式

然后在index.wxss中新增一个款式rotative
.rotative{ transform: rotate(135deg)}
而且给.new-bill款式增加一句
transition: .6s;
款式rotative的感化是让按钮顺时针扭转135度，transition: .6s是界说扭转进程应当延续0.6s

再次编译运转，按钮的变化能否是心旷神怡很多

现在已经可以经过properties给组件传递数据，那组件若何自动和其挪用方交换呢

组件经过事务来停止通讯

比如我们的新增记录组件，在完成操纵以后要告诉index封闭自己，接下来来说明若何完成

首先翻开index.wxml，点窜声明组件的语句，以下
<newBillSteps wx:if="{{showNewBillWindow}}" bind:finished="onNewBillFinish" accountBookName="{{accountBookName}}"></newBillSteps>
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文件，之前显现记录的部分已经不再适用，对class='content'的view的部分点窜以下
<view class="content"> <text>{{item.date}}-{{item.category}}{{item.remark.length>0?'('+item.remark+')':''}}: {{item.amount}}</text></view>
是针对记录内容停止拼接显现

头像部分临时传一个默许值
<image class="avatar" src="https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/avatars/IMG_8207.JPG?sign=32bccde1afe5412b0a60dbed76e3e4b9&t=1571235188"></image>
然后点窜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，本日份开辟到此竣事，下一篇起头设想用户，账本和记录的关系

进修了