五、将记录数据展示到页面上(云数据库的读取)
主要编辑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文件中添加代码遍历显示日志数据
<block wx:for="{{logs}}" wx:key="key"> <view class="log-item"> 日期:{{item.date}} 分数:{{item.add}} </view> </block>
在pages/logslogs.wxss文件中添加样式
.log-item { text-align: left; padding: 10px 10px 0 0; }
最后看一下记录页面的效果
六、部署上线
我们最后通过真机调试在手机上面测试一遍
如果手机上面测试有问题,但是在电脑微信开发者工具中测试没有问题,一般是两种情况:
- 云函数没有正确的部署,再重新右键选择云函数上传一下,再重新测试
- 数据库里面有错误数据,根据真机调试返回的错误信息修改
手机测试没有问题了,我们就要开始部署了在微信开发者工具中,点击右上角的上传按钮
填写好版本和备注,点击上传之后,就可以在小程序后台账号–管理–版本管理中看到了,我们点击体验版做最后的测试,没有问题的话,点击提交审核就可以了
提交审核之后,就是漫长的等待了,一般审核时间在1-2天,长一点的要一周,多关注一下自己微信的消息,审核通过之后会收到这样的消息
再来到小程序后台,点击提交发布就可以将小程序发布到线上,1-2小时左右,所有用户都可以微信搜索到你的小程序了
当然更多的还是审核未通过的消息
如果审核未通过,登录小程序后台,在通知中心中可以查看具体原因,根据提示修改后再重新提交。个人小程序审核比较严格,大家做好长期作战的准备~~