如何从零开始搭建顾客签到小程序？（二）---云开发入门教程
导语：在如何从零开始搭建顾客签到小程序？（一）中，已经搭建起顾客登陆、获取用户openid、转到教练列表两个微信小程序的页面。在前端页面和后端云服务器之间建立了联系。本文将继续讲解如何把签到信息存至云数据库，以及如何从云数据库中获取信息查询记录的功能实现。
第四步、实现顾客签到页面和功能
一、顾客签到功能的流程图
二、打开微信开发者工具，导入顾客签到小程序项目，左侧文件树中“jiaolian1、jiaolian2"两个目录就是用户签到页面
三、点击”jiaolian1.wxml”文件，内容替换成如下代码：
bindtap="onAdd">点击签到 四、紧接着点击“jiaolian.js"文件，把内容替换成如下代码： //index.js const app = getApp(); //定义变量 const db = wx.cloud.database({}); //调用云数据库 const cont = db.collection('jiaolian1'); //指明要操作的数据集是"jiaolian1" Page({ //定义页面数据 data: { }, onLoad: function() { //默认加载获取用户信息 wx.getUserInfo({ //获取用户信息 withCredentials:true, //授权鉴证 success: res => { var userInfo = res.userInfo app.globalData.nickName = userInfo.nickName //用户眤称赋值 var gender = userInfo.gender //用户性别赋值 var myDate = new Date() //获取当前时间 app.globalData.mydate = myDate.toDateString() //截止到日期的时间 app.globalData.mytime = myDate.toLocaleString() //截止到毫秒的时间 app.globalData.avatarUrl = userInfo.avatarUrl //头像 if (gender = 1) { app.globalData.gen = "先生" } //对性别符号进行判断，1是先生 else { app.globalData.gen = "女士" } //0是女士 this.setData({ avatarUrl: res.userInfo.avatarUrl, userInfo: res.userInfo }) }, //下面是一些”预留退路“的保障代码 fail: function () { //获取用户信息失败后。请跳转授权页面 wx.showModal({ title: '警告', content: '尚未进行授权，请点击确定跳转到授权页面进行授权。', success: function (res) { if (res.confirm) { console.log('用户点击确定') wx.navigateTo({ url: '../tologin/tologin', }) } } }) }, }) if (!wx.cloud) { wx.redirectTo({ url: '../chooseLib/chooseLib', }) return } // 查询当前用户所有的 counters //为下面防止用户重复签到提供对比记录 db.collection('jiaolian1').count().then(res =>{ console.log(res.total) this.setData({ message : res.total }) }) }, onAdd:function() { //点击签到按钮功能函数 const db = wx.cloud.database() db.collection('jiaolian1').where({_openid:app.globalData.openid}).get({ success:res =>{ //上面用where定义是不同用户的签到 var newdate = app.globalData.mydate //判断两次签到是否同一天 var len = res.data.length //记录的长度 console.log(len) console.log(newdate) if(len===0){ //如果当天没有记录，该用户可以新增签到 db.collection('jiaolian1').add({ //在数据库中写入签到信息 data: { nickname: app.globalData.nickName, //包括了呢称、签到时间等 mytime:app.globalData.mytime, avatarUrl:app.globalData.avatarUrl, gen: app.globalData.gen, mydate: app.globalData.mydate, biaozhi:1 }, }) console.log('今日第一次签到！') } var olddate = res.data[res.data.length-1].mydate if(len>0 & olddate!=newdate){ //如果该用户签到记录大于0但相隔时间超过一天 db.collection('jiaolian1').add({ //也往数据库里写入新增签到信息 data: { nickname: app.globalData.nickName, //包括了呢称、签到时间等 mytime:app.globalData.mytime, avatarUrl:app.globalData.avatarUrl, gen: app.globalData.gen, mydate: app.globalData.mydate, biaozhi:1 }, success: res => { // 在返回结果中会包含新创建的记录的 _id this.setData({ counterId: res._id, count: 1 }) wx.showToast({ title: '签到成功', }) console.log('[数据库] [新增记录] 成功，记录 _id: ',res._id) }, fail: err => { //下面是一些”预留退路“的保障代码 wx.showToast({ icon: 'none', title: '新增记录失败' }) console.error('[数据库] [新增记录] 失败：', err) } }) } if(len>0 & olddate==newdate){ //如果同一用户在同一天内签到则拒绝写入 console.log('您今日已经签到！') this.setData({ qiandao:'您今日已经签到！' }) } }, fail:err => { console.log('读数据失败') }, }) }, onQuery: function() { //该函数对应查询按钮，是查询所有用户的签到记录 //因为已经过滤了同一天同一用户重复签到，所以所有签到记录就是用户的每日上课记录。 db.collection('jiaolian1').get({ success: res => { this.setData({ book_list : res.data }) console.log('[数据库] [查询记录] 成功: ', res) }, fail: err => { wx.showToast({ icon: 'none', title: '查询记录失败' }) console.error('[数据库] [查询记录] 失败：', err) } }) }, sumOnQuery: function() { //该函数对应页面中的统计总次数数据 // 查询当前用户所有的 counters db.collection('jiaolian1').count().then(res =>{ console.log(res.total) this.setData({ message : res.total //把顾客签到总次数渲染到页面 }) }) } }) 五、紧接着点击“jiaolian.wxml"文件，把内容替换成如下代码： /* pages/main/main.wxss */ /**index.wxss**/ page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: flex-start; } .uploader-text, .tunnel-text { width: 100%; line-height: 52px; font-size: 34rpx; color: #007aff; } .userinfo, .uploader, .tunnel { margin-top: 40rpx; height: 140rpx; width: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-left: none; border-right: none; display: flex; flex-direction: row; align-items: center; transition: all 300ms ease; } 六、完成代码编写，按”CTRL+S“保存后看看效果 很妙，顾客签到，签到总数以及签到详细记录都显示出来了，功能完整。 七、修改另一个教练"jiaolian2"的文件，把上面代码拷过去，然后把云数据集“jiaolian1”改成“jiaolian2”即可，当然，签到页面中教练的名字也需要改换的。 总结： 1、制订了签到查询功能流程图； 2、编写了查询页面和逻辑功能页面代码函数，实现了签到、查询、统计三项功能； 3、考虑到顾客上课的实际情况，增加了同一个顾客同一天内不能重复签到的判断语句； 这次我们选择了云开发作为小程序开发的方式，只需要编写云函数，大大提高了开发效率。但是云开发只是腾讯云上提供的服务，如果我们想用阿里云服务器的话，还是要设置小程序和服务器之间的系统环境和数据交换。在下一篇文章中，我将讲解如何用python这种全世界最流程的语言，来作为小程序的服务器后端示例。“人生苦短，我用python”。请关注我的头条号，欢迎讨论指正。 如果让你有所思，请多在朋友圈分享本文，让更多人有所获。我是神足自在，编程爱好者，致力于IT工程的实践案例和浅易讲解。
