当前位置:首页 > 法律热点

各位普及一下节能环保常识,2021全国节能宣传周节能知识大闯关

阅读:

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

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

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