今天手把手的带大家实现一款答题类的题库小程序,如果着急的话,可以直接去看文末源码下载与项目部署。
考研题库小程序云开发实战,完整版提供给大家学习。题库小程序,基于云开发的微信答题小程序,软件架构是微信原生小程序+云开发。
一、项目预览
1、页面结构
- 首页
- 答题页
- 结果页
- 我的页
- 排行榜页
- 答题历史页
- 登录页
- 使用指引页
2、功能结构
- 实现页面间跳转功能
- 微信授权登录
- 获取微信头像和昵称等
- 按科目分类
- 题库随机抽题算法
- 支持单选、判断、多选
- 实现用云开发实现查询题库功能
- 实现动态题目数据绑定
- 答题交互逻辑
- 切换下一题
- 答题进度显示
- 提交答卷保存到云数据库集合
- 系统自动判分
- 答题结果页从云数据库查询答题成绩
- 实现转发分享答题成绩功能
- 查询历史成绩
- 取最佳成绩进行排名
- 推荐分享
- 在线客服
- 意见反馈
3、小程序端
效果预览:
1)首页
①使用了swiper组件实现轮播图效果,里面使用了image标签展示图片;
②按科目分类的题库;
2)排名页
①对应四个科目,按照得分由高到底进行排名;
②如果同一个人答题多次,取个人最佳成绩进行排名;
3)我的页
①展示个人信息,头像、昵称;
②功能按钮区域,考试记录、推荐给好友、联系客服、意见反馈、使用指引;
4)答题页
①展示当前答题者的信息,头像、昵称;
②答题总数,以及当前答题进度;
③题型、题目、选项、切换下一题按钮;
5)结果页
①展示考生信息,头像、昵称;
②科目、题目总数、得分、答对题数、答错题数、正确率;
③再打一次、返回首页、分享成绩给好友;
6)答题记录页
答题科目、答题时间;
7)登录页
可以进行微信授权登录获取头像、昵称,也可以自定义填写头像、昵称;
8)使用指引页
自定义使用指引或说明;
4、CMS后台
题库管理(新增、查看、搜索、编辑、删除、导入、导出)-管理员权限
1)题库列表
2)条件筛选搜索
3)关键词搜索
4)新增题目
5)编辑题目
5、数据库
云开发数据库,题目数据表、答题记录数据表、答题成绩数据表;
二、学习资料
1、搭建教程
详细讲解手把手搭建教程,我已在前段时间免费分享给大家,请大家移步我的主页翻翻,查阅历史文章吧;
2、配套源码
目前源码和配套资源文件,如果有需要的同学可以来公~众~号【木番薯科技】;
3、问题解答(●’◡’●)
另外,我提供配套解答服务。你在学习过程中有任何开发问题,或者工作中遇到任何前端问题,都可以来公~众~号【木番薯科技】。
目前可以解答如下问题:
- 小程序方面的问题;
- 云开发方面的问题;
- html+css+JavaScript方面等的问题;
- 前端开发的问题;
- 面试找工作方面的问题等。
三、项目创建
1、环境准备
1.1、 注册小程序账号
到微信公众平台进行注册微信小程序账号。建议使用全新的邮箱,没有注册过其他小程序或者公众号的。
1.2 、获取APPID
由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的 APPID ,所以在注册成功后, 可登录,然后获取APPID。
点击开发管理,选择开发设置下面的appid:
1.3、 下载开发工具
选择开发工具进行下载,并安装:
2、初始化项目
2.1、 打开微信开发者⼯具
注意:第⼀次登录的时候,需要扫码登录。
2.2、 新建⼩程序项⽬
点击小程序选择添加
2.3、 填写项目信息
注意:后端服务选择“微信云开发”
四、项目结构以及详解
1、项目目录结构
下面让我们来看看新建小程序应用,初始化后的考研刷题小程序项目目录结构吧。
2、小程序配置文件
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json ,另一种是页面的page.json。
2.1、全局配置app.json
小程序根目录下的app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以考研刷题小程序为栗子看看,以下是一个包含了部分常用配置选项的app.json:
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/test/test",
"pages/result/result",
"pages/history/history",
"pages/rank/rank",
"pages/guide/guide",
"pages/my/my"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "考研刷题小博士",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#aaa",
"selectedColor": "#ffa517",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "/image/sy2.png",
"selectedIconPath": "/image/sy2-a.png",
"text": "题库"
},
{
"pagePath": "pages/rank/rank",
"iconPath": "/image/zxly2.png",
"selectedIconPath": "/image/zxly2-a.png",
"text": "排名"
},
{
"pagePath": "pages/my/my",
"iconPath": "/image/wd2.png",
"selectedIconPath": "/image/wd2-a.png",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap.json"
}
- pages:页面路径列表;
- window:用于设置小程序的状态栏、导航条、标题、窗口背景色;
- tabBar:底部 tab 栏的表现;
- sitemapLocation:指明 sitemap.json 的位置;
注意:这里只解读我这个考研刷题小程序项目里面使用到的配置项,更多配置项自行去技术官网查看。
2.1.1、pages
文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。
"pages": [
"pages/index/index",
"pages/home/home",
"pages/test/test",
"pages/result/result",
"pages/history/history",
"pages/rank/rank",
"pages/guide/guide",
"pages/my/my"
]
2.1.2、window
- backgroundColor:窗口的背景色;
- backgroundTextStyle: 下拉 loading 的样式,仅支持 dark / light;
- navigationBarBackgroundColor:导航栏背景颜色;
- navigationBarTitleText:导航栏标题文字内容;
- navigationBarTextStyle:导航栏标题颜色,仅支持 black / white;
2.1.3、tabbar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象。而在考研刷题小程序项目里面,我配置了三个,分别是题库、排名、我的。
"tabBar": {
"color": "#aaa",
"selectedColor": "#ffa517",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "/image/sy2.png",
"selectedIconPath": "/image/sy2-a.png",
"text": "题库"
},
{
"pagePath": "pages/rank/rank",
"iconPath": "/image/zxly2.png",
"selectedIconPath": "/image/zxly2-a.png",
"text": "排名"
},
{
"pagePath": "pages/my/my",
"iconPath": "/image/wd2.png",
"selectedIconPath": "/image/wd2-a.png",
"text": "我的"
}
]
}
2.2、页面配置
每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json的window中相同的配置项。
注意:这里只解读我这个考研刷题小程序项目里面使用到的配置项,更多配置项自行去技术官网查看。
例如,首页的配置index.json:
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "考研刷题小博士",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
- backgroundColor:窗口的背景色;
- backgroundTextStyle: 下拉 loading 的样式,仅支持 dark / light;
- navigationBarBackgroundColor:导航栏背景颜色;
- navigationBarTitleText:导航栏标题文字内容;
- navigationBarTextStyle:导航栏标题颜色,仅支持 black / white;
五、所用技术栈及知识讲解
1、模板语法
1.1、view标签和text标签
我们现在做的是微信小程序,所以,要使用它的语法。WXML(WeiXin Markup Language)是微信小程序框架设计的一套标签语言。
注意!不要被官方的很官方的概念唬住了,其实就是简单的标签。不信,咱们举个栗子类比看看。相信大多数小伙伴,即使没有做过开发的都听过,html的div和span。
div => view span => text
view其实相当于div,都是块级元素,也就是会换行的;
text相当于span,都是行内元素,也就是不会换行的。
动手试试吧,在index.wxml直接使用这两个标签就明白了。
<view> 马原 </view>
<view> 毛中特 </view>
<view>
<text> 思修 </text>
<text> 近代史 </text>
</view>
什么?还有点迷糊?这样看呢!
保姆级演示,明白了“view是块级元素,会换行的;text是行内元素,不会换行的”这句话了没?
或许我以后不会这么讲了,因为实在是太太太基础了。简单的事情,只说一遍。
不明白不要紧,就像公式,你不用知道是怎么来的,你只要记住公式是怎么用的就行了。
毕竟咱们做的是应用层面的开发嘛,它提供什么API,知道怎么用的,然后直接去使用就行了。如果能举一反三,就更好了。
1.2、数据绑定
在js的data中定义变量:
data:{
title:"考研题库小程序",
num:50,
isLogin:true,
user:{
nickName:"姑苏洛言",
age:20
},
isChecked:true
}
在 wxml中 直接使用:
<!-- 字符串类型 -->
<view>
{{title}}
</view>
<!-- 数字类型 -->
<view>
{{num}}
</view>
<!-- 布尔类型 -->
<view>
{{isLogin?'你好,xx会员':'请授权登录'}}
</view>
<view wx:if="{{isLogin}}">{{user.nickName}}</view>
<view wx:else="{{isLogin}}"> 请先登录 </view>
<!-- 使用bool类型充当属性check 字符串和花括号之间不要存在空格,否则会导致识别识别 -->
<checkbox checked="{{isChecked}}"></checkbox>
<!-- 对象类型 -->
<view>
昵称:{{user.nickName}},年龄{{user.age}}
</view>
再了解一下,其他一些基本运算。
<!-- 算数运算 -->
<view>{{a + b}}</view>
<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!-- 逻辑判断 -->
<view wx:if="{{length > 5}}"> 今日刷题挑战成功 </view>
<view wx:else>今日刷题挑战失败</view>
1.3、列表渲染
列表渲染,其实说白了就是我们说的数组循环。
列表渲染,关键字:
- wx:for
- wx:for-item
- wx:for-index
- wx:key
wx:for="{{list1}}"
wx:for-item="循环项的名字" => wx:for-item="item"
wx:for-index="索引项的名字" => wx:for-index="index"
"循环项的名字" 默认 = “item”
"索引项的名字" 默认 = “index”
值有两种: 1)当对数组对象做循环的时候,
list1:[{id:'1', name: '马原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]
wx:key="id" => item.id
2) 当数组是普通数组,
list1: ['马原', '毛中特', '思修', '近代史']
wx:key="*this"
index.js
Page({
data: {
// 普通数组
list1: ['马原', '毛中特', '思修', '近代史'],
// 对象数组的循环
list2: [
{id:'1', name: '马原'},
{id:'2', name: '毛中特'},
{id:'3', name: '思修'},
{id:'4', name: '近代史'}
]
}
})
index.wxml
<view>
<view>普通数组</view>
<view wx:for="{{list1}}" wx:key="*this">
{{index}} --- {{item}}
</view>
<view>======================</view>
</view>
<view>
<view>对象数组</view>
<view wx:for="{{list2}}" wx:key="id">
{{index}}:{{item.name}}--{{item.id}}
</view>
</view>
1.4、条件渲染
1)wx:if
if 、else、 else if 对应微信小程序分别为 wx:if、 wx:else、 wx:elif
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
2)hidden
在标签上直接加属性hidden
3)什么场景下使用哪一个?
当标签不是频繁的切换显示,优先使用wx:if 直接把标签从页面结构给移除掉;
当表示频繁的切换显示,优先使用hiddem 通过添加样式的方式来切换显示。
1.5、事件的绑定
1)绑定事件通过 bind+事件名; 2)定义事件的回调需要放在 js文件和data同层级。
.wxml
<view bindtap="handleTap">
{{num}}
</view>
.js
Page({
data: {
num: 0
},
// 声明了点击事件的回调
handleTap() {
let num = this.data.num;
num++;
this.setData({
num
})
}
})
2、样式WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语言,用于描述 WXML 的组件样式。 与 CSS 相比,
WXSS 扩展的特性有:
- 响应式长度单位 rpx
- 样式导入
2.1、app.wxss
app.wxss是默认的全局样式 。把全局的样式的代码都写到这里:
page{
background-color: aqua;
}
page 标签是页面最外层的标签。
2.2、其他样式
1)在wxss中 不支持 通配符 `*` 当我们要实现以下功能的时候,
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
只能够单个标签一个一个的定义了!!!
page,view,text{
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.3、小程序中的单位 rpx
功能和以前移动端的web中的`rem` 类似 ,`rpx`(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为`750rpx` 。 1)不管屏幕多宽 , 都是 `750rpx`; 2)不管手机屏幕多宽 都是 100% ;
2.4、样式导入
@import "../../styles/common.wxss";
通过@Import 引入,用的是相对路径。
3、生命周期
只是一个事件而已!! 只是会在特定的时候,会自动触发 。
分为两种:
1. 应用的生命周期 `app.js`;
2. 页面的生命周期 ;
一个微信小程序项目其实一个`应用`,一个应用里面可以拥有多个 `页面`。
3.1、应用的生命周期
看看考研刷题小程序项目中的app.js
App({
// 小程序在启动的时候 触发
onLaunch: function (options) {
// 当应用开始启动的时候,可以获取用户的一些信息
console.log("onLaunch");
},
// 小程序被展示 的时候触发
// 反复被触发
onShow: function (options) {
console.log("onShow");
},
// 小程序被隐藏的时候触发
onHide: function () {
console.log("onHide");
},
// 当应用出错了时候会 触发
// 在这里 捕获错误信息
// 把错误信息收集 - 发送ajax异步请求 发送到后台中
onError: function (msg) {
// msg :错误信息
console.log("onError");
console.log(msg);
},
// 当页面找不到了 就会触发了
onPageNotFound: function (options) {
},
// 应用的全局数据
globalData: {
title:"生命周期"
}
});
3.2、页面的生命周期
看看考研刷题小程序项目中的首页index.js
Page({
data: {
},
// 页面开始加载的时候触发
// 发送异步请求 获取数据来渲染页面
onLoad: function(options) {
console.log("onLoad");
},
// 页面标签都渲染完毕 才触发
onReady: function() {
console.log("onReady");
},
// 页面被 显示 页面切换-页面路由
onShow: function() {
console.log("onShow");
},
// 页面被隐藏
onHide: function() {
console.log("onHide");
},
// 页面被 卸载的时候 - 当页面切换的时候 使用了不同的 open-type 会关闭当前页面的
onUnload: function() {
// 可以关闭一些定时任务
console.log("onUnload");
},
// 当页面 下拉刷新的时候触发
// 在全局配置或者 页面配置中 手动开启 下拉刷新!!!
onPullDownRefresh: function() {
console.log("onPullDownRefresh");
},
// 上拉页面 上拉加载下一页数据
onReachBottom: function() {
console.log("onReachBottom");
},
// 当页面被转发的时候
onShareAppMessage: function() {
console.log("onShareAppMessage");
},
// 页面被滚动的时候
onPageScroll: function() {
console.log("onPageScroll");
},
// 当点击tabbar的时候触发
onTabItemTap:function(item) {
}
});
4、原生组件
在考研刷题小程序中,常用的原生组件:
4.1、view
视图容器,也就是块级元素。
4.2、text
文本标签,也就是行内元素。
1)text 组件内只支持 text 嵌套。
2)设置user-select属性,长按文本可选、复制。
3)可以对空格、回车进行解析显示。
4.3、image
1)默认的宽度和默认的高度 320 * 240。
2)内置懒加载 lazy-load。
3)mode 渲染模式:
- scaleToFill: 默认值。把图片内容,拉伸到相框的大小 。
- widthFix: 把图片变成了和以前web中的图片的渲染模式一样。web图片,当宽度改变的时候,高度会等比例的跟着改变。移动端开发 img width:100%。
- aspectFit: 等比例拉伸图片-内容,可能会导致,image相框留出空白。
- aspectFill: 等比例拉伸图片-内容,图片的内容会被截取(图片内容会撑满相框)。
4.4、button
按钮
4.5、radio
单选项目,在考研刷题小程序项目中用于单项选择题。
4.6、checkbox
多选项目,属性和单选radio大概一致。在考研刷题小程序项目中用于多项选择题。
六、题库放到云开发数据库
1、开通服务,创建表
首先需要开通云开发服务,然后创建环境,接着创建集合,以创建题库集合为例。我创建一个题库集合,然后录入题目,都是在云开发控制台可以操作的。
2、创建或导入题目
给题库表添加记录,也就是录入题目。有两种模式,默认模式和JSON模式。我这里使用默认模式录题。
3、配置权限、env
题目都录入或者导入之后,还要配置数据库权限,这样小程序前端就可以直接调用了。在app.js填写环境env。
七、前端使用SDK调用云数据库
1、实现从题库中随机抽取题目
// 获取题库-函数定义
getQuestionList() {
// 数据库集合的聚合操作实例
activityQuestion
.aggregate()
.match({ //类似于where,对记录进行筛选
true: _.exists(true)
})
.sample({
size: 20
})
.end()
.then(res => {
// 在控制台打印数据
console.log(res.list)
let data = res.list || [];
// 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
this.setData({
questionList:data
});
})
}
2、将用户的答题成绩保存到数据库
// 提交答卷
addExamRecord(){
wx.showLoading({
title: '提交答卷中'
});
let examResult = {
wrongList: this.data.wrongList,
wrong: this.data.wrong,
wrongListSort: this.data.wrongListSort,
chooseValue: this.data.chooseValue,
totalScore: this.data.totalScore
};
activityRecord.add({
data: {
...examResult,
createDate: db.serverDate()
}
}).then(res => {
// 跳转到答题结果页,查看成绩
wx.redirectTo({
url: '../results/results'
});
wx.hideLoading();
})
}
3、按答题成绩totalScore字段进行降序排序(totalScore越大越靠前)
getRankList() {
// 数据库集合的聚合操作实例
activityScore
.where({
_openid: _.exists(true)
})
.orderBy('totalScore', 'desc')
.get()
.then(res => {
// 获取集合数据,或获取根据查询条件筛选后的集合数据。
console.log('[云数据库] [排行榜] 查询成功')
console.log(res.data)
let data = res.data || [];
// 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
this.setData({
rankList:data
});
})
}
八、搭建CMS
1、入口
在答题小程序的云开发控制台,点击「更多」-「内容管理」;
2、开通
勾选同意协议后,点击确定;
3、填写账号密码
填写管理员账号及密码用于登录内容管理服务平台,点击「确定」完成开通。
4、点击访问地址
开通完成后,内容管理当前页面可看到内容管理的入口链接和相关信息。点击访问地址,即可在弹出的浏览器窗口中进行内容管理的相关配置。
5、登录CMS后台
云开发控制台-更多-内容管理页面中,点击「访问地址」即可进入知识竞赛小程序的内容管理界面。
打开内容管理( CMS )后,需使用账密登录,账号密码为开通时设置的管理员账号和密码。
6、创建项目
首先,我们需要点击新建项目下方的创建新项目按钮,创建一个名为知识竞答小程序,Id 为zsjdxcx的项目。
创建完项目后,点击项目卡片,进入项目的管理页面,我们会看到项目的欢迎页面。
7、创建或导入内容模型
我们需要建立一个内容模型,描述题目所具有的属性,如:题干,选项,正确答案,分值等。我到时会提供一个数据模型给你,一键导入即可。
8、新建内容
在创建完题库的内容模型后,我们可以点击“内容集合”下的题库菜单,开始管理数据库中的题目数据。我们可以点击新建按钮,添加一个新的题目。
如下所示,填完表单后,点击创建后,即可生成一条新的题目数据。
9、管理内容
在题库内容列表页,我们可以对已有的题库内容进行管理,如编辑、删除题目,导入新的题目数据等。
更多资料、资源、资讯可关注【木番薯科技】