• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

投票评选活动小程序连接云数据库,读取评选人物列表

武飞扬头像
Monstar_0°-蒙
帮助1

投票评选活动小程序连接云数据库,读取评选人物列表

1、首先在云开发控制台的数据库,创建voteWorks集合;

2、在voteWorks数据集合,设计表的数据结构;

3、配置好数据访问权限;

4、在小程序端连接云数据库,读取评选人物列表;

关键代码如下:

// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const voteWorks = db.collection('voteWorks');
// 数据库操作符
const _ = db.command;

// 显示 loading 提示框
wx.showLoading({
  title: '拼命加载中'
});
// 数据库集合的聚合操作实例
voteWorks
  .where({
  _id: _.exists(true)
})
  .orderBy('name', 'desc')
  .get()
  .then(res => {
  // 获取集合数据,或获取根据查询条件筛选后的集合数据。
  let data = res.data || [];

  // 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
  this.setData({
    participantList:data
  });

  // 隐藏 loading 提示框
  wx.hideLoading();
})

5、通过接口获取到数据库的真实数据后,通过this.setData()将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示;

页面渲染效果:

学新通

6、为了增强用户体验,我们通常会在请求数据的时候,wx.showLoading()显示 loading 提示框,目的是告诉用户目前的状态是请求数据中,让用户耐心等待一下;

7、页面渲染结束后,需主动调用 wx.hideLoading 才能关闭提示框,表示已经加载完毕。

投票评选活动小程序连接云数据库,读取评选人物列表,到渲染页面的整个过程,大致是这样。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhibecca
系列文章
更多 icon
同类精品
更多 icon
继续加载