今天开始手把手的带大家实现一款答题类的小程序，如果着急的话，可以直接去看最后一章源码下载与项目部署
一，效果预览
小程序端
1，首页
可以看到我们首页有顶部轮播图，随机答题，分类答题
首页顶部轮播图
2，错题集
错题汇总
可以看到我们的错题集里有每个对应的错题汇总和错误个数
错题分类
错题复习
复习错题和题目解析
如果一个错题复习的差不多了，可以删除错题
3，个人中心
可以看到我们的个人中心里有具体用户信息，积分信息等
授权登陆
4，积分排名
5，题目分类
6，注册用户
答题和积分之前需要先注册用户，排名之前需要先注册用户
答题之前可以先注册用户再答题积分
用户还未注册时会有如下提醒
7，答题完成得分和错误个数
8，题型分类
单选题
多选题
判断题
9，分类答题和随机答题
也可以从题库里随机抽取题目答题
10，正确率和做题总数(新加)
云开发+cms后台
1，网页后台查看题库
2，管理后台编辑题目
3，错题集
4，用户管理
数据库和数据表
二，配套资料
1，讲解视频
视频课我会在B站免费提供给大家，欢迎关注，欢迎三连。
2，配套笔记
配套笔记分在线版和离线电子书版。 在线笔记会在石头哥的个人博客上免费给到大家，欢迎关注，笔记会持续更新。blog.csdn.net/qiushi_1990
3，支持石头哥😊
3-1，源码和配套资源获取
目前源码和配套资源暂时不免费，毕竟创作不易，如果有需要的同学可以私聊石头哥，拿米来换。
3-2，笔记电子书
笔记我也有整理一套电子书，大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点，当然也要拿米来换。
3-3，配置源码和资料
配套源码和资料需要拿米来换，或者成为石头哥的解答会员也可以获取。
4，问题解答(●'◡'●)
另外石头哥提供配套解答服务。当然了，知识付费时代石头哥解答是要米的，毕竟石头哥精力有限，石头哥也是要吃面包的。石头哥有推出包月，包年解答服务。你在学习过程中有任何问题，或者工作中遇到任何编程问题，都可以来找石头哥 石头哥目前可以解答如下问题
- 小程序方面的问题
- 云开发方面的问题
- Java，springboot，Javaweb方面的问题
- 毕设方面的问题
- 安卓app开发方面的问题
- html+css+JavaScript方面的问题
- 前端开发的问题
- 后端开发的问题
- 面试找工作方面的问题
三，项目创建
3-1，获取appid
我们获取小程序appid必须先去注册一个小程序，小程序的注册我小程序基础课里有讲过，大家可以去看下我基础课。
3-2，创建项目注意事项
为了保持一致，创建项目时选择使用云开发
3-3，去除项目里的无用文件
跟着石头哥的视频，把项目里一些无用的文件删除掉，保持代码简洁。
四，单选知识点
4-1，radio和radio-group实现单选答题
官方文档：developers.weixin.qq.com/miniprogram…
4-2，单选的wxml布局
<view>题目：这门课的老师是谁？</view>
<radio-group bindchange="radioChange">
<view>
<radio value="A" />
<text>A:编程小石头</text>
</view>
<view>
<radio value="B" />
<text>B:疯狂小石头</text>
</view>
<view>
<radio value="C" />
<text>C:大石头</text>
</view>
<view>
<radio value="D" />
<text>D:石头王</text>
</view>
</radio-group>
<button type="primary" bindtap="submit">提交答题</button>
效果如下：
4-3,单选的js页面如下
Page({
data: {
right: 'A',
select: ''
},
//用户选择了选项
radioChange(e) {
let select = e.detail.value
console.log('用户选择了', select)
this.setData({
select: select
})
},
//提交答题
submit() {
console.log('正确答案是', this.data.right)
console.log('用户选择了', this.data.select)
//当数据为空字符串或者null的时候，我们对这个数据取反
if (!this.data.select) {
console.log('执行了if')
wx.showToast({
icon: 'none',
title: '你还没有选择呢',
})
} else if (this.data.right == this.data.select) {
wx.showToast({
title: '您答对啦',
})
} else {
wx.showToast({
icon: 'none',
title: '您答错啦',
})
}
}
})
五，多选知识点
5-1，checkbox和checkbox-group实现多选
官方文档：developers.weixin.qq.com/miniprogram…
5-2,多选wxml页面的布局
<view>题目：这门课的老师是谁？</view>
<checkbox-group bindchange="checkboxChange">
<view>
<checkbox value="A" />
<text>A:编程小石头</text>
</view>
<view>
<checkbox value="B" />
<text>B:疯狂小石头</text>
</view>
<view>
<checkbox value="C" />
<text>C:大石头</text>
</view>
<view>
<checkbox value="D" />
<text>D:邱石</text>
</view>
</checkbox-group>
<button bindtap="submit" type="primary">提交答题</button>
效果如下
5-3,多选的js页面
由于我们多选的时候有很多种打分规则，这里以两个最常见的打分规则为例。
5-3-1,规则一，全部答对才对，打错一个即为错误
Page({
data: {
right: ['A', 'D'],
select: []
},
//获取用户选择了哪些选项
checkboxChange(e) {
console.log(e.detail.value)
this.setData({
select: e.detail.value
})
},
//提交
submit() {
//规则一，全部答对才对，打错一个即为错误
let arr = this.data.right
let len = arr.length //正确答案的个数
let arr2 = this.data.select
let len2 = arr2.length
console.log('正确答案', arr)
console.log('用户选择的答案', arr2)
if (len == len2) { //1，判断个数是否相同
console.log('用户答题得个数和正确选项得个数相同')
let rigthNum = 0
arr2.forEach(item => {
if (arr.indexOf(item) > -1) {
rigthNum++
console.log(item, '是正确选项')
}
})
//2，计算答对的个数
console.log('答对的个数', rigthNum)
//3，判断答对的个数是否等于答案的个数
if (rigthNum == len) {
console.log('闯关成功，彻底答对啦')
wx.showToast({
title: '答对啦',
})
} else {
console.log('答题失败')
wx.showToast({
icon: 'none',
title: '答错啦',
})
}
} else {
console.log('错误，选项个数不对')
wx.showToast({
icon: 'none',
title: '答错啦',
})
}
}
})
5-3-2,规则二，按答对的个数给分
我这里只把核心代码贴出来给到大家，具体的还请大家去看视频讲解。
/**
* 规则二，按答对的个数给分，比如3个答案答对一个给1分，答对3个给满分
* 1,判断答题个数是否小于答案个数 答1，2，3才给分
* 2，只答一个。要判断这一个是否在答案里，在的话就给1分
* 3，答二的时候：两个都在正确答案里，给2分
* 4，答三个的时候：三个全都在正确答案里，给3分
*/
guize2() {
let arr = this.data.right
let len = arr.length //正确答案的个数
let arr2 = this.data.select
let len2 = arr2.length
console.log('正确答案', arr)
console.log('用户选择的答案', arr2)
//第一关：答题的个数必须小于等于正确答案的个数
if (len2 <= len) {
console.log('答题个数小于等于正确答案，第一关闯过了')
let rigthNum = 0
arr2.forEach(item => {
if (arr.indexOf(item) > -1) {
rigthNum++
console.log(item, '是正确选项')
}
})
//第二关：用户选择的选项全部在正确答案里
if (rigthNum == arr2.length) {
console.log('第二关闯关成功，用户选择的选项都是对的')
//第三关：用户答了满分
if (rigthNum == len) {
console.log('第三关闯关成功，用户得了满分')
console.log("用户得分:100分")
} else if (rigthNum < len) {
//保留两位小数，并四舍五入 .toFixed(2)
let defen = rigthNum / len * 100 //33.33333333333333
defen = defen.toFixed(2)
console.log("用户得分:", defen)
}
} else {
console.log("用户得分:0分,虽然第一关闯关了，但是第二关没有闯关成功，所以0分")
}
} else {
console.log('答题个数大于了正确答案，判错')
console.log("用户得分:0分，一关都没有闯成功，你不0分谁0分")
}
}
六，多个题目
6-1，连续做多个单选题
我们上面的知识点每次只讲了一道题的作答，这里开始，我们就要实现多个题目的作答，然后可以记录错题，实现总体打分。
6-1-1，定义题目数据
我们这里以3个单选题为例，首先来看下数据
如上图所示，我们定义了三道选择题。我这里把数据放在配套资料的题库里了
大家只需要把题库里的‘3道单选题.txt’里的内容复制到js代码里，即可(视频是免费的，源码和资料需要拿米来换，毕竟创作不易，还望体谅)
6-1-2，编写wxml显示题目
显示效果如下
6-1-3，编写js代码的注意事项
我们在第一次进入页面时需要优先加载第一个题目
比如我这里连续做了3个题，效果图如下
接下来就在视频里详细教大家如何实现连续做题，并最终打分。所以听视频课的时候要认真了奥。
6-1-4,添加做题进度条
如下图所示，添加一个进度条，可以让用户查看当前做题进度。
这里用到了progress组件，对应的文档如下。
developers.weixin.qq.com/miniprogram…
七，错题集
7-1，错题集效果图
首先来看下效果图
7-2，具体代码
我这里直接把具体代码贴出来给到大家吧。代码不是很多
7-2-1，wxml页面
7-2-2，js页面
7-2-3，wxss样式
八，借助云开发把题库放到数据库
这一节我们就来开始把题目做成活得，做成活的就是把题库放到云端数据库。
8-1，新建项目
我们这一节来新建一个项目,可以参考我们前面笔记的第三章。
8-2，导入题库数据到数据库
8-2-1，首先创建一个数据表(集合)
8-2-2，下载题库
8-2-3，导入题库到数据表
如下图所示，点击导入
然后选择桌面下载好的question.json
等待导入完成即可
8-2-4，导入数据成功
可以看到我们对应的数据表里多了很多数据。
8-3，在页面加载数据库里的题目
8-3-1，首先不要忘记把数据表的权限改成下面这样
8-3-2，然后代码里编写数据请求
可以看到日志台的打印如下，并且17个题目也显示到了页面上。
详细的代码编写过程，可以跟着视频学习。
8-4，通过设置tabbar实现多页面
由于这段代码基本上是固定写法，所以我贴出来给到大家，大家后面再设置tabbar时，直接来笔记里复制代码即可。
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#ffb965",
"list": [{
"pagePath": "pages/race/race",
"text": "首页",
"iconPath": "images/home-no.png",
"selectedIconPath": "images/home-yes.png"
}, {
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/me-no.png",
"selectedIconPath": "images/me-yes.png"
}]
},
九，源码的下载和项目部署
1，下载源码
把源码下载到本地以后进行解压
2，导入项目
打开开发者工具，然后点击导入即可。
2-1，appid一定要用你自己的
获取appid，我们获取小程序appid前必须先去注册一个小程序，小程序的注册我小程序基础课里有讲过，大家可以去看下我基础课。
2-2，记得开通云开发
只有上面一步的appid是你自己的，才会有下面所示云开发的图标
3，初始化云开发环境
初始化云开发我云开发基础课里讲过很多遍，这门课前面的章节也讲过。
3-1，去云开发控制台获取环境id
3-2，app.js里的云开发环境id要换成你的
4，云函数
4-1，云函数目录选择环境
一定要和你的云开发环境id保持一致。如果选择环境时为空时就关闭开发者工具多重启几次。
4-2，部署云函数
把下面几个云函数都部署下
5，添加数据表
5-1，添加所需的集合
我们要在数据库里添加下面三个表（集合）
我这里说明下
- error 错题集
- questions 题库
- user 用户表
5-2，修改questions表的权限
一定要记得，一定要记得，一定要记得把questions表的权限改为：所有用户可读，仅创建者可读写
6，添加题库到questions表
我们源码里有一个下面所示的文件
里面是我存的题库，要记得这个目录的位置，等下导入数据的时候需要用到，如果实在不行，可以把这个题库复制到桌面。
6-1，导入数据
然后选择要导入的题库
等待导入
导入成功
到这里项目就完整的导入成功了。
7，运行项目
点击下编译就可以运行项目了
运行成功如下
注意；一定要记得改questions表的权限
十，cms网页后台
其实到上面的第9步项目就已经创建好了，如果你还想开通cms可视化网页后台，就来学习这章，如果不想开通cms可以忽略这章
10-1，进入云开发控制台开通内容管理(CMS)
如下图所示，直接点击开通内容管理(CMS)即可
点击完开通以后，会有如下弹窗，直接点击确定即可。不要被付费吓着，官方每月会送我们一定的免费额度的。学习得话基本上够用了。
上面点完确定后，我们只是开启了按量付费功能，因为cms得使用必须要开通按量付费才可以得。所以还要再点一次开通。如下图
点完开通后，会有如下弹窗，直接点击下一步即可。
然后我们需要设置登录内容管理后台得账号和密码，然后点击确定即可
然后我们就等待内容管理功能得开通了，需要等几分钟。
开通成功以后，我们就可以通过下面这个地址进入管理后台了。
10-2，登录Cms可视化管理后台
上面开通好以后，就可以通过后台地址登录管理后台了。如下
10-3，创建项目
第一次登录，我们还需要创建一个项目
自己输入项目名和项目id即可
然后点击进入刚刚创建的项目
到这里我们的cmd可视化网页管理后台就创建好了，下面教大家如何导入数据。
10-4，导入内容模型
我们上面创建好cms项目，打开后如下所示
这个时候点击内容模型，然后点击导入模型
然后点击确定即可
这样我们三个数据表就导入成功了，然后就可以对数据进行可视化管理了。
