您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

Serverless实战驾校小程序【考题练习】二

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-10-12 10:34热度:

准备工作做完后,今天我们从核心模块,分类与题目练习开始做。由于开发时间比较紧,这里主要写实习思路,与核心代码。

image.png

页面一、首页

这里我们主要优先实现功能逻辑,UI后面调整,我们用iview 拖一个大致结构的页面。

这里用了以下组件

 

  1. 
    {
    "usingComponents": {
    "i-tab-bar": "../../dist/tab-bar/index",
    "i-tab-bar-item": "../../dist/tab-bar-item/index",
    "i-grid": "../../dist/grid/index",
    "i-grid-item": "../../dist/grid-item/index",
    "i-grid-icon": "../../dist/grid-icon/index",
    "i-grid-label": "../../dist/grid-label/index",
    "i-tabs": "../../dist/tabs/index",
    "i-tab": "../../dist/tab/index"
    }
    }

 

页面二、专项练习页面

这个页面,我们从数据库里取出数据,首先建立好数据表,这个表结构昨天有讲。

我们导入一个CSV格式数据到表里

CSV文件内容

bSubjects,title  1,时间题  1,速度题  1,距离题  1,罚款题  1,记分题  1,标志题  1,标线题  1,手势题  1,信号灯  1,灯光题  1,仪表题  1,装置题  1,路况题  1,酒驾题  1,动画题  1,情景题 

然后我们取出这里的数据,在小程序里面显示

核心代码

 

  1. // 库文件
  2. const getQuestionTypeList=()=>{
  3. return new Promise((resolve, reject) => {
  4. const query = wx.Bmob.Query('questionType');
  5. query.find().then(res => {
  6. console.log(res)
  7. resolve(res)
  8. }).catch(err=>{
  9. console.error(err)
  10. reject(err)
  11. })
  12. });
  13. }
 

  1. // 页面js文件
  2. wechatApp-questions2/pages/topic/index.js
  3. onLoad(e){
  4. wx.u.getQuestionTypeList().then(r=>{
  5. console.log(r,`k`)
  6. this.setData({
  7. result:r
  8. })
  9. })
  10. },
 

  1. // wxml文件
  2.  
  3. <i-panel title="题型列表" hide-top>
  4. <!-- <view style="padding: 15px;">头部距离为 0 的 Panel</view> -->
  5. <i-row>
  6. <i-col wx:for="{{result}}" span="12" i-class="col-class">
  7. <i-panel bindtap="handleTabClick" data-id="{{item.objectId}}" class="cell-panel-demo" title="">
  8. <i-cell title="{{item.title}}" value="">
  9. <i-icon type="enterinto" slot="icon" />
  10. </i-cell>
  11. </i-panel>
  12. </i-col>
  13. </i-row>
  14. </i-panel>

首页点击到分类,分类点击到题目页面,下一个是题目页面,这个页面是整个项目的核心, 所以的题目都在这个页面进行计算,判断。

页面三、答题页面  这个页面会是最复杂的一个页面, 涉及到,计时,判断、记录历史等等操作。

之前只想到模拟考试,没考虑到这种按照顺序练习, 第二次进入,可以继续之前的题目练习。 这里建个学习表,记录他的顺序练习相关数据,以下是数据表暂定的结构

学习表 learning

第一步:还是一样,用iview 复制出对应组件

第二步:查询出此类别的题目, 并且默认显示一道题,点击下一题,显示数组下一个元素

第三步:先做单选题,点击选择,判断是否正确, 如果正确,记录到结果对象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ,0代表回答错误,1正确

第四步:点击下一题计算进度条位置,判断当前是否选择了题目,否则提示请选择结果。

目前做到这个一步,明天继续。