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

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

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 才能关闭提示框，表示已经加载完毕。

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