点击链接查看:30分钟创建并上线小程序实战项目(上篇)

下篇↓↓↓

点击观看视频课程

微信小程序云开发实战

四、点击按钮生成记录数据(云数据库的插入和查询)

1、完善首页样式

首页主要是创建两个按钮,并显示当前的加减的数值,将pages/index/index.wxml文件中的代码清空,加上+1和-1两个按钮

+ 1 – 1

再来将pages/index/index.wxss文件的代码清空,粘贴上下面的代码

.button{ width: 70px; height: 70px; line-height:70px; border-radius: 20%; border: none; text-align:center; font-size: 25px; color:FFFFFF; font-weight:bold; margin-top:50px; } .right{ background:EA5149; float: right; } .left{ background:feb600; }

现在保存文件看一下效果,可以看到上面有一个空白的间隔, 我们来到app.wxss文件中,将padding: 200rpx 0;这个样式去掉,再保存样式正常了

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图1

2、实现点击首页的加减按钮,在控制台中打印出加减的信息

在pages/index/index.wxml文件中的两个按钮上面添加data-add=”1″ bindtap=”addLog” 方法

+ 1 – 1

在两个按钮,这个要注意addLog传参不能这样写addLog(1),参数需要写在前面data-add中,其中add是我们自己定义的,换成别的单词也可以

再来到pages/index/index.js文件中,清空原先的代码,并创建addLog方法

Page({ //event就是我们通过data-add传递的参数对象 addLog(event){ //传递的参数event.currentTarget.dataset.add这样来获取 const add = event.currentTarget.dataset.add console.log(“add”, add) } })

现在点击加减按钮,在控制台中已经可以打印出add的数字, 接下来我们将这个数据插入到数据库中

3、向数据库中添加加减记录数据

点击微信开发者工具中上面的云开发按钮,来到云开发后台,需要创建数据库集合logs

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图2

集合创建完成之后,点击权限设置,将数据记录的权限更改为【所有用户可读,仅创建者可读写】

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图3

再来到cloud云开发文件中创建一个云函数createlog,在cloud/createlog/index.js文件中,实现往logs数据表中插入一条记录的功能

// 云函数入口文件 const cloud = require(wx-server-sdk) cloud.init() const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { try { return await db.collection(logs).add({ //event是从前端传递过来的参数对象,我们后面会在pages/index/index.js文件中的addLog方法中调用云函数createlog时,传递add、date、openid这些参数 data: { add: event.add, date:event.date, openid:event.openid } }) }catch(e){ //插入数据错误 console.log(e) } }

修改完成云函数createlog之后,不要忘记部署函数,右键点击这个云函数,选择【创建并部署:云端安装依赖】选项

接下来编辑pages/index/index.js文件的addlog方法,调用云函数createlog,并传递add、date、openid这三个参数

addLog(event){ const add = event.currentTarget.dataset.add console.log(“add”, add) //需要添加的部分 const that = this const ui = wx.getStorageSync(ui) //如果缓存中没有用户信息,就跳转到我的页面 if (!ui.openid){ wx.switchTab({ url: /pages/me/me, }) }else{ //调用云函数createlog wx.cloud.callFunction({ name: “createlog”, data: { add: add, date: Date.now(), openid: ui.openid }, success: function (res) { console.log(res) }, fail: function (res) { console.log(res) } }) } },

来测试一下,在首页点击加减按钮,会在数据库中插入数据

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图4

这样首页功能完成了,接下来我们来将插入的这些数据读取出来,展示在logs日志页面中

五、将记录数据展示到页面上(云数据库的读取)

主要编辑pages/logs文件夹 先来创建一个云函数getlogs,并在cloud/getlogs/index.js文件中添加代码

// 云函数入口文件 const cloud = require(wx-server-sdk) cloud.init() const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { try { //需要从前端传过openid数据,通过openid字段来获取日志信息 return await db.collection(logs).where({ openid: event.openid }).get() } catch (e) { //插入数据错误 console.log(e) } }

再来到pages/logs/logs.js文件中创建getlogs方法调用getlogs云函数,并向云函数传递openid这个参数

//加载util.js文件,用来格式化日期 const util = require(../../utils/util.js) Page({ data: { logs: [] }, getlogs:function(){ //从缓存中获取用户信息 const ui = wx.getStorageSync(ui) //如果缓存中没有用户信息,就跳转到我的页面 if (!ui.openid) { wx.switchTab({ url: /pages/me/me, }) }else{ const that = this wx.cloud.callFunction({ name: “getlogs”, data: { openid: ui.openid }, success: function (res) { console.log(“ni”, res) that.setData({ logs: res.result.data.map(log => { var date = util.formatTime(new Date(log.date)) log.date = date return log }) }) console.log(“logs”, that.data.logs) }, fail: function (res) { console.log(res) } }) } }, //通过onShow生命周期函数,调用getlogs方法 //这样每次切换到日志页面,都会调用getlogs方法 //在首页点击加减按钮后,切换到日志页面,新增的日志记录就会自动更新,提高用户体验 onShow:function(){ this.getlogs() } })

后来到pages/logs/logs.wxml文件中添加代码遍历显示日志数据

日期:{{item.date}} 分数:{{item.add}}

在pages/logslogs.wxss文件中添加样式

.log-item { text-align: left; padding: 10px 10px 0 0; }

后看一下记录页面的效果

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图5

六、部署上线

我们后通过真机调试在手机上面测试一遍

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图6

如果手机上面测试有问题,但是在电脑微信开发者工具中测试没有问题,一般是两种情况:云函数没有正确的部署,再重新右键选择云函数上传一下,再重新测试数据库里面有错误数据,根据真机调试返回的错误信息修改

手机测试没有问题了,我们要开始部署了在微信开发者工具中,点击右上角的上传按钮

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图7
2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图8

填写好版本和备注,点击上传之后,可以在小程序后台账号–管理–版本管理中看到了,我们点击体验版做后的测试,没有问题的话,点击提交审核可以了

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图9

提交审核之后,是漫长的等待了,一般审核时间在1-2天,长一点的要一周,多关注一下自己微信的消息,审核通过之后会收到这样的消息

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图10

再来到小程序后台,点击提交发布可以将小程序发布到线上,1-2小时左右,所有用户都可以微信搜索到你的小程序了

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图11

当然更多的还是审核未通过的消息

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图12

如果审核未通过,登录小程序后台,在通知中心中可以查看具体原因,根据提示修改后再重新提交。个人小程序审核比较严格,大家做好长期作战的准备~~

2020云开发+源码(下)30分钟创建并上线小程序实战项目云函数云数据库插图13
源码获取:在【猫宁一】公众号中回复【课件】获取项目源码以及课程ppt

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: