成都网站建设培训,wordpress 按钮连接在哪里设置,域名空间购买,找网站开发公司今天手把手的带大家实现一款答题类的题库小程序#xff0c;如果着急的话#xff0c;可以直接去看文末源码.下载与项目部署。考研题库小程序云开发实战#xff0c;完整版提供给大家学习。题库小程序#xff0c;基于云开发的微信答题小程序#xff0c;软件架构是微信原生小程…今天手把手的带大家实现一款答题类的题库小程序如果着急的话可以直接去看文末源码.下载与项目部署。考研题库小程序云开发实战完整版提供给大家学习。题库小程序基于云开发的微信答题小程序软件架构是微信原生小程序云开发。一、项目预览1、页面结构首页答题页结果页我的页排行榜页答题历史页登录页使用指引页2、功能结构实现页面间跳转功能微信授权登录获取微信头像和昵称等按科目分类题库随机抽题算法支持单选、判断、多选实现用云开发实现查询题库功能实现动态题目数据绑定答题交互逻辑切换下一题答题进度显示提交答卷保存到云数据库集合系统自动判分答题结果页从云数据库查询答题成绩实现转发分享答题成绩功能查询历史成绩取最佳成绩进行排名推荐分享在线客服意见反馈3、小程序端效果预览小程序[考研刷题小博士]小程序[考研刷题小博士]1首页①使用了swiper组件实现轮播图效果里面使用了image标签展示图片②按科目分类的题库2排名页①对应四个科目按照得分由高到底进行排名②如果同一个人答题多次取个人最佳成绩进行排名3我的页①展示个人信息头像、昵称②功能按钮区域考试记录、推荐给好友、联系客服、意见反馈、使用指引4答题页①展示当前答题者的信息头像、昵称②答题总数以及当前答题进度③题型、题目、选项、切换下一题按钮5结果页①展示考生信息头像、昵称②科目、题目总数、得分、答对题数、答错题数、正确率③再打一次、返回首页、分享成绩给好友6答题记录页答题科目、答题时间7登录页可以进行微信授权登录获取头像、昵称也可以自定义填写头像、昵称8使用指引页自定义使用指引或说明4、CMS后台题库管理新增、查看、搜索、编辑、删除、导入、导出-管理员权限1题库列表2条件筛选搜索3关键词搜索4新增题目5编辑题目5、数据库云开发数据库题目数据表、答题记录数据表、答题成绩数据表二、学习资料1、搭建教程详细讲解手把手搭建教程我已在前段时间免费分享给大家请大家移步我的主页翻翻查阅历史文章吧2、配套源码目前源码和配套资源文件暂时不免费毕竟创作不易如果有需要的同学可以私聊蒙哥拿米来换3、问题解答(●’◡’●)另外蒙哥提供配套解答服务。当然了知识付费时代蒙哥解答是要米的毕竟食不饱力不足才美不外现。你在学习过程中有任何开发问题或者工作中遇到任何前端问题都可以来找蒙哥。目前可以解答如下问题小程序方面的问题云开发方面的问题毕设方面的问题htmlcssJavaScript方面的问题前端开发的问题面试找工作方面的问题等。三、项目创建1、环境准备1.1、 注册小程序账号到微信公众平台进行注册微信小程序账号。建议使用全新的邮箱没有注册过其他小程序或者公众号的。1.2 、获取APPID由于后期调⽤微信⼩程序的接⼝等功能需要索取开发者的⼩程序中的 APPID 所以在注册成功后 可登录然后获取APPID。点击开发管理选择开发设置下面的appid1.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、windowbackgroundColor窗口的背景色backgroundTextStyle 下拉 loading 的样式仅支持 dark / lightnavigationBarBackgroundColor导航栏背景颜色navigationBarTitleText导航栏标题文字内容navigationBarTextStyle导航栏标题颜色仅支持 black / white2.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 / lightnavigationBarBackgroundColor导航栏背景颜色navigationBarTitleText导航栏标题文字内容navigationBarTextStyle导航栏标题颜色仅支持 black / white五、所用技术栈及知识讲解1、模板语法1.1、view标签和text标签我们现在做的是微信小程序所以要使用它的语法。WXMLWeiXin Markup Language是微信小程序框架设计的一套标签语言。注意不要被官方的很官方的概念唬住了其实就是简单的标签。不信咱们举个栗子类比看看。相信大多数小伙伴即使没有做过开发的都听过html的div和span。div viewspan text view其实相当于div都是块级元素也就是会换行的text相当于span都是行内元素也就是不会换行的。动手试试吧在index.wxml直接使用这两个标签就明白了。view 马原 /viewview 毛中特 /viewviewtext 思修 /texttext 近代史 /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会员:请授权登录}}
/viewviewwx:if{{isLogin}}{{user.nickName}}/viewviewwx:else{{isLogin}} 请先登录 /view!-- 使用bool类型充当属性check 字符串和花括号之间不要存在空格否则会导致识别识别 --checkboxchecked{{isChecked}}/checkbox!-- 对象类型 --view昵称{{user.nickName}}年龄{{user.age}}
/view再了解一下其他一些基本运算。!-- 算数运算 --view{{a b}}/view!-- 三元运算 --viewhidden{{flag ? true : false}} Hidden /view!-- 逻辑判断 --viewwx:if{{length 5}} 今日刷题挑战成功 /viewviewwx:else今日刷题挑战失败/view1.3、列表渲染列表渲染其实说白了就是我们说的数组循环。列表渲染关键字wx:forwx:for-itemwx:for-indexwx:keywx:for{{list1}}
wx:for-item循环项的名字 wx:for-itemitem
wx:for-index索引项的名字 wx:for-indexindex循环项的名字 默认 “item”
索引项的名字 默认 “index”值有两种 1当对数组对象做循环的时候list1:[{id:1, name: 马原},{id:2, name: 毛中特},{id:3, name: 思修},{id:4, name: 近代史}]wx:keyid item.id 2 当数组是普通数组list1: [马原, 毛中特, 思修, 近代史]
wx:key*thisindex.jsPage({data: {// 普通数组list1: [马原, 毛中特, 思修, 近代史],// 对象数组的循环list2: [{id:1, name: 马原},{id:2, name: 毛中特},{id:3, name: 思修},{id:4, name: 近代史}]}
})index.wxmlviewview普通数组/viewviewwx:for{{list1}}wx:key*this{{index}} --- {{item}}/viewview/view/viewviewview对象数组/viewviewwx:for{{list2}}wx:keyid{{index}}:{{item.name}}--{{item.id}}/view/view1.4、条件渲染1wx:ifif 、else、 else if 对应微信小程序分别为 wx:if、 wx:else、 wx:elifviewwx:if{{length 5}} 1 /viewviewwx:elif{{length 2}} 2 /viewviewwx:else 3 /view2hidden在标签上直接加属性hidden3什么场景下使用哪一个当标签不是频繁的切换显示优先使用wx:if 直接把标签从页面结构给移除掉当表示频繁的切换显示优先使用hiddem 通过添加样式的方式来切换显示。1.5、事件的绑定1绑定事件通过 bind事件名 2定义事件的回调需要放在 js文件和data同层级。.wxmlviewbindtaphandleTap{{num}}
/view.jsPage({data: {num: 0},// 声明了点击事件的回调handleTap() {let num this.data.num;num;this.setData({num})}
})2、样式WXSSWXSS( WeiXin Style Sheets )是⼀套样式语言用于描述 WXML 的组件样式。 与 CSS 相比WXSS 扩展的特性有响应式长度单位 rpx样式导入2.1、app.wxssapp.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 类似 rpxresponsive pixel: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx 。 1不管屏幕多宽 都是 750rpx 2不管手机屏幕多宽 都是 100% 2.4、样式导入import../../styles/common.wxss;通过Import 引入用的是相对路径。3、生命周期只是一个事件而已 只是会在特定的时候会自动触发 。分为两种1. 应用的生命周期 app.js2. 页面的生命周期 一个微信小程序项目其实一个应用一个应用里面可以拥有多个 页面。3.1、应用的生命周期看看考研刷题小程序项目中的app.jsApp({// 小程序在启动的时候 触发 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.jsPage({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文本标签也就是行内元素。1text 组件内只支持 text 嵌套。2设置user-select属性长按文本可选、复制。3可以对空格、回车进行解析显示。4.3、image1默认的宽度和默认的高度 320 * 240。2内置懒加载 lazy-load。3mode 渲染模式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});})}八、搭建CMS1、入口在答题小程序的云开发控制台点击「更多」-「内容管理」2、开通勾选同意协议后点击确定3、填写账号密码填写管理员账号及密码用于登录内容管理服务平台点击「确定」完成开通。4、点击访问地址开通完成后内容管理当前页面可看到内容管理的入口链接和相关信息。点击访问地址即可在弹出的浏览器窗口中进行内容管理的相关配置。5、登录CMS后台云开发控制台-更多-内容管理页面中点击「访问地址」即可进入知识竞赛小程序的内容管理界面。打开内容管理 CMS 后需使用账密登录账号密码为开通时设置的管理员账号和密码。6、创建项目首先我们需要点击新建项目下方的创建新项目按钮创建一个名为知识竞答小程序Id 为zsjdxcx的项目。创建完项目后点击项目卡片进入项目的管理页面我们会看到项目的欢迎页面。7、创建或导入内容模型我们需要建立一个内容模型描述题目所具有的属性如题干选项正确答案分值等。我到时会提供一个数据模型给你一键导入即可。8、新建内容在创建完题库的内容模型后我们可以点击“内容集合”下的题库菜单开始管理数据库中的题目数据。我们可以点击新建按钮添加一个新的题目。如下所示填完表单后点击创建后即可生成一条新的题目数据。9、管理内容在题库内容列表页我们可以对已有的题库内容进行管理如编辑、删除题目导入新的题目数据等。
