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

摘要：全国节能宣传周知识答题活动若想在短期内，进行安全生产知识的传播，那么答题无疑是有效方式之一。答题活动小程序v3.0，基于微信原生小程序+云开发实现。主要包含六大功能模块页面，首页、活动规则页、排行榜页、答题页、结果页、答题记录页。适用于节能知识宣传、学法普法教育、消防安全知识宣传、交通安全答题、网络安全知识竞赛、安全生产知识学习、五四青年节答题活动、有奖答题等应用场景。

<h3 style="text-align: left; margin-bottom: 10px;">全国节能宣传周知识答题活动</h3> 若想在短期内，进行安全生产知识的传播，那么答题无疑是有效方式之一。 答题活动小程序v3.0，基于微信原生小程序+云开发实现。主要包含六大功能模块页面，首页、活动规则页、排行榜页、答题页、结果页、答题记录页。 适用于节能知识宣传、学法普法教育、消防安全知识宣传、交通安全答题、网络安全知识竞赛、安全生产知识学习、五四青年节答题活动、有奖答题等应用场景。 <h3 style="text-align: left; margin-bottom: 10px;">活动主题</h3> 节能降碳，绿色发展 <h3 style="text-align: left; margin-bottom: 10px;">活动形式</h3> 线上知识竞赛 <h3 style="text-align: left; margin-bottom: 10px;">竞赛内容</h3> 绿色环保节能知识、垃圾分类知识 <h3 style="text-align: left; margin-bottom: 10px;">活动规则</h3> 1、本次知识竞赛活动采用微信公众号平台小程序在线答题模式。 2、知识竞赛题库共计200题，其中单选题100道、多选题50道、判断题50道。 3、每次答题题库随机抽取10道题目，答题时间为5分钟，每天限制3次答题机会，每次答题满80分即可抽奖。 4、排名规则，按单次得分，得分相同的按答题用时排。 <h3 style="text-align: left; margin-bottom: 10px;">奖项设置</h3> 奖品设置：话费50元、30元、20元、10元不等； <h3 style="text-align: left; margin-bottom: 10px;">参与方式</h3> 在活动文章点击链接进入，即可参与答题。<img src="http://img2.94zc.com:1799/uploads/2023-05-20/1684576588024.png" style="width: 100%; margin-bottom: 20px;"> <h3 style="text-align: left; margin-bottom: 10px;">软件架构</h3> 微信原生小程序 后端云开发（数据库、云函数、存储） CMS后台管理系统 <h3 style="text-align: left; margin-bottom: 10px;">功能结构</h3> 排行榜页 活动规则页 答题记录页 微信授权登录 题库随机抽题 查询历史成绩 首页、答题页、结果页、注册登录页、题库学习等 实现页面间跳转功能 实现转发分享答题成绩功能 实现用云开发实现查询题库功能 实现动态题目数据绑定 答题交互逻辑 切换下一题 提交答卷保存到云数据库集合 系统自动判分 答题结果页从云数据库查询答题成绩 支持单选、多选、判断题型 错题集 查看所有用户的答题记录-管理员 查看用户的答题成绩以及答题情况-管理员 后台数据监控-管理员 后台管理-管理员 v3.0版本升级： 1）拓展功能： 注册登录页 √ 题库学习 √ 错题集 √ 查看所有用户的答题记录-管理员 √ 查看用户的答题成绩以及答题情况-管理员 √ 后台题库管理系统-管理员 √ 题目增删查改-管理员 √ 2）升级功能： 排行榜页排名机制，优化为取个人最佳成绩进行排名√ 答题页、结果页界面，增加展示微信头像和昵称栏目√ 由仅支持单选，升级为支持单选、判断、多选题型 √ 各界面及功能一些小优化√ <h3 style="text-align: left; margin-bottom: 10px;">关键代码</h3> 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 }); }) }<img src="http://img2.94zc.com:1799/uploads/2023-05-20/1684576588660.png" style="width: 100%; margin-bottom: 20px;">举报/反馈