用死记硬背的方法学习的学生，面对桌上堆积成厚厚的书本，是否感觉鸭梨山大呢，想着教育却面临着学习成本不小问题，是否感觉各种不便呢，如果对编程代码有感兴趣，不妨试试做一个自己的在线答题系统，这里可以用微信小程序项目来实现哦。

制作思路，将书上讲得各种的重点，摘录下并写到一个文档中，然后经过构建脚本处理，生成一个题库，放到一个托管题库文件的站点中，用小程序去请求后台获取题库，

打开微信开发工具，选择小程序，创建一个项目，

例如项目名称为miniprogram-answer，然后选择以下，再确定创建

AppID 使用自己的测试号

不使用云服务

JavaScript - 基础模板

创建三个页面

在小程序首页上，创建三个页面，通过底部的选项卡来管理，

在项目下有个app.json文件，可以修改配置，在这里添加页面底部的选项卡，如下代码

"tabBar": {"list": [{"text": "科目","pagePath": "pages/tab1/tab1","iconPath": "static/icon_floder.png","selectedIconPath": "static/icon_floder.png"},{"text": "答卷","pagePath": "pages/tab2/tab2","iconPath": "static/icon_floder.png","selectedIconPath": "static/icon_floder.png"},{"text": "我的","pagePath": "pages/tab3/tab3","iconPath": "static/icon_floder.png","selectedIconPath": "static/icon_floder.png"}]
}

修改后点击保存，开发工具会自动创建好底部选项卡对应的三个页面文件

第一个页面

看看第一个页面，文件位置在pages/tab1/tab1，

这个页面用于展示各种科目，和最近更新的信息，

在页面布局文件中tab1.wxml，添加布局，显示如下

在一个页面配置tab1.json文件中，可以看到，配置如下

{"usingComponents": {"carousel":"/components/carousel/carousel","grid-menu":"/components/grid-menu/grid-menu","group-list":"/components/group-list/group-list"}
}

页面用上面的三个自定义组件即可完成布局，它们分别是

carousel 轮播图

grid-menu 格子菜单

group-list 分组列表

第二个页面

看看第二个页面，文件位置在pages/tab2/tab2，

这个页面用于展示用户的最近，或选择打开查看过的题目，

在页面布局文件中tab2.wxml，添加布局，显示如下

列表项是一个文件夹，点击展开，可显示里面的文件列表，
这个页面只用了group-list分组列表组件，类似手风琴组件的效果

第三个页面

看看第三个页面，文件位置在pages/tab3/tab3，

用于展示自己的，答题及格的结果，和总成绩，

在页面布局文件中tab3.wxml，添加布局，显示如下

这个页面用的是一个user-card为用户名片组件，还有一个group-list分组列表组件展示成绩

分包加载

其它如内页，多分支页面，以及多页面，都可以放到分包中，

可按需加载，减少小程序加载时间，

接下来，创建一个分包，需要在配置文件app.json添加一个分包信息，代码如下

"subPackages": [{"root": "package1","pages": ["pages/index/index","pages/answer/answer"]}
]

点击保存后，开发工具会在项目下自动创建一个分包文件夹package1

选题列表页面

在分包文件夹中，创建一个选题列表页面，文件在package1/pages/index/index，

当用户点击其中一个科目后，例如点击电子科目，进入的页面就是选题列表页面，如下图

页面用到了一个搜索框，还有一个自定义组件group-list展示列表，

答题页面

在分包文件夹中，再创建一个答题页面，文件在package1/pages/answer/answer，

当用户选择一个题目后，例如点击计算机基础知识题，进入的页面就是答题页面，如下图

页面布局是用了表单组件：form,radio,checkbox,button多个输入组件组合的，并不复杂，
答题页面可以有单选题，多选题，填空题，
在标题栏更新倒计时

后台数据

上面的页面都讲完了，有自信可以做出一个一样的来，但是，页面的数据都是从哪里来的呢

请求数据

当然是从远程服务器获取的，可以想象它是用浏览器访问网络信息，需要先知道它的访问地址，

在文件app.js中添加请求的数据方法，代码如下

/*** 请求数据方法
*/
request(options) {const req = (complete) => {wx.request({complete,url: `https://gitcode.net/zs1028/resource_mp_answer/-/raw/master/${options.filename}?inline=false`,fail: options.fail,success(res) {switch(res.statusCode){case 200:options.success(res.data);break;case 404:default:options.fail({ errMsg:'资源未找到' })}}})};if (options.showLoading) {wx.showLoading({title: options.showLoading instanceof String ? options.showLoading : '请求中',success:() => req(() => wx.hideLoading())})}else req()
},

请求方法request()和微信小程序的API wx.request()用法是一致的，
只是有一点不同，url应换成filename资源文件名(包括路径)，
如果想改用自己的题库，把其中链接替换成自己管理的gitcode项目地址即可

继续在文件app.js中添加点击方法navigateToAnswerPage()，用于打开答题页面，代码如下

navigateToAnswerPage(item) {wx.navigateTo({url: `/package1/pages/answer/answer?name=${item.key}&value=${item.value}`,})
}

上面所讲得两个方法写好了，在其它的页面上就可以调用这个方法，加载数据和打开答题页面

管理后台

后台数据都放在这里的，点此 resource_mp_answer 查看，可以看到数据都是json文件，

数据放在托管的网站Gitcode中，可方便之后的管理和维护，无须花费租个服务器，降低了成本，

由于数据默认是公开的，放在托管的网站中任何人都能访问和复制，
所以，私有的数据（项目）是不能公开访问和使用的，设置简单，

温馨提示

托管网站是用于托管代码的，不知道后期会不会限制托管资源（可能认为是漏洞），暂时目前它是仍可使用的

关于项目

就写到这里，看到这里，读者对答题的实现思路是否清晰了呢，

有小程序开发基础的话，自己可以尝试实现一个吧，

关于题库资源的整理，
在读学生有可能很需要实现用这个辅助学习，边学边更新学习资料，就当记学习笔记一样使用，考前复习；
这对在校教师也很有帮助吧，毕竟个人的力量有限，教师可以组织让多个学生一起参与共建一个题库资源，共享题库资源，提高学习效率，对考试有信心。

来看下答题小程序项目的运行效果，动图如下，

动图中有删减，仅部分展示

项目源码

关于项目源码，已放在资源类别下，需要找一找，点此查找答题-小程序-项目源码，(在手机上访问可能找不到，请用电脑浏览器查看)，请放心下载，感谢支持。

【答题】在线答卷-答题系统的微信小程序开发流程详解相关推荐

【数独】数独游戏-微信小程序开发流程详解
有没有玩过数独游戏呢,听说,它是一个能训练大脑思维的棋盘类游戏,游戏规则很简单,通过小程序来实现很容易,非常适合对数独游戏逻辑感兴趣的同学,选择它开发入门吧. 准备会使用微信开发者工具, 有Java ...
【拼图】拼图游戏-微信小程序开发流程详解
还记得小时候玩过的经典拼图游戏吗,上小学时,在路边摊用买个玩具,是一个正方形盒子形状,里面装的是图片分割成的很多块,还差一块,怎么描述好呢,和魔方玩具差不多,有没有听说叫二维的魔方,这里用小程序把它实 ...
【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得,小时候上学路边买的透明铅笔盒,里面内嵌了一个小球,它用重力可从起点滚动到终点,对小朋友来说是感觉有趣的,在这个游戏的基础上,弄一款微信小程序的迷宫探索游戏试试,在不同关卡的迷宫中解开机关与谜 ...
【飞行棋】多人游戏-微信小程序开发流程详解
可曾记得小时候玩过的飞行棋游戏,是90后的都有玩过吧,现在重温一下,这是一个可以二到四个人参与的游戏,通过投骰子走棋,一开始靠运气,后面还靠自己选择,谁抢占先机才能赢,还可以和小伙伴们一起玩,狭路相逢 ...
【十字绣】传统手艺-微信小程序开发流程详解
还记得小时候看过母亲的十字绣吗,易学易懂,就是用专用的绣线和十字格布,通过平面坐标计找出位置,对照专用的图案进行刺绣,可作出心中所想的画,奈何所需材料成本不小,这里用小程序简单模拟十字绣,喜欢的话可用 ...
【跳棋】跳棋游戏-多人游戏-微信小程序开发流程详解
看到跳棋游戏,一个2到6人可一起玩的游戏,于是联想起,自己上小学时候陪同学们玩过的弹珠游戏,是不是跟跳棋游戏很像呢,看了跳棋玩法,有兴趣就研究,这里把跳棋游戏给弄出来了,想知道地图怎么画,对此感兴趣的 ...
【国际象棋】棋盘游戏-微信小程序开发流程详解
与中国象棋类似的,还有国际象棋,知道有人爱玩,于是凭着好奇心,网上研究了一下,跟中国象棋有相似之处,玩法是有些许不一样,不知道象棋最早出于谁之手呢,抽空做一做,最终完成,玩一玩看着还不错吧,这里给讲一 ...
微信小程序支付流程详解
原创 Dr Hydra 码农参上 2020-11-22 11:00 收录于合集#微信开发技术3个最近在工作中接入了一下微信小程序支付的功能,虽然说官方文档已经比较详细了,但在使用过程中还是踩了不少的 ...
微信小程序退款流程详解
原创 Dr Hydra 码农参上 2020-11-29 11:00 收录于合集#微信开发技术3个在上一篇中我们介绍了微信小程序的支付流程,这一篇接着讲一下小程序的退款流程,首先看一下官方给出的介绍: ...

【答题】在线答卷-答题系统的微信小程序开发流程详解