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

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

答题活动小程序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
      });
    })
  }