点击链接查看：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;这个样式去掉，再保存样式正常了
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
集合创建完成之后，点击权限设置，将数据记录的权限更改为【所有用户可读，仅创建者可读写】
再来到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)
}
})
}
},
来测试一下，在首页点击加减按钮，会在数据库中插入数据
这样首页功能完成了，接下来我们来将插入的这些数据读取出来，展示在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;
}
后看一下记录页面的效果
六、部署上线
我们后通过真机调试在手机上面测试一遍
如果手机上面测试有问题，但是在电脑微信开发者工具中测试没有问题，一般是两种情况：云函数没有正确的部署，再重新右键选择云函数上传一下，再重新测试数据库里面有错误数据，根据真机调试返回的错误信息修改
手机测试没有问题了，我们要开始部署了在微信开发者工具中，点击右上角的上传按钮
填写好版本和备注，点击上传之后，可以在小程序后台账号–管理–版本管理中看到了，我们点击体验版做后的测试，没有问题的话，点击提交审核可以了
提交审核之后，是漫长的等待了，一般审核时间在1-2天，长一点的要一周，多关注一下自己微信的消息，审核通过之后会收到这样的消息
再来到小程序后台，点击提交发布可以将小程序发布到线上，1-2小时左右，所有用户都可以微信搜索到你的小程序了
当然更多的还是审核未通过的消息
如果审核未通过，登录小程序后台，在通知中心中可以查看具体原因，根据提示修改后再重新提交。个人小程序审核比较严格，大家做好长期作战的准备~~
源码获取：在【猫宁一】公众号中回复【课件】获取项目源码以及课程ppt
