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

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

一、项目预览

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是默认的全局样式。把全局的样式的代码都写到这里：

...

基于微信小程序云开发实现考研题库小程序项目（一篇到底）