今天手把手的带大家实现一款答题类的题库小程序,如果着急的话,可以直接去看文末源码下载与项目部署。
考研题库小程序云开发实战,完整版提供给大家学习。题库小程序,基于云开发的微信答题小程序,软件架构是微信原生小程序+云开发。
一、项目预览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 的位置;注意:这里只解读我这个考研刷题小程序项目里面使用到的配置项,