微信小程序開發入門之共享賬本(十一)
接著上一篇
(備註:微信小程序的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組件的地方加上傳值的語句
其中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,今日份開發到此結束,下一篇開始設計用戶,賬本和記錄的關係
關鍵字: showNewBillWindow NoSQL 數據庫