微信小程序之答题领券系统构建
这个项目做了有一段时间了,客户需求反复更改,所以版本也是在不断迭代,下面简要说明一下这个系统的构建过程吧
系统功能:
1.基于商城系统开发的商品答题领券功能
2.首页商品列表页显示当前商品的答题状态
3.答题系统后台和商城系统后台之间的用户信息同步
4.单个商品同一时间只能有一个人答题(单人答题)
5.自定义组卷以及商品的试卷自定义配置
功能介绍以及功能核心技术点:
一、用户信息同步
这个是在商城后台用户授权成功数据入库的接口后面将用户数据通过CURL向答题系统发起请求,将数据推送到答题系统,
而在答题系统这边,有一个上行接口来接收传来的用户信息并数据入库,如此用户信息就在商城后台和答题后台之间实现
了同步。
二、答题后台商品数据
因为要为商品配置答卷,也就是说每个商品答题的时候拉取的试卷是不一样的,是可以配置的,那么答题后台必须先要有
所有商品的数据啊,同理通过CURL向商场系统发起请求,商场系统的上行接口返回商品数据,答题后台的CURL拿到后商
品数据入库。
三、自定义组卷和商品关联答卷
其实这两个操作,都是同一个道理,一个是往试卷里添加/删除题目,一个是往商品添加/删除试卷,添加的时候contains字
段添加12;34;5;这样的字符串,删除的时候由于如果要删除5,那么势必要删除5;这样的字符串,那么如果还有15;或者25;这
样的字段那就尴尬了,
所以处理方法是先将contains字段值(varchar类型)转为数组(按;分割),然后再剔除5这一项,如此一来就不会出现把
25中的5剔除的尴尬了
解析的时候自然是将这个字段转为数组,才能正确读出试卷里有哪些题目,商品关联了哪些试卷
四、单人答题功能
这个功能的实现用到了一个锁机制,有人进入答题,拉取到试卷开始答题后,向答题后台通信,当前这个商品已经是上锁状
态,答题完毕,提交试卷解除锁定,或者中途退出(左上角返回键)解除商品锁定,最后还是发现了一个问题,就是小程序
从前台转后台的时候,页面的所有js都会停止,刚开始想着在页面卸载事件里面添加弹窗(是否退出当前答题,是的话解除
答题锁定,小程序进入后台),但是小程序直接进入后台并没有触发页面的卸载事件,而是在再次从后台到前台的时候才会
执行之前的页面卸载事件,最后,在答题开始商品加锁的时候添加了一个解锁的时间,时间为每题的时间10s乘上试卷总
量。等到用户再次由后台进入到前台(默认就是之前退出时的答题页面)这时候之前的卸载事件不是要执行么,于是在这
个事件里弹出一个模态框,提示信息:系统检测到您之前中途退出答题,之前的答题无效,再来一次!页面只有一个按钮
,无论如何,用户都只能重新再来。只要有人答题,后续的人答题拉取试卷的时候,因为当前商品的lock=1,于是就会有
弹窗,当前有人正在答题,即将退出!
五、首页商品答题状态显示
其实这个还是花了我一番功夫的,写了一大段js,小程序前端是数据绑定的,而商品信息是从商场后台拿到的,正在答题
的商品列表是从答题后台拿到的。
首先获取正在答题的商品列表,首先如果商品的解锁时间小于现在的时间,那么给这个商品解锁(答题中途小程序进入后
台导致的商品答题状态不更改),然后再拿所有上锁商品的id。
js部分,先过滤商城后台拿到的商品数据,取出他们的id存到数组,然后遍历这个商品id数组,如果商品id存在于正在答题
的商品列表里,那么为这个商品信息添加一个lock:1属性存到页面变量,不存在这个列表的话lock:0,最后将存了lock状
态的商品数据存到页面变量里,wxml渲染的时候,如果item.lock==1,就为这个商品页面添加一个“正在答题”的遮罩。
微信小程序之答题领券系统构建的更多相关文章
- 基于微信小程序的失物招领系统的Postmortem
基于微信小程序的失物招领系统的Postmortem 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 对于我们团队要解决的问题和实现的功能在项目开始就 ...
- AI人工客服开发 小程序智能客服 智能客服微信小程序 智能客服系统怎么做 如何设计智能客服系统
今天我们就来给大家分享下如何做 小程序的智能客服问答系统. 首先请确保你的小程序在线客服已经开通使用,并使用代码自己对接好了,将客户的提问自动做了拦截,拦截到了你自己开发的接口上. 做好了拦截以后,我 ...
- 微信小程序开发工具“当前系统代理不是安全代理”
(1)删除注册表中以proxy开头的项目再次重启 regedit进入[HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/Inter ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 重磅消息:微信小程序支持长按二维码进入
之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 腾讯云开发微信小程序使用体验
主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...
- 微信小程序答题系统实现随机出题 答题小程序如何实现随机出题 微信小程序 答题系统
最近头脑王者非常火爆,公司也在开发类似头脑王者的答题系统,这个重任交到我这边来了,我们在开发的这个微信小程序答题系统,需要实现随机出题.尤其是一些比如闯关的环节,需要随机从题库里抽取若干道题目,给到用 ...
- Python flask构建微信小程序订餐系统
第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...
随机推荐
- go channel 阻塞
初接触 go 有不对得请解释下 Channel是goroutine之间进行通信的一种方式,先看下面代码为什么会阻塞: func closer(ch chan int) { ch <- 1 log ...
- 20145303 实验二 Java面向对象程序设计
实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要求 1.没有Lin ...
- Linux命令awk
1.简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大. 简单来说awk就是把文件逐行读入,默认以空格为分隔符将每行切片,切开的部 ...
- NOIP树上问题总结
这几年考了好几次树上问题: NOIP2012 疫情控制(二分答案+倍增+贪心) NOIP2013 货车运输(最大生成树+倍增) NOIP2014 联合权值(勉强算作树形dp的傻逼题) NOIP2015 ...
- c语言数组拷贝
#include <string.h> // 如果要从数组a复制k个元素到数组b,可以这样做 memcpy(b,a,sizeof(int)*k);
- git开发错分支
1,代码未提交时: 使用以下命令即可解决. git add . (把所有改动暂存) git stash (把暂存的文件提交到git的暂存栈) git checkout 本该提交代码的 ...
- codeforces796E Exam Cheating
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- url传递数据类型
php中传递数据,get或post方式为啥用字符串传递,为什么不能直接用数组形式,用的话可以吗
- 通栏banner自适应各个设备
思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置一样没用,除非你搞个js判断,动态刷新. 换一种思路,直接用<img& ...
- bootstrap自定义——栅格列数修改
从下载的bootstrap文件中找到less文件夹里面的variables.less,然后可以找到栅格列数进行修改 然后执行一下bootstrap.less,通过命令行,切换到其所在的目录D:\03 ...