消防知识竞赛题库|基于云开发搭建消防安全知识答题活动小程序v3.0

在.js文件中配置

Page({
  onShareAppMessage(res) {
    return {
      title: '@你，快来参与消防安全知识答题活动吧~'
    }
  },
})

使用云开发实现查询题库功能

小程序端调用数据库的方法很简单。 我们可以把下面的代码放到一个风暴处理函数中，然后直接在页面的生命周期函数上执行。

虽然可以概括为三步：

1）首先使用wx.cloud.database()获取数据库的引用（相当于连接数据库）；

2）然后使用db.collection()获取集合的引用；

3）然后使用Collection.get获取集合中的记录。

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    questionList: [], // 题目列表
    index: 0 // 当前题目索引
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取题库-函数执行
    this.getQuestionList()
  },

  // 获取题库-函数定义
  getQuestionList() {
    // 显示 loading 提示框
    wx.showLoading({
      title: '拼命加载中'
    });
    // 构建查询条件
    activityQuestion.where({
      // 指定查询条件，返回带新查询条件的新的集合引用
      true: _.exists(true)
    })
    .get()
    .then(res => {
      // 获取集合数据，或获取根据查询条件筛选后的集合数据。
      console.log('[云数据库] [activityQuestion] 查询成功')
      console.log(res.data)
      let data = res.data || [];
      
      // 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
      this.setData({
        questionList:data,
        index: 0
      });

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

提交答题卡并保存在云端数据库

// 提交答卷
  addExamRecord(){
    wx.showLoading({
      title: '提交答卷中'
    });
    let examResult = {
      wrongList: this.data.wrongList,
      wrong: this.data.wrong,
      wrongListSort: this.data.wrongListSort,
      chooseValue: this.data.chooseValue,
      totalScore: this.data.totalScore
    };
    activityRecord.add({
      data: {
        ...examResult,
        createDate: db.serverDate()
      }
    }).then(res => {

      // 跳转到答题结果页，查看成绩
      wx.redirectTo({
        url: '../results/results'
      });

      wx.hideLoading();
    })
  }

实现在成绩页面查询云端数据库成绩

此处使用 Collection.doc(id:string) 获取集合中指定记录的引用。 该方法接受一个 id 参数，指定要引用的记录的 _id。

  activityRecord
    .doc(id)
    .get()
    .then(res => {
      let examResult = res.data;
      
      let { wrong, totalScore } = examResult;
      this.setData({
        totalScore,
        wrong,
        zql: (20-wrong)/20*100
      })
   })

利用云开发的聚合能力实现题库随机出题功能

// 获取题库-函数定义
  getQuestionList() {

    // 数据库集合的聚合操作实例
    activityQuestion
    .aggregate()
    .match({       //类似于where，对记录进行筛选
      true: _.exists(true)
    })
    .sample({
      size: 20
    })
    .end()
    .then(res => {
      // 在控制台打印数据
      console.log(res.list)

      let data = res.list || [];
      
      // 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
      this.setData({
        questionList:data
      });
    })
  }

排名页面实现答题结果排名

根据答题的totalScore数组倒序排序（totalScore越大越靠前）

getRankList() {
    // 数据库集合的聚合操作实例
    activityScore
    .where({
      _openid: _.exists(true)
    })
    .orderBy('totalScore', 'desc')
    .get()
    .then(res => {
      // 获取集合数据，或获取根据查询条件筛选后的集合数据。
      console.log('[云数据库] [排行榜] 查询成功')
      console.log(res.data)
      let data = res.data || [];
      
      // 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
      this.setData({
        rankList:data
      });
    })
  }

项目介绍

消防安全知识答题活动小程序v3.0，一款基于云端的答题活动小程序。

本项目技术栈基于ES2015+、WXML、WXSS、JavaScript、微信原生API和云开发。 所有请求数据使用云数据库小程序端SDK查询。 及早了解和学习这些知识，对于使用这个项目会有很大的帮助。

软件架构

部署教程概述

详细的分步图形教程，以及示例数据和数据模型。

1、下载开发者工具；

2.导出小程序项目；

3、打造云开发环境；

4、数据库配置；

5、部署云功能；

6、配置环境；

7.运行发布；

8.建立一个CMS；

注册小程序

您需要在本地安装陌陌开发者工具。

你还需要先注册一个小程序，得到一个AppID。 后续工作依赖小程序的AppId进行配置、部署、上线等一系列工作。

配置部署

1.导入项目

导出项目——填写AppId——选择“云开发”；

2. 创建并配置数据库

依次打开云开发-创建环境-创建数据库集合，并配置相应的数据权限；

活动题集

在activityQuestion集合中输入一个问题，该问题的数据结构如下：

具体操作、配置、样例数据等集合这里不再赘述。 详见【云端问答小程序v3.0-运行部署帮助文档】。

3、部署云函数

右键单击云函数并选择上传和部署。

具体操作步骤在此不再赘述。 详情请参考【云端答题小程序v3.0-运行部署帮助文档】。

4.配置环境env

在云开发控制台中，复制环境ID；

在app.js的env上粘贴保存；

5.运行

用于测试的模拟器或真实设备预览。

6.发布

上传-提交初审-初审通过后点击发布。 上线后，可以将答题小程序发送给其他人进行答题。

此处不再赘述，详见【云端问答小程序v3.0-运行部署帮助文档】。

内容管理系统构建

1、在答题小程序的云开发控制台中，点击“更多”-“内容管理”；

2.激活，勾选同意合同，点击确定；

3、账号密码。 填写管理员帐号和密码登录内容管理服务平台，点击“确定”完成激活。

4、激活完成后，在当前内容管理页面可以看到内容管理的入口链接和相关信息。 在弹出的浏览器窗口中点击访问地址配置内容管理。

5.登录答题系统内容管理后台

在云开发控制台-更多-内容管理页面，点击“访问地址”进入知识竞赛小程序的内容管理界面。

打开内容管理（CMS）后消防知识竞赛题库，需要使用账号密码登录，账号密码为激活时设置的管理员账号和密码。

注：如果内容管理平台独立于云控制台进行内容和权限管理，也可以将访问地址保存在浏览器中，方便后续直接访问，无需从云开发控制台进入。

6.创建项目

在开始管理内容数据之前，需要创建一个项目。 内容管理使用项目来定义不同类型的内容，以区分内容数据的用途并进行权限管理。

首先，我们需要点击新建项目下的Create New Project按钮，创建一个名为quiz applet，Id为zsjdxcx的项目。

创建项目后，点击项目卡片进入项目的管理页面，我们会听到项目的欢迎页面。

7.导入模型

这里省略了数据模型。 详见【云端问答小程序v3.0-运行部署帮助文档】。

管理内容

在题库内容列表页面，我们可以对已有题库的内容进行管理，比如编辑删除题目，导出新题数据等。

新内容

创建题库内容模型后，我们可以点击“题库”下的题库菜单，开始管理数据库中的题库数据。 我们可以点击新建按钮来添加一个新主题。

如下图，填好表格后，点击创建消防知识竞赛题库，生成一个新的题目数据。

线上知识竞赛