【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日志并进行多维度分析。
目录
相关文章
|
2月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
74 3
|
2月前
|
关系型数据库 MySQL Linux
在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,并与使用 RPM 包安装进行了对比
本文介绍了在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,并与使用 RPM 包安装进行了对比。通过具体案例,读者可以了解如何准备环境、下载源码、编译安装、配置服务及登录 MySQL。编译源码安装虽然复杂,但提供了更高的定制性和灵活性,适用于需要高度定制的场景。
134 3
|
2月前
|
PHP 数据库 数据安全/隐私保护
布谷直播源码部署服务器关于数据库配置的详细说明
布谷直播系统源码搭建部署时数据库配置明细!
|
2月前
|
关系型数据库 MySQL Linux
在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。
本文介绍了在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。同时,文章还对比了编译源码安装与使用 RPM 包安装的优缺点,帮助读者根据需求选择最合适的方法。通过具体案例,展示了编译源码安装的灵活性和定制性。
196 2
|
4月前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
4月前
|
Java 关系型数据库 MySQL
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
|
3月前
|
关系型数据库 MySQL Linux
在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤
本文介绍了在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,包括准备工作、下载源码、编译安装、配置服务等,并与使用 RPM 包安装进行了对比,帮助读者根据需求选择合适的方法。编译源码安装虽然复杂,但提供了更高的定制性和灵活性。
304 2
|
3月前
|
关系型数据库 MySQL Linux
在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤
【10月更文挑战第7天】本文介绍了在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。同时,文章还对比了编译源码安装与使用 RPM 包安装的优缺点,帮助读者根据自身需求选择合适的方法。
77 3
|
3月前
|
Rust 前端开发 关系型数据库
Tauri 开发实践 — Tauri 集成本地数据库
本文介绍了在 Tauri 框架中集成本地数据库的几种方案,包括直接绑定 SQLite、使用第三方数据库库和使用 tauri-plugin-sql-api 插件。最终选择了 tauri-plugin-sql-api,因为它集成简单、支持多种数据库类型,并且与 Tauri 框架深度整合,提升了开发效率和安全性。文章详细介绍了如何安装和使用该插件,以及如何编写核心代码实现数据库操作。
291 2
|
3月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
59 2

热门文章

最新文章