【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日志并进行多维度分析。
目录
相关文章
|
canal 中间件 关系型数据库
微服务轮子项目(30) -数据库分库分表、部署上线方式(下)
微服务轮子项目(30) -数据库分库分表、部署上线方式(下)
59 0
|
SQL 缓存 数据库
微服务轮子项目(30) -数据库分库分表、部署上线方式(上)
微服务轮子项目(30) -数据库分库分表、部署上线方式
120 0
|
NoSQL 测试技术 API
Eolink Apikit 版本更新:「数据字典」功能上线、支持 MongoDB 数据库操作...
Eolink Apikit 版本更新: 1. 搭建自定义接口协议架构,支持快速适配金融行业各类型私有协议的导入、编辑和展示。 2. 数据字典功能上线,支持以数据字典的形式管理参数枚举值。 3. 数据库连接支持 MongoDB 数据库操作。 4. 基于 Apikit 类型导入 API 数据支持增量更新。
79 0
|
SQL 关系型数据库 MySQL
线上数据库锁表?明天就要上线?
线上数据库锁表?明天就要上线?
87 0
|
SQL 安全 Cloud Native
NineData数据管理平台正式上线,开发者必备的数据库产品
11月1日,NineData 多云数据管理平台正式上线,构建全球领先的多云数据管理平台。NineData提供数据备份、复制、对比和企业级SQL开发服务,让您的数据管理更安全更高效。本次发布会演示了如何通过NineData的数据管理平台,实现1分钟配置企业级数据备份。
535 0
NineData数据管理平台正式上线,开发者必备的数据库产品
|
存储 小程序 数据库
微信小程序 | 基于云数据库的许愿墙
本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙。
236 0
微信小程序 | 基于云数据库的许愿墙
|
小程序 JavaScript 数据库
微信小程序实训|基于云数据库的语文听写工具
微信小程序实训|基于云数据库的语文听写工具
251 0
微信小程序实训|基于云数据库的语文听写工具
|
SQL 安全 数据库
ODC 3.4.0 现已上线,让数据库开发更简单
OceanBase 开发者工具(OceanBase Developer Center,ODC)作为 OceanBase 数据库量身打造的企业级数据库开发平台,旨在帮助企业安全、高效地使用数据库。用户可通过 ODC 创建和管理数据库中的表、视图等 10 余种数据库对象。基于 WebSQL,ODC 提供了 SQL 窗口和匿名块窗口作为数据库开发者开发和诊断 SQL 和 PL/SQL 的工作区。用户还可为指定角色分配对应资源及该资源的访问权限,企业内不同角色间的开发协作亦会变得简单可控。
284 0
ODC 3.4.0 现已上线,让数据库开发更简单
|
分布式计算 Cloud Native 关系型数据库
PingCAP 与阿里云达成合作,云数据库 TiDB 上线阿里云心选商城
2022 年 6 月 15 日,企业级开源分布式数据库厂商 PingCAP 宣布与阿里云达成合作,融合双方技术优势的云数据库 TiDB 正式上线阿里云心选商城,为中国企业用户带来新一代 HTAP 数据库的云端体验。
568 0
PingCAP 与阿里云达成合作,云数据库 TiDB 上线阿里云心选商城
|
23天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
360 7

热门文章

最新文章

下一篇
无影云桌面