今天手把手的带大家实现一款答题类的题库小程序，如果着急的话，可以直接去看文末源码.下载与项目部署。

考研题库小程序云开发实战，完整版提供给大家学习。题库小程序，基于云开发的微信答题小程序，软件架构是微信原生小程序+云开发。

首页

答题页

结果页

我的页

排行榜页

答题历史页

登录页

使用指引页

实现页面间跳转功能

微信授权登录

获取微信头像和昵称等

按科目分类

题库随机抽题算法

支持单选、判断、多选

实现用云开发实现查询题库功能

实现动态题目数据绑定

答题交互逻辑

切换下一题

答题进度显示

提交答卷保存到云数据库集合

系统自动判分

答题结果页从云数据库查询答题成绩

实现转发分享答题成绩功能

查询历史成绩

取最佳成绩进行排名

推荐分享

在线客服

意见反馈

小程序[考研刷题小博士]

小程序[考研刷题小博士]

①使用了swiper组件实现轮播图效果，里面使用了image标签展示图片；

②按科目分类的题库；

①对应四个科目，按照得分由高到底进行排名；

②如果同一个人答题多次，取个人最佳成绩进行排名；

①展示个人信息，头像、昵称；

②功能按钮区域，考试记录、推荐给好友、联系客服、意见反馈、使用指引；

①展示当前答题者的信息，头像、昵称；

②答题总数，以及当前答题进度；

③题型、题目、选项、切换下一题按钮；

①展示考生信息，头像、昵称；

②科目、题目总数、得分、答对题数、答错题数、正确率；

③再打一次、返回首页、分享成绩给好友；

答题科目、答题时间；

可以进行微信授权登录获取头像、昵称，也可以自定义填写头像、昵称；

自定义使用指引或说明；

题库管理（新增、查看、搜索、编辑、删除、导入、导出）-管理员权限

云开发数据库，题目数据表、答题记录数据表、答题成绩数据表；

详细讲解手把手搭建教程，我已在前段时间免费分享给大家，请大家移步我的主页翻翻，查阅历史文章吧；

目前源码和配套资源文件暂时不免费，毕竟创作不易，如果有需要的同学可以私聊蒙哥，拿米来换；

另外，蒙哥提供配套解答服务。当然了，知识付费时代蒙哥解答是要米的，毕竟食不饱力不足才美不外现。你在学习过程中有任何开发问题，或者工作中遇到任何前端问题，都可以来找蒙哥。

目前可以解答如下问题：

小程序方面的问题；

云开发方面的问题；

毕设方面的问题；

html+css+JavaScript方面的问题；

前端开发的问题；

面试找工作方面的问题等。

1.1、 注册小程序账号

到微信公众平台进行注册微信小程序账号。建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

1.2 、获取APPID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。

点击开发管理，选择开发设置下面的appid：

1.3、 下载开发工具

选择开发工具进行下载，并安装：

2.1、 打开微信开发者⼯具

注意：第⼀次登录的时候，需要扫码登录。

2.2、 新建⼩程序项⽬

点击小程序选择添加

2.3、 填写项目信息

注意：后端服务选择“微信云开发”

下面让我们来看看新建小程序应用，初始化后的考研刷题小程序项目目录结构吧。

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json ，另一种是页面的page.json。

2.1、全局配置app.json

小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以考研刷题小程序为栗子看看，以下是一个包含了部分常用配置选项的app.json：

pages：页面路径列表；

window：用于设置小程序的状态栏、导航条、标题、窗口背景色；

tabBar：底部 tab 栏的表现；

sitemapLocation：指明 sitemap.json 的位置；

注意：这里只解读我这个考研刷题小程序项目里面使用到的配置项，更多配置项自行去技术官网查看。

2.1.1、pages

文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

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 按数组的顺序排序，每个项都是一个对象。而在考研刷题小程序项目里面，我配置了三个，分别是题库、排名、我的。

2.2、页面配置

每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。

注意：这里只解读我这个考研刷题小程序项目里面使用到的配置项，更多配置项自行去技术官网查看。

例如，首页的配置index.json：

backgroundColor：窗口的背景色；

backgroundTextStyle： 下拉 loading 的样式，仅支持 dark / light；

navigationBarBackgroundColor：导航栏背景颜色；

navigationBarTitleText：导航栏标题文字内容；

navigationBarTextStyle：导航栏标题颜色，仅支持 black / white；

1.1、view标签和text标签

我们现在做的是微信小程序，所以，要使用它的语法。WXML（WeiXin Markup Language）是微信小程序框架设计的一套标签语言。

注意！不要被官方的很官方的概念唬住了，其实就是简单的标签。不信，咱们举个栗子类比看看。相信大多数小伙伴，即使没有做过开发的都听过，html的div和span。

view其实相当于div，都是块级元素，也就是会换行的；

text相当于span，都是行内元素，也就是不会换行的。

动手试试吧，在index.wxml直接使用这两个标签就明白了。

什么？还有点迷糊？这样看呢！

保姆级演示，明白了“view是块级元素，会换行的；text是行内元素，不会换行的”这句话了没？

或许我以后不会这么讲了，因为实在是太太太基础了。简单的事情，只说一遍。

不明白不要紧，就像公式，你不用知道是怎么来的，你只要记住公式是怎么用的就行了。

毕竟咱们做的是应用层面的开发嘛，它提供什么API，知道怎么用的，然后直接去使用就行了。如果能举一反三，就更好了。

1.2、数据绑定

在js的data中定义变量：

在 wxml中 直接使用：