线上答题小程序: 微信答题小程序开发学习与实践入门记录整理分享（内附源码）
OnlineAnswerMiniProgram
开发答题类微信小程序实践详细记录
前言：这是一个简单的考试类微信小程序，基本上可以满足在线考试的需求。 纯前端，数据写好在data.json文件里，每一次考试结果利用缓存存储。
一、 试题数据
新建小程序项目时，我们看到已经有index和logs页，先不要管他。我们新增一个和pages文件夹同级的data文件夹，新建json.js文件存放我们的数据。
[图片]
1. 数据格式：
[代码]// data/json.js
var json = {
"001": [
{
"question": "爸爸的爸爸叫什么?",
"option": {
"A": "爷爷",
"B": "姥爷",
"C": "叔叔",
"D": "伯伯",
"E": "阿姨",
"F": "老舅"
},
"true": "A", // 正确答案
"type": 1, // 类型 1 单选 2 多选
"scores": 10, // 分值
"checked": false // 默认没有选中
},
{
"question": "妈妈的姐妹叫什么?",
"option": {
"A": "姥姥",
"B": "奶奶",
"C": "叔叔",
"D": "大姨",
"E": "小姨",
"F": "老舅"
},
"true": ["D", "E"], // 正确答案
"type": 2, // 类型 1 单选 2 多选
"scores": 10, // 分值
"checked": false // 默认没有选中
},
... ...
],
"002": [
// ...数据格式同上
]
}
[代码]
2. 导出数据
[代码]// data/json.js
var json = {...}
module.exports = {
questionList: json
}
[代码]
定义完数据后，要在json.js最后面使用module.exports导出。
3. 导入数据
[代码]// app.js
// 导入数据
var jsonList = require('data/json.js');
App({
globalData: {
questionList: jsonList.questionList // 拿到答题数据
}
})
[代码]
在app.js里使用require导入数据，并且定义在全局变量globalData里。将来使用的时候：
[代码]首先 var app = getApp();
然后 app.globalData.questionList 就可以拿到导出的json数据。
[代码]
因为我们不只有一套试卷，前面在json里定义了两个数组：001和002。之后可以通过
[代码]app.globalData.questionList["001"][代码]选择性导入试题数据。
二、 home页面（考试入口）
在pages文件夹里新增home页面。首页授权登录后点击跳转到该页面，页面上有两个模块：001和002。点击模块进行对应的考试。
1. 主要代码
home.wxml
[代码]view class="page">
请选择试题：/view>
001/view>/view>
002/view>/view>
/view>
[代码]
home.js
[代码]Page({
data: {
},
onLoad: function (options) {
},
toTestPage: function (e) {
let testId = e.currentTarget.dataset['testid'];
wx.navigateTo({
url: '../test/test?testId=' + testId
})
}
})
[代码]
2. 页面
[图片]
三、 答题页 和 答题结束页
不管是001还是002试题，都是共用一套页面模板。在这个页面要实现答题（含：每次进入试卷试题都要乱序排列）、评分、查看错题、记录答题数据（时间/试题id/得分）的功能。
1. 实现简单的问答页面 (test页面)
首先新建一个test页面文件夹，在test.wxml文件里编写我们的答题模板。第一步先不要考虑乱序排列和记录答题功能，只先实现简单的选择答案和下一题、评分的功能。
test.wxml 解析
[图片]
答题模板很简单，主要由题目、答案（单选/多选）、下一题（提交）、退出答题组成。
test.wxml 代码
[代码]
{{index+1}}、{{questionList[index].question}}
{{questionList[index].type==1?"【单选】":"【多选】"}}
（{{questionList[index].scores}}分）
/view>
/view>
