全国节能宣传周知识答题活动

若想在短期内，进行安全生产知识的传播，那么答题无疑是有效方式之一。

答题活动小程序v3.0，基于微信原生小程序+云开发实现。主要包含六大功能模块页面，首页、活动规则页、排行榜页、答题页、结果页、答题记录页。

适用于节能知识宣传、学法普法教育、消防安全知识宣传、交通安全答题、网络安全知识竞赛、安全生产知识学习、五四青年节答题活动、有奖答题等应用场景。

活动主题

节能降碳，绿色发展

活动形式

线上知识竞赛

竞赛内容

绿色环保节能知识、垃圾分类知识

活动规则

1、本次知识竞赛活动采用微信公众号平台小程序在线答题模式。

2、知识竞赛题库共计200题，其中单选题100道、多选题50道、判断题50道。

3、每次答题题库随机抽取10道题目，答题时间为5分钟，每天限制3次答题机会，每次答题满80分即可抽奖。

4、排名规则，按单次得分，得分相同的按答题用时排。

奖项设置

奖品设置：话费50元、30元、20元、10元不等；

参与方式

在活动文章点击链接进入，即可参与答题。

软件架构

微信原生小程序
后端云开发（数据库、云函数、存储）
CMS后台管理系统

功能结构

排行榜页
活动规则页
答题记录页
微信授权登录
题库随机抽题
查询历史成绩
首页、答题页、结果页、注册登录页、题库学习等
实现页面间跳转功能
实现转发分享答题成绩功能
实现用云开发实现查询题库功能
实现动态题目数据绑定
答题交互逻辑
切换下一题
提交答卷保存到云数据库集合
系统自动判分
答题结果页从云数据库查询答题成绩
支持单选、多选、判断题型
错题集
查看所有用户的答题记录-管理员
查看用户的答题成绩以及答题情况-管理员
后台数据监控-管理员
后台管理-管理员

v3.0版本升级：

1）拓展功能：

注册登录页 √
题库学习 √
错题集 √
查看所有用户的答题记录-管理员 √
查看用户的答题成绩以及答题情况-管理员 √
后台题库管理系统-管理员 √
题目增删查改-管理员 √

2）升级功能：

排行榜页排名机制，优化为取个人最佳成绩进行排名√
答题页、结果页界面，增加展示微信头像和昵称栏目√
由仅支持单选，升级为支持单选、判断、多选题型 √
各界面及功能一些小优化√

关键代码

1、微信授权登录，获取微信头像昵称

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{
   
   {avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

2、转发分享功能

页面内发起转发。通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage 事件，相关组件：button。

onShareAppMessage: function () {
    // return custom share data when user share.
  },

3、小程序页面栈最多十层

问题：假设小程序内有20个问题页面，答完上一个问题后wx.navigateTo到下一个问题页面，那么到第十题时，你会发现wx.navigateTo跳转不到下一个页面。

分析：这是因为使用wx.navigateTo跳转会把当前页面保存到页面栈中，而小程序页面栈最多十层。

解决：使用wx.redirectTo或wx.reLaunch替代。

4、从题库中随机抽题

// 获取题库-函数定义
  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
      });
    })
  }

5、成绩由高到底排名

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
      });
    })
  }