这个项目做了有一段时间了,客户需求反复更改,所以版本也是在不断迭代,下面简要说明一下这个系统的构建过程吧

系统功能:

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,就为这个商品页面添加一个“正在答题”的遮罩。

微信小程序之答题领券系统构建的更多相关文章

  1. 基于微信小程序的失物招领系统的Postmortem

    基于微信小程序的失物招领系统的Postmortem 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 对于我们团队要解决的问题和实现的功能在项目开始就 ...

  2. AI人工客服开发 小程序智能客服 智能客服微信小程序 智能客服系统怎么做 如何设计智能客服系统

    今天我们就来给大家分享下如何做 小程序的智能客服问答系统. 首先请确保你的小程序在线客服已经开通使用,并使用代码自己对接好了,将客户的提问自动做了拦截,拦截到了你自己开发的接口上. 做好了拦截以后,我 ...

  3. 微信小程序开发工具“当前系统代理不是安全代理”

    (1)删除注册表中以proxy开头的项目再次重启 regedit进入[HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/Inter ...

  4. 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

  5. 重磅消息:微信小程序支持长按二维码进入

    之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...

  6. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  7. 腾讯云开发微信小程序使用体验

    主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...

  8. 微信小程序答题系统实现随机出题 答题小程序如何实现随机出题 微信小程序 答题系统

    最近头脑王者非常火爆,公司也在开发类似头脑王者的答题系统,这个重任交到我这边来了,我们在开发的这个微信小程序答题系统,需要实现随机出题.尤其是一些比如闯关的环节,需要随机从题库里抽取若干道题目,给到用 ...

  9. Python flask构建微信小程序订餐系统

    第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...

随机推荐

  1. HelloWorld程序编写调试及错误解决

    HelloWorld程序编写调试及错误解决 eclipse软件编写 相较于windows内置记事本,eclipse编写程序更为简单快捷.由其生成的程序模板编写如下: package helloworl ...

  2. 网络攻防工具介绍——Metasploit

    Metasploit 简介 Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正的安全风险情报.这些 ...

  3. 高手用的SourceInsight配置文件——仿Sublime风格【转】

    本文转载自:https://blog.csdn.net/weixin_38233274/article/details/80209100 配置文件下载地址:https://download.csdn. ...

  4. Redis维护

    关闭redis [root@--x-x log]# cd /usr/local/redis/bin/ [root@--x-x bin]# ./redis-cli -h shutdown 启动redis ...

  5. CSS样式 vertical-align:middle 垂直居中生效情况

    vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的 -------不存在浮动时可以直接生效垂直居中 HTML .box1{ display: table- ...

  6. 百度云如何免费扩容至2055G?

    百度云如何免费扩容至2055G? 上篇说到整一个新的百度账号,那么5G的百度云内存肯定满足不了我们收集癖的需求.那么就来了解一下怎么扩容吧. 主要是在手机端实现的 用这个新的百度账号在手机APP上登录 ...

  7. Flume NG初次使用

    一.什么是Flume NG Flume是一个分布式.可靠.和高可用性的海量日志采集.聚合和传输的系统,支持在日志系统中定制各类数据发送方,用于收集数据:同时Flume提供对数据的简单处理,并写到各种数 ...

  8. 浅谈NodeJs的模块机制

    J历史 我们都知道,js在刚被创建的时候,只是为了在网页上写一些小脚本而已,比如网页特效,表单验证等等,创立者也许没觉悟到以后的js会发展到如此规模.这是web1.0时代. 在web 2.0时代,各种 ...

  9. Warsaw U Contest Petrozavo dsk Summer 2011 Training Camp, Monday, September 5, 2011

    Warsaw U Contest Petrozavo dsk Summer 2011 Training Camp, Monday, September 5, 2011 Problem A.Chocol ...

  10. 设计模式--建造者模式C++实现

    建造者模式C++实现 1定义 将一个复杂对象的构建和他的表示分离,使得同样的构建过程可以创造不同的表示 注:在模板方法中,实现了父类调用子类方法的功能,且,通过钩子实现了方法的选择性调用.但是其中整体 ...