微信小程序開發入門之共享賬本（十）

接著上一篇

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

我們在上一篇中完成了新增記錄組件的開發，本篇來將上一篇得到的數據寫入數據庫以及完成組件和頁面的通信

首先，我們要增加一個雲函數來完成新增賬單記錄的動作，吾將名其為addBill

不知道如何添加雲函數的童鞋可以往前翻看一哈，添加完成後結果如下

打開index.js文件，修改代碼如下

const cloud = require('wx-server-sdk')
 cloud.init({
 env: cloud.DYNAMIC_CURRENT_ENV
 })
 const db = cloud.database()
 const _ = db.command
 exports.main = async (event, context) => {
 let bill = event.bill 

 bill.openId = event.userInfo.openId
 return await db.collection(event.accountBookName).add({
 data: event.bill
 })
}

代碼很簡單，從event中取出賬本名稱accountBookName和記錄bill，將記錄插入數據庫即可

記得上傳並部署

接下來我們需要得到用戶輸入的所有信息，這個動作應該發生在點擊"完成"按鈕的時候，獲取到所有數據之後調用雲函數將數據寫入數據庫

在此之前先回顧下記錄的數據結構

其中creator我們用openid填充，openid可由雲函數參數event中獲取；創建時間和編輯時間取操作的當前時間；其餘字段均為用戶自定義數據，由新增記錄組件中獲取

打開newBillSteps.js文件，修改nextStep函數如下

nextStep() {
 let currentStep = this.data.step
 if(currentStep == 3){
 let result = wx.cloud.callFunction({
 name:'addBill',
 data:{
 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
 },
 accountBookName:'tempAccountBook'
 }
 })
 result.then(res => {
 wx.showToast({
 title: '記賬成功',
 })
 }).catch(err => { 

 wx.showToast({
 title: '記賬失敗',
 })
 })
 } else {
 if(currentStep == 2){
 if (this.data.tagChosed.length > 0 && this.data.amount > 0) {
 this.setData({
 canFinish: true
 })
 }
 }
 let nextStep = (currentStep + 1) > 3 ? 3 : currentStep + 1
 this.setData({
 step: nextStep
 })
 }
}

注意到新記錄裡有picUrls和voiceUrl，我們將這兩個字段加到data域中

picUrls:[],
voiceUrl:''

還有之前我忘了對remark字段做處理，現在將處理函數加上

remark也是通過一個input輸入的字段，和amount一樣需要debounce（防抖）

處理，所以總體邏輯也和updateAmount函數一致

首先增加一個全局變量

let updateRemarkTO = null

然後在menthods中增加處理函數

updateRemark(e) {
 if (updateRemarkTO != null) {
 clearTimeout(updateRemarkTO)
 }
 let that = this
 updateRemarkTO = setTimeout(function () {
 that.setData({
 remark: e.detail.value
 }, 200)
 })
}

另外我們還在nextStep函數中改變了一下canFinish的賦值邏輯，將賦值判斷放在第二頁切換到第三頁的動作中以以更簡單的方式完成邏輯

到現在為止程序還沒法正常運行，細心的童鞋可能已經發現了，我們調用雲函數addBill時傳了個accountBookName:'tempAccountBook',這個tempAccountBook是什麼鬼

因為我們還沒有為用戶建立起完整的登錄系統，所以暫時沒有做新建賬本操作的入口，這裡只能先用一個臨時的集合來測試

所以，登上雲數據庫新建一個集合叫tempAccountBook吧

完成集合創建後編譯運行程序

打開雲數據庫，打開集合tempAccountBook集合，可以看到數據已經添加成功了

至此，增加記錄組件的功能差不多是實現完了

（鑑於篇幅長度問題，組件和頁面通信放在下一篇說明吧）