微信小程序開發入門之共享賬本(十一)

微信小程序開發入門之共享賬本(十一)

接著上一篇

微信小程序開發入門之共享賬本(十一)

(備註:微信小程序的wxml文件相當於HTML文件,wxss文件相當於CSS文件,js文件就是JavaScript文件,數據庫為NoSQL數據庫,數據庫腳本語言也同NoSQL

上一篇完成了數據落庫的功能,本篇將介紹頁面和組件之前是如何進行通信的

微信小程序開發入門之共享賬本(十一)

微信小程序開發入門之共享賬本(十一)

首先是主頁面調起組件時如何傳數據

比如調起新增記錄組件,需要傳一個賬本名稱。給組件傳遞數據靠的是組件的properties

我們在newBillSteps.js中增加一個accountBookNameproperty

/**
* 組件的屬性列表
*/
properties: {
 accountBookName:{
 type:String,
 default:''
 }
}

注意properties的地位是和data以及methods是同等的,不要放錯位置

這裡我們定義了一個名為accountBookNameproperty,用來傳遞正在使用的賬本名稱

然後在調用新增記錄的雲函數部分,將accountBookName字段賦值為該property,如下

accountBookName:this.data.accountBookName

可以看到獲取properties值的方式和獲取data的一樣

同樣的,我們在index.jsdata中也增加一個用來存儲賬本名稱的字段,不妨也叫accountBookName,同時將

showNewBillWindow字段置為false,如下

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文件,之前顯示記錄的部分已經不再適用,對class='content'

view的部分修改如下

 {{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,今日份開發到此結束,下一篇開始設計用戶,賬本和記錄的關係

微信小程序開發入門之共享賬本(十一)


分享到:


相關文章: