微信小程序之答题领券系统构建
这个项目做了有一段时间了,客户需求反复更改,所以版本也是在不断迭代,下面简要说明一下这个系统的构建过程吧
系统功能:
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 ...
随机推荐
- 屏幕变黑白-winhotkey
下载了个windows hot key 的工具想看快捷键冲突 结果安装好之后屏幕变黑白了,变成辅助模式了.而且鼠标移动到哪都加蓝色框框 如果这个时候你带上耳机就能听到在朗读,这应该也是一种辅助模式 ...
- 20145328 《Java程序设计》第8周学习总结
20145328 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),re ...
- linux目录结构及文件权限
安装banner用到的指令: 第一步: sudo apt-get update 第二步: sudo apt-get install sysvbanner 成功了 创建新用户指令: sudo addus ...
- 【前端】display: box布局教程 [转]
css display:box 新属性 一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 ...
- 【前端】Vue.js实现简单价格计算器
价格计算器 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> ...
- [转载]Javassist 使用指南(二)
======================= 本文转载自简书,感谢原作者!. 原链接如下:https://www.jianshu.com/p/b9b3ff0e1bf8 =============== ...
- 【bzoj5177】[Jsoi2013]贪心的导游(分块)
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5177 在网上看到的题解基本都是用主席树,也就是带点骚操作的暴力直接艹过去的.这里分享一 ...
- codeforce 35C fire again
2017-08-25 17:04:07 writer:pprp 题目描述: • Codeforces 35C Fire Again• N*M的格子,最开始有K个点 (坐标给定) 开始着火• 每一秒着火 ...
- VS2012 QT5.2.0 无法解析的外部符号
背景:在新建QT工程时,可能没有选择一些库,虽然在头文件中引用了,但是程序依然无法识别 现象:一般出现"LNK2019"错误. 解决:以网络为例,在VS2012中加入网络库,分为两 ...
- [spring]xml配置文件---节点解释
转载:https://blog.csdn.net/u012099568/article/details/51423837