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

简介: 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

相关实践学习
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
目录
相关文章
|
存储 NoSQL Redis
阿里云高性能数据库Tair(兼容 Redis)收费价格,稳定可靠成本低
阿里云高性能云数据库Tair兼容Redis,提供Redis开源版和Tair企业版,支持多种存储介质与灵活扩展,适用于高并发场景。Tair具备亚毫秒级稳定延迟,保障业务连续性。价格方面,Redis开源版年费从72元起,Tair企业版年费从1224元起,具体费用根据配置不同有所变化。
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
1428 0
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
25753 14
|
Rust 前端开发 关系型数据库
Tauri 开发实践 — Tauri 集成本地数据库
本文介绍了在 Tauri 框架中集成本地数据库的几种方案,包括直接绑定 SQLite、使用第三方数据库库和使用 tauri-plugin-sql-api 插件。最终选择了 tauri-plugin-sql-api,因为它集成简单、支持多种数据库类型,并且与 Tauri 框架深度整合,提升了开发效率和安全性。文章详细介绍了如何安装和使用该插件,以及如何编写核心代码实现数据库操作。
1959 2
|
小程序 开发工具
微信小程序云开发的开通
微信小程序云开发的开通
2350 0
微信小程序云开发的开通
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
819 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
SQL 数据管理 关系型数据库
SQL与云计算:利用云数据库服务实现高效数据管理——探索云端SQL应用、性能优化、安全性与成本效益,为企业数字化转型提供全方位支持
【8月更文挑战第31天】在数字化转型中,企业对高效数据管理的需求日益增长。传统本地数据库存在局限,而云数据库服务凭借自动扩展、高可用性和按需付费等优势,成为现代数据管理的新选择。本文探讨如何利用SQL和云数据库服务(如Amazon RDS、Google Cloud SQL和Azure SQL Database)实现高效的数据管理。通过示例和最佳实践,展示SQL在云端的应用、性能优化、安全性及成本效益,助力企业提升竞争力。
562 0
|
运维 前端开发 Serverless
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
334 0
|
存储 小程序 关系型数据库
原生小程序 获取手机号并进行存储到mysql数据库
原生小程序 获取手机号并进行存储到mysql数据库
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
1084 0

热门文章

最新文章