手把手教你搭建消防安全答题小程序-在结果页中实现从云数据库查询成绩

简介: 手把手教你搭建消防安全答题小程序-在结果页中实现从云数据库查询成绩

手把手教你搭建答题活动小程序系列,第一阶段为界面设计篇,分别描写了答题功能解读、以及页面搭建,含首页、答题页、结果页。

第二阶段为功能交互与云开发篇,分别描写了实现页面间跳转功能、转发分享答题成绩功能、用云开发实现查询题库功能、将题目数据动态显示到答题页面、答题以及提交答卷到云数据库。

上述那些文章,可以去我的主页翻看。而这一篇,则在结果页中实现从云数据库查询成绩,并展示在页面。

软件架构:微信原生小程序+云开发
戳源码地址,获取源码,版本持续迭代中...

数据库字段解读
可以看见,答题成绩的数据库集合,存了5个字段,记录id、答题者的openid、提交答卷的时间createDate、得分totalScore、错题数wrong。
image.png

页面生命周期回调
onLoad,页面加载的时候,触发执行发送请求的函数。options是接收通过路由携带的参数。

Page({
data: {

totalScore: null, // 得分
wrong: 0, // 错题
zql: null // 正确率

},

onLoad(options) {

// 查看答题成绩
this.getExamResult(options.id);

}
})
云数据库查成绩
这里使用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
  })

})
获取到答题数据后,计算正确率,并使用setData将得分、答对、答错、正确率显示到页面。

页面效果截图
代码运行以及页面效果展示

image.png

微信小程序“防火安全知识专项学习与竞答”
image.png
微信小程序“防火安全知识专项学习与竞答”

本章小结
麻雀虽小五脏俱全。至此,一个完整的答题活动小程序就基本实现了。

大家可以动手跟着一步一步学习搭建,或者获取源码快速部署上线吧!所见即所得,这样就拥有了属于自己的答题小程序。

后面,还会有升级版,答题记录、查询历史答题成绩、微信授权登录、获取微信头像和昵称、登录页、活动页、排行榜等等更多功能。未完,待续......

相关文章
|
2月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
52 0
|
2月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
58 0
|
1月前
|
存储 小程序 关系型数据库
原生小程序 获取手机号并进行存储到mysql数据库
原生小程序 获取手机号并进行存储到mysql数据库
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
64 3
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
82 0
|
2月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
58 0
|
2月前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
47 0
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的速达物流信息查询微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的速达物流信息查询微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
21天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
45 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目