uniapp答题考试框架总结

我是独自开发的微信公众号一个考试系统,用的是uniapp框架,这里我对框架进行了一个接口的封装,我们这里后端把appId 以及uid 相关微信授权的信息都是后端处理的,到我这里我只拿到一个token, 后台校验。
在这里我做的是验证是,是否为微信打开的,便于开发,我就用到了natapp来测试开发

判断是不是微信客户端打开 这里是后端给我的授权信息地址,他们会重定向到我的页面把token值扔在地址栏上面

			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				//由于是启动页面,所以设置个延迟 1.5s后再进入授权页面
				setTimeout(function() {
					// 在进入主页之前获取权限调用接口存一下token
					// var url = ""; 
					// window.location.href = url;
				}, 1500)
			} else {
				alert("请在微信客户端打开链接")
			}

我从地址栏上拿token,很简单,他们给的格式是这种:https://xxxx.com?token=xxxx,uniapp自带方法

  onLoad(option){
    this.token=option.token
  }

关于权限 是否登陆 我是我自己封装的接口(文章最下面我会放我的模板地址的),而且我们这里后台是用header接收token的,这个需要你跟后台一块商议。看愿不愿意浪费两分钟时间给你返回一个报错,如果token 错的时候 或者是token过期的时候返回一个状态码 以这个状态码判断 错或者过期的时候直接给他返回到启动页面,让他重新授权获取token,获取完token以防丢失,我这边是存在了localStorage用的时候uni.getStorageSync(‘token’)获取,然后在封装的接口里直接把token封装进去 每次调用都会去localStorage拿token 给后台不用你自己每次都往header传
ps:封装的接口在plugins目录下/读取的baseUrl是从commponents里的config.js里动态获取的
基本上你拿了这个框架把页面的东西删掉就行了,接口你直接用就好了使用方法;别忘了在Vue上挂载一下方法

main.js下

import Request from './plugins/request/index'
Vue.prototype.$http = Request();

使用方法如下

this.$http.request({
						url: '/time', //请求地址
						method: '', //请求类型 我接口请求方法默认设置的是post因为后台都是post 我就不用写menthod了
						// params: {},//设置QueryString [Object] 如果需要以QueryString格式就用这个传参
						// data:{}, //请求的参数 [Object]
						// header:{} //请求的header token我已经在方法里弄了 我一般只写一个url 和传参的data
					}).then(res => {
							console.log(res)
							}).catch(err => {
							console.log(err);
						})
					},

另外uniapp点击某个数据复制标签内容的数据 下载ican-H5Api(我下面带的模板地址里都有)

getWeChatId(val) {
				uni.setClipboardData({
					data: val,
					success: function(data) {
						console.log(data);
					},
					fail: function(err) {},
					complete: function(res) {}
				})
				uni.getClipboardData({
					success: function(data) {
						uni.showToast({
						    title: '复制成功',
						    duration: 1000
						});
					},
					fail: function(err) {},
					complete: function(res) {}
				})
			}

在这里插入图片描述
我在这里也封装了一个格式化时间的组件(我之前文章有写过 去翻一下)里面都有写方法上面也有使用方法

我这里是做的答题 (以及对答题 选择完之后进行选择答案的判断 错误是红色背景 对的话是绿色的)
以及收藏的颜色和答题卡答题的状态转换判断 选中的当前题目是浅蓝色

在这里插入图片描述
在这里插入图片描述

已答题答对的时候是蓝色,答错是粉红色,当前题目是黄色

在这里插入图片描述

当然也有没进行判断的页面(/pages/practice/simulationExam/answer)这个页面内有倒计时、方法之类的都有备注的
作者开发不易 给个关注给个赞吧 我会继续努力分享资源的。我也只是一个小白 大神勿喷
模板有bug及时私信我 样式问题你就自己解决吧。

模板链接地址点击进入

发布了41 篇原创文章 · 获赞 2 · 访问量 1348

猜你喜欢

转载自blog.csdn.net/weixin_44128575/article/details/104674769