评论

在线答题小程序代码解读

开源小程序[从业资格题库]代码解读

在线答题小程序开发的诱因

先来说说我为什么开发在线答题小程序?

九月份的时候,在小程序技术交流的微信群里,有一位朋友扔了一张下面的截图,问大家意见。

这个小程序就是在线答题类小程序,这对个人来说,完全可以,没有UGC。

其实,像我们在四五线小城市,每个月三四千的工资已经很好了,而且是被动收入,睡后收入,睡觉的睡。

我当时看到这个信息,很心动,我想每个人都会心动的,当天晚上就在开发者工具上初始化好了项目。

跟很多人一样接下来一段时间,一直没有下文,直到最近,我身边有个在证券公司的朋友,一起吃饭的时候,说起下个周末就要考试了,而且是第二次,不知道能不能通过,很是郁闷,因为在证券公司如果不能通过证券从业资格考试,原则上是不允许转正的。

晚上下班后,我便开始设计数据库结构,题目信息表,科目表(为了扩展其他资格考试),题目类型表(维护单选、多选、判断),答题历史记录表,四张核心表足够了。


接下来我们进入小程序开发正题


小程序采用框架


未采用第三方框架,使用小程序原生框架,未引入任何UI组件库

接口采用PHP YII2框架

小程序实现的功能


## 目前小程序已经实现的功能有:

  1. 选择科目在线答题,答题可以选择单题模式还是列表模式

  2. 答题结束实时展示分数

  3. 答题过程,对过题操作进行提示

  4. 查看分数结束可以查看正确答案

  5. 答题历史纪录查询,可以查阅当时做题情况

也就是说作为一个在线答题系统,基本功能都已闭环。

开发小程序过程中遇到的问题


第一个问题:radio取值问题

在单选选择题的时候,用到以下两个表单组件




radio-group
https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
radio
https://developers.weixin.qq.com/miniprogram/dev/component/radio.html


默认的radio组件事件


wxml文件


<radio-group class="radio-group" bindchange="radioChange">
    <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
     <text>{{item.value}}</text>
    </radio></radio-group>


js文件


Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'FRA', value: '法国' },
    ]
  },
  radioChange: function (e) {
    console.log('radio发生change事件,携带value值为:', e.detail.value)
  }
})


没错,用的就是官方示例代码,我们看到在选择的时候,默认e.detail.value,只能取一个字符串,当时遇到的第一个问题就在这里,如果把这整个选项的信息提取出来,能简单的用{{JSON.stringfy(item)}}吗,当然不可以,因为原生小程序本身不支持。


当时在社区查到解决方案具体可以参考
[单选框radio除了可以传value可以传其他的值吗?]
https://developers.weixin.qq.com/community/develop/article/doc/0006ce9771c528ed7b89a6f485bc13


方案就是引入wxs,之前看官方文档,每次到这里,因为不知道这是干什么的,以及解决什么问题,现在明白了,想了解更多关于wxs的内容,也请移步下面两篇文档
[微信小程序wxs有什么用?]
https://developers.weixin.qq.com/community/develop/article/doc/0008888a01c69872b689448a051013


[小程序里面精度计算问题]
https://developers.weixin.qq.com/community/develop/article/doc/0000ae30ea4da802b989540175b013


第二个问题:每次10道题目是如何选择的

在答题的时候,每次会展示10个题目,这10个题目是从当前科目题库中,随机抽取10个,在题库足够大的情况下,基本可以保证每次进来答题的10个题目跟前面的答题都是不一样的。


小程序截图















代码路径


前端小程序代码,请移步下面

https://gitee.com/jgl1210/myexamapp


后端接口用的PHP,代码链接如下,由于我几个小程序都用这个PHP服务,项目代码要远比该小程序的PHP代码要多一些。

https://gitee.com/jgl1210/phpapp


如果大家细心,数据库也是可以在线登录的,如果遇到问题,可以微信我。



适用人群


该开源代码适用于小程序初学者,以及大学做在线答题小程序的毕业设计时可以参考。

扫码体验


微信小程序搜索 从业资格题库或者直接扫码



最后一次编辑于  2019-12-08  
点赞 15
收藏
评论

2 个评论

  • 村姑翠花
    村姑翠花
    2019-12-07

    由于社区的文章编辑功能有些问题,编辑的时候,markdown已经不起作用了,格式有点乱,大家先忍忍吧。

    2019-12-07
    赞同 3
    回复
  • one for all
    one for all
    2019-12-07

    精度计算问题,你没有解释项目中哪里涉及到了。还有这种项目充其量就是日常作业,离毕业设计差远了。


    2019-12-07
    赞同 2
    回复
登录 后发表内容