评论

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

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

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

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

一、项目预览

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、管理内容

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

更多资料、资源、资讯可关注【木番薯科技】

最后一次编辑于  2023-03-21  
点赞 0
收藏
评论
登录 后发表内容