【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日志并进行多维度分析。
目录
相关文章
|
22天前
|
JSON 小程序 JavaScript
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
微信小程序制作 购物商城首页 【内包含源码】
|
15天前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
40 1
|
21天前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
24天前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
2月前
|
监控 小程序 安全
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(2)
小程序提供便捷的鲜花选购和配送服务,汇聚全球优质鲜花品种,确保新鲜送达。用户可轻松挑选花束,享受个性化配送,并通过地图功能查看配送位置。此外,物流功能实时更新,保证鲜花安全快速到达。代码示例展示了地图和物流信息的页面布局与交互实现。 ### 配送与物流功能亮点 1. **地图功能**:使用`map.wxml`, `map.wxss`, 和 `map.js` 实现定位与导航,确保精准配送。 2. **物流追踪**:通过`logistics.wxml`, `logistics.wxss`, 和 `logistics.js` 显示详细物流状态,提供流畅的用户体验。
50 1
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(2)
|
29天前
|
存储 小程序 关系型数据库
原生小程序 获取手机号并进行存储到mysql数据库
原生小程序 获取手机号并进行存储到mysql数据库
|
2月前
|
小程序 JavaScript Java
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
63 8
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
54 7
|
2月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
101 0
【微信小程序开发实战项目】——个人中心页面的制作
|
2月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
79 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)