微信小程序开发入门之共享账本(十二)

微信小程序开发入门之共享账本(十二)

接着上一篇

微信小程序开发入门之共享账本(十二)

(备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也同NoSQL

区块链最近可真是火,但是也不能因此乱了方寸,做事要有始有终不是,等写完小程序的文章再和大家共同学习下区块链的知识吧。

言归正传,上一篇完成了将记录新增到数据库以及实现页面和组件间的通信,但是用到的集合时手动创建的临时集合tempAccountBook,这肯定时不合理的,这一篇开始我们就把从第一次打开小程序到记录第一笔账的逻辑给捋顺了。

首先把上一篇新建的临时集合删掉

微信小程序开发入门之共享账本(十二)

放错了,是这个

(要是肥肉能删除该有多好啊)

微信小程序开发入门之共享账本(十二)

当用户首次打开程序的时候,我们会展示一个相当于登录页面的授权页面,授权成功后才能进到主页面,这时候还没有任何账本信息,我们有两条路可选,一是提示用户需要创建一个账本,二是给用户生成一个默认的,日后可以改账本名称。个人觉得第二种好些,很多人人就是不喜欢起名字,给个默认账本让其无感知的进行记账就很好,可以稍微提示下如何修改账本名称,总之尽量让用户做最少的工作和选择肯定是对的。

确定了思路,接下来看下代码逻辑该怎么走

welcome页面用来登录,登陆的云函数login中就有是否已存在用户信息的逻辑,那我们将新增默认账本的逻辑也加进去

微信小程序开发入门之共享账本(十二)

可事实上有个问题,如果第一次新建账本失败了,后面就会没有机会再建账本了,因为已经授权的用户不会再走到

welcome界面

微信小程序开发入门之共享账本(十二)

同样的问题也存在于新建用户的逻辑,如果授权成功但是新建用户信息失败了也不会有其他入口再重试

当然在welcome页面的逻辑中完成用户信息和新建账本没有什么问题,只是需要在主页面index.js的逻辑中再检测一次

首先看下账本信息表的结构

微信小程序开发入门之共享账本(十二)

我们可以用creatorId来查询该用户是否已经创建过账本,如果没有则新建一个默认账本,账本名称格式为"openid@默认账本"

先在数据库中新建一个集合acctBook

然后修改下云函数loginindex.js代码,如下

exports.main = async (event, context) => {
 let user = event.user
 user.openId = event.userInfo.openId
 let r1 = await db.collection('user').where({
 openId:user.openId
 }).get()
 let r2 = await db.collection('acctBook').where({
 openId: user.openId
 }).get()
 if(r1.data.length < 1){
 r1 = db.collection('user').add({
 data: user
 })
 }
 if(r2.data.length < 1){
 r2 = db.collection('acctBook').add({
 data:{
 openId: user.openId,
 name: user.openId+'@默认账本',
 partners:[{
 openId: user.openId,
 name: user.name,
 avatarUrl: user.avatarUrl,
 backgroundUrl:''
 }],
 active:true,
 createTime:new Date(),
 iconUrl:''
 }
 })
 }
 return Promise.all([r1,r2])
}

解释下这里的逻辑,首先是根据openid查询user集合和acctBook集合看看是否已经存在数据,如果user集合或者acctBook集合没有数据的话就插入新的数据

Promise.all([r1, r2])是当r1r2两个异步调用都返回成功才算成功,如果有一个失败就是失败,当r1r2是常量时也算成功,所以在这里不管是查询到了数据或者是成功向数据库插入数据,都能以此正确的向前端返回结果

编译运行,演示如下

微信小程序开发入门之共享账本(十二)

再去数据库看看是否已经插入数据成功

微信小程序开发入门之共享账本(十二)

user集合的数据没有问题,再看看acctBook集合

微信小程序开发入门之共享账本(十二)

账本名称用了默认生成的名称,partners也将自身加了进去

很好,都没问题,我们继续

微信小程序开发入门之共享账本(十二)

然后我们新建一个云函数verify,用在主页面中验证信息是否初始化成功,修改verifyindex.js代码如下

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
 openId = event.userInfo.openId
 let r1 = await db.collection('user').where({
 openId: openId
 }).get()
 let r2 = await db.collection('acctBook').where({
 openId: openId
 }).get()
 if(r1.data.length < 1 || r2.data.length < 1){
 return Promise.reject('验证失败')
 } else {
 return Promise.resolve(r2.data)
 }
}

基本上是复用login中的内容,只是在用户信息或者账本信息之一不存在是返回失败,否则返回账本信息(后面需要用到)

然后再看主页面index.js中的代码,首先data中增加一个字段记录用户昵称

name:''

然后新增一个函数,也叫verify,用来验证信息

verify: function () {
 let r = wx.cloud.callFunction({
 name:'verify'
 })
 r.then(res => {
 wx.showToast({
 title: "欢迎你," + this.data.name,
 image: '/images/smile.png'
 })
 }).catch(err => {
 wx.redirectTo({
 url: '../welcome/welcome',
 })
 })
}

最后修改下onLoad中判断授权成功的逻辑,将之前内容删除改为调用verify函数即可

wx.getUserInfo({
 success: res => {
 //新建用户信息或者查询已有信息
 this.setData({
 name:res.userInfo.nickName
 })
 this.verify()
}
})

正常情况程序肯定不会有问题,现在我们测一下异常情况,可以去数据库中把

user集合的信息删掉,然后再回来重新编译运行程序,不出意外会跳转到登录界面,点击按钮后会重新回到主页面,然后再看数据库中user集合,数据又重新添加进去了

微信小程序开发入门之共享账本(十二)

欧克,今日份代码完成,下一篇讲如何实时更新账单显示

微信小程序开发入门之共享账本(十二)


分享到:


相關文章: