Serverless实战驾校小程序分享

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

image.png

页面一、首页

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

这里用了以下组件

1. {
2. "usingComponents": {
3. "i-tab-bar": "../../dist/tab-bar/index",
4. "i-tab-bar-item": "../../dist/tab-bar-item/index",
5. "i-grid": "../../dist/grid/index",
6. "i-grid-item": "../../dist/grid-item/index",
7. "i-grid-icon": "../../dist/grid-icon/index",
8. "i-grid-label": "../../dist/grid-label/index",
9. "i-tabs": "../../dist/tabs/index",
10. "i-tab": "../../dist/tab/index"
11. }
12. }

页面二、专项练习页面

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

我们导入一个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.  
10.  
11.  
12.  
13.  
14.  

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

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

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

学习表 learning

第一步：还是一样，用iview 复制出对应组件

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

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

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

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

作者：微信小程序开发
链接：https://www.jianshu.com/p/19283a793c60
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。