【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数 下

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 5、将记录数据展示到页面上(云数据库的读取)6、项目部署上线

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


主要编辑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;
}


最后看一下记录页面的效果


image.png


六、部署上线


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


image.png


如果手机上面测试有问题,但是在电脑微信开发者工具中测试没有问题,一般是两种情况:


  • 云函数没有正确的部署,再重新右键选择云函数上传一下,再重新测试


  • 数据库里面有错误数据,根据真机调试返回的错误信息修改


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


image.png


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


image.png


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


image.png


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


image.png


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


image.png


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


image.png

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
5月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
162 0
|
2月前
|
小程序
创建云开发小程序
创建云开发小程序
25 0
|
5月前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
191 0
|
5月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
122 0
|
5月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
75 0
|
5月前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
75 0
|
7月前
|
SQL 关系型数据库 数据库
阿里云数据库 RDS SQL Server版实战【性能优化实践、优点探析】
本文探讨了Amazon RDS SQL Server版在云数据库中的优势,包括高可用性、可扩展性、管理便捷、安全性和成本效益。通过多可用区部署和自动备份,RDS确保数据安全和持久性,并支持自动扩展以适应流量波动。可视化管理界面简化了监控和操作,而数据加密和访问控制等功能保障了安全性。此外,弹性计费模式降低了运维成本。实战应用显示,RDS SQL Server版能有效助力企业在促销高峰期稳定系统并保障数据安全。阿里云的RDS SQL Server版还提供了弹性伸缩、自动备份恢复、安全性和高可用性功能,进一步优化性能和成本控制,并与AWS生态系统无缝集成,支持多种开发语言和框架。
422 2
|
6月前
|
存储 小程序 前端开发
用云开发快速制作客户业务需求收集小程序丨实战
用云开发快速制作客户业务需求收集小程序丨实战
|
7月前
|
小程序 JavaScript Java
学生公寓电费信息|基于SprinBoot+vue微信小程序的学生公寓电费信息管理系统(源码+数据库+文档)
学生公寓电费信息|基于SprinBoot+vue微信小程序的学生公寓电费信息管理系统(源码+数据库+文档)
64 0
|
7月前
|
小程序 JavaScript 关系型数据库
实习生管理|基于SprinBoot+vue的微信小程序的实习生管理系统(源码+数据库+文档)
实习生管理|基于SprinBoot+vue的微信小程序的实习生管理系统(源码+数据库+文档)
59 0