头图

微信小程序云开发实战-答题积分赛小程序

接口联调篇:积分排名页实现积分由高到低排名功能

项目技术栈

微信原生小程序+云开发。为什么选择微信原生小程序进行开发呢?因为能够直接应用它的云开发能力吖。
我这里主要使用了云开发能力中的小程序端SDK,说白了就是在javascript中就能直接操作数据库。

业务需求

答题小程序中的网络安全知识竞答活动,每人每天答题机会不限次数,积分由高到低进行排名。奖项设一等奖2名、二等奖5名、三等奖10名、优秀奖20名。所以需要借助实现积分排行榜来完成这个业务需求。
图片

技术要点

1、Collection指数据库集合引用。
2、Collection.where(condition: Object): Collection指定查询条件,返回带新查询条件的新的集合引用。
3、Collection.orderBy(fieldPath: string, string: order): Collection
1)指定查询排序条件。
2)order 只能取 asc 或 desc。
3)同时也支持按多个字段排序,多次调用 orderBy 即可,多字段排序时的顺序会按照 orderBy 调用顺序先后对多个字段排序。
4、Collection.get(): Promise<Object>
1)获取集合数据,或获取根据查询条件筛选后的集合数据。
2)小程序端:如果没有指定 limit,则默认且最多取 20 条记录。
3)小程序端兼容 Callback 风格调用。

关键代码

积分排行榜实现,按答题积分totalScore字段进行排降序,也就是totalScore越大越靠前。

getRankList() {
    // 连接云数据库
    const db = wx.cloud.database();
    // 获取集合的引用
    const user = db.collection('user');
    // 数据库操作符
    const _ = db.command;
    // 数据库集合的查询操作实例
    user
    .where({                          // 根据条件过滤文档
      totalScore: _.exists(true)
    })
    .orderBy('totalScore', 'desc')    // 指定查询排序条件,totalScore按降序排序
    .get()                            // 操作定义完成,类似发起ajax异步请求    
    .then(res => {
      // 获取集合数据,或获取根据查询条件筛选后的集合数据。
      let data = res.data || [];
      
      // 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
      this.setData({
        rankList:data
      });
    })
  },

实现结果

图片

图片

本篇小结

作为小程序创作者,排行榜无论是在答题小程序中,还是别的应用场景中,实在是太常见了。所以,关于排行榜的一点延展的思考。需要根据自身产品采用适合的设计方式,结构上避免散乱、信息上避免过多的信息干扰。对于许多产品而言,榜单对于商业化有着不小的商业价值。比如网络安全知识答题、交通安全答题、 消防安全知识宣传、 安全生产知识学习、学法普法、五四青年节等答题活动或有奖竞答等应用场景。
图片


Monstart
24 声望5 粉丝

weChat:meng674782630,请备注:sf