微信小程序之答题领券系统构建
这个项目做了有一段时间了,客户需求反复更改,所以版本也是在不断迭代,下面简要说明一下这个系统的构建过程吧
系统功能:
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 ...
随机推荐
- nsis源码 nsisdialogdesigner
; 安装程序初始定义常量!define PRODUCT_NAME "nsisdialogdesigner"!define PRODUCT_VERSION "1.1.3&q ...
- Java中private、protected、public和default的区别-001
public: 具有最大的访问权限,可以访问任何一个在classpath下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. protected: 主要的作用就是用来保护子 ...
- DOS/BAT批处理if exist else 语句的几种用法
在DOS批处理命令中常常会通过if语句来进行判断来执行下面的命令, 那么批处理if语句怎么用呢,下面学无忧小编就来说说有关批处理if以及if exist else语句的相关内容.一.批处理if书写格式 ...
- RDB
在运行情况下, Redis 以数据结构的形式将数据维持在内存中, 为了让这些数据在 Redis 重启之后仍然可用, Redis 分别提供了 RDB 和 AOF 两种持久化模式. 在 Redis 运行时 ...
- bootstrap && bagging && 决策树 && 随机森林
看了一篇介绍这几个概念的文章,整理一点点笔记在这里,原文链接: https://machinelearningmastery.com/bagging-and-random-forest-ensembl ...
- webservice使用注解修改WSDL内容
首先看我们没有修改前的WSDL内容 此时服务端的类 修改后的 注解如下 package com.xiaostudy; import javax.jws.WebMethod; import javax. ...
- jQuery实际案例②——三层轮播图
1.如图,这种轮播图需要实现的是,当鼠标移到2上时,第二张图片从右侧过来 2.需要注意的:①很明显这是通过改变z-index与left值来实现的: ②整体布局需注意,图与数值(1,2,3,4,5)两 ...
- Android自定义圆形ProgressBar
闲来无事做了一个自定义的进度条,大致效果图如下: progressbar.gif 废话不多说,下面直接上代码: 自定义控件代码CircleProgressBar.java: public class ...
- Nginx 启动报错 “/var/run/nginx/nginx.pid" failed”
问题: 重启虚拟机后,再次重启nginx会报错: open() "/var/run/nginx/nginx.pid" failed (2: No such file or dire ...
- bzoj1093: [ZJOI2007]最大半连通子图 scc缩点+dag上dp
一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u的有向路径.若G'=(V ...