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

2次阅读

共计 931 个字符,预计需要花费 3 分钟才能阅读完成。

手把手教你搭建答题流动小程序系列,第一阶段为界面设计篇,别离刻画了答题性能解读、以及页面搭建,含首页、答题页、后果页。

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

上述那些文章,能够去我的主页翻看。而这一篇,则在后果页中实现从云数据库查问问题,并展现在页面。

软件架构:微信原生小程序 + 云开发

戳源码地址,获取源码,版本继续迭代中 …

数据库字段解读

能够看见,答题问题的数据库汇合,存了 5 个字段,记录 id、答题者的 openid、提交答卷的工夫 createDate、得分 totalScore、错题数 wrong。

页面生命周期回调

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 将得分、答对、答错、正确率显示到页面。

页面成果截图

代码运行以及页面成果展现

本章小结

麻雀虽小五脏俱全。至此,一个残缺的答题流动小程序就根本实现了。

大家能够入手跟着一步一步学习搭建,或者获取源码疾速部署上线吧!所见即所得,这样就领有了属于本人的答题小程序。

前面,还会有升级版,答题记录、查问历史答题问题、微信受权登录、获取微信头像和昵称、登录页、流动页、排行榜等等更多功能。未完,待续 ……

正文完
 0