当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 10:28:27 HTML

一步步教你搭建一个消防安全答题小程序——实现从云端数据库查询结果在结果页的构建,包括首页、答题页、结果页。第二阶段为功能交互和云端开发,分别描述页面跳转、转发分享答题结果等功能,利用云端开发实现查询题库、在答题页面动态展示题目数据、答题、并将答卷提交至云端数据库。以上文章,大家可以到我的主页浏览。本文在结果页面从云端数据库查询结果,并展示在页面上。软件架构:微信原生小程序+云开发戳源码地址,获取源码,版本不断迭代中...可以看到数据库字段的解释,答题结果的数据库集合,保存5个字段,记录id,答题者的openid,提交答题卡的时间createDate,分数totalScore,错题数。页面生命周期回调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=>{letexamResult=res.data;let{wrong,totalScore}=examResult;this.setData({totalScore,wrong,zql:(20-wrong)/20*100})})获取答案数据后,计算正确率,使用setData在页面显示得分、正确答案、错误答案、正确率。页面效果截图代码运行及页面效果展示本章小结麻雀虽小,五脏俱全。至此,一个完整的答题小程序就基本实现了。可以一步步学习搭建,也可以获取源码在线快速部署!所见即所得,让您拥有自己的答题小程序。后期会有升级版,答题记录,查询历史答题结果,微信授权登录,获取微信头像昵称,登录页面,活动页面,排行榜等功能。待续......