基于云开发的答题活动小程序v2.0——排行榜页面：用云开发能力实现查询成绩并排名

前端

2023-11-18 06:15:48

作为一名程序猿，每天都在与代码打交道，学习过程中免不了要进行自我检测。基于这个初衷，我开发了一款答题小程序，方便大家随时随地自测。在此基础上，我们对小程序进行了升级，增加了排行榜页面，让大家可以一较高下，互相激励。

技术选型：微信原生小程序+云开发

小程序开发框架有很多，我们最终选择了微信原生小程序。为什么呢？因为微信原生小程序可以直接应用它的云开发能力。

云开发能力小程序端SDK，就是说，在 JavaScript 中就能直接操作云开发能力，这大大简化了开发流程。

查询成绩并排名

实现查询成绩并排名功能，我们需要用到云开发中的以下能力：

云函数： 用来查询成绩并计算排名。
数据库： 用来存储成绩数据。

具体实现

1. 云函数查询成绩并计算排名

// 云函数代码
exports.main = async (event, context) => {
  const { envId, query } = event;
  const db = cloud.database({ env: envId });
  const collection = db.collection('scores');

  // 查询成绩数据
  const res = await collection.aggregate()
    .match(query)
    .sort({ score: -1 })
    .end();

  // 计算排名
  let rank = 1;
  const rankedScores = res.data.map(item => {
    item.rank = rank++;
    return item;
  });

  return rankedScores;
};

2. 数据库存储成绩数据

// 小程序端代码
wx.cloud.callFunction({
  name: 'queryScores',
  data: {
    envId: envId,
    query: {} // 查询条件
  }
}).then(res => {
  // 处理成绩数据并更新排行榜
  const rankedScores = res.result;
  // ...
});