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

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

一、项目预览

1、页面结构

• 首页
• 答题页
• 结果页
• 我的页
• 排行榜页
• 答题历史页
• 登录页
• 使用指引页

2、功能结构

• 实现页面间跳转功能
• 微信授权登录
• 获取微信头像和昵称等
• 按科目分类
• 题库随机抽题算法
• 支持单选、判断、多选
• 实现用云开发实现查询题库功能
• 实现动态题目数据绑定
• 答题交互逻辑
• 切换下一题
• 答题进度显示
• 提交答卷保存到云数据库集合
• 系统自动判分
• 答题结果页从云数据库查询答题成绩
• 实现转发分享答题成绩功能
• 查询历史成绩
• 取最佳成绩进行排名
• 推荐分享
• 在线客服
• 意见反馈

3、小程序端

效果预览：

小程序

小程序

1）首页

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

②按科目分类的题库；

2）排名页

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

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

3）我的页

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

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

4）答题页

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

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

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

5）结果页

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

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

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

6）答题记录页

答题科目、答题时间；

7）登录页

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

8）使用指引页

自定义使用指引或说明；

4、CMS后台

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

1）题库列表

2）条件筛选搜索

3）关键词搜索

4）新增题目

5）编辑题目

5、数据库

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

二、学习资料

1、搭建教程

详细讲解手把手搭建教程，我已在前段时间免费分享给大家；

2、问题解答(●’◡’●)

目前可以解答如下问题：

• 小程序方面的问题；
• 云开发方面的问题；
• 毕设方面的问题；
• 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:"Hello World",
      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大概一致。在考研刷题小程序项目中用于多项选择题。

六、题库放到云开发数据库

8、新建内容

在创建完题库的内容模型后，我们可以点击“内容集合”下的题库菜单，开始管理数据库中的题目数据。我们可以点击新建按钮，添加一个新的题目。

如下所示，填完表单后，点击创建后，即可生成一条新的题目数据。

 

9、管理内容

在题库内容列表页，我们可以对已有的题库内容进行管理，如编辑、删除题目，导入新的题目数据等。