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

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

接着上一篇

（备注：微信小法式的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调集，可以看到数据已经增加成功了

至此，增加记录组件的功用差不多是实现完了

（鉴于篇幅长度题目，组件和页面通讯放鄙人一篇说明吧）

进修了

[大笑][大笑]