简介7月新版盲盒抽奖系统源码集成H5端与小程序端可按教程打包为独立APP适合需要在网站或应用中快速加入抽奖活动的PHP开发者与运营者涵盖后台管理、H5页面与小程序端完整业务闭环。压缩包内含2000个文件以JS、Vue、HTML、CSS等前端代码为主同时提供JSON配置、Markdown说明、SQL数据库脚本及shell脚本整体大小约126.87MB目录结构清晰便于二次开发与部署。已有156人学习下载。系统基于PHP7.2与MySQL5.6构建配合宝塔面板和TP伪静态既简化服务器运维也让URL更加友好前端采用HBuilderX开发可有效降低移动端适配门槛。资源还附带全套安装教程从环境配置到项目上线都有指引即使技术背景不深的用户也能按照步骤搭建起自己的抽奖平台适用于电商促销、品牌活动、社群运营等各类盲盒玩法场景。1. 盲盒抽奖系统的需求拆解这套源码在解决什么问题做本地生活小程序的朋友上月找我搭一套盲盒活动运营说得很直接普通抽奖用户早已无感盲盒的核心是“开盒前那一刻的期待”所以商城类小程序、电商H5、线下门店拉新都在往这个方向改造。这套7月更新的盲盒抽奖系统源码正好覆盖了后端PHP、H5端、小程序端三块还能按教程打成独立APP。别只把它当整站模板看真正值得拆的是三件事ThinkPHP框架下的抽奖概率控制怎么写、Uniapp前端如何一套代码同时出H5和小程序、以及HBuilderX云打包时那些测试环境跑不通的坑。适合两类人想快速上线抽奖活动的运营侧开发者和要做二次开发的PHP工程师。2. PHP 7.2 MySQL 5.6 ThinkPHP环境选型与宝塔配置2.1 为什么是PHP 7.2而不是更高版本很多第一次拿到源码的人第一反应是装最新版PHP 8.x然后发现站点直接白屏。这套盲盒系统是基于ThinkPHP 5.x体系开发的ThinkPHP 5.0和5.1官方推荐运行环境就是PHP 7.x。PHP 7.2相比5.6在性能上有接近两倍的提升同时引入了TypeError和类型不匹配警告机制可以在开发阶段提前暴露参数传错的问题而不是在线上跑着跑着突然报500。从实际部署角度看PHP 7.2对老代码的兼容性比7.4和8.0更宽松。例如7.4以后对each()、create_function()这类函数的移除会让很多老扩展直接瘫痪。这套源码里如果保留了一些ThinkPHP早期封装的函数调用在PHP 7.2上能正常运行升到7.4就需要逐行改。所以安装教程里指定PHP 7.2并不是滞后而是保证源码开箱即用。2.2 ThinkPHP的TP伪静态规则配置TP伪静态的实质是把index.php?s/index/prize/draw这一类入口参数形式的URL改写成用户能看懂、搜索引擎也愿意收录的路径。在宝塔面板中配置Nginx站点伪静态时我一般直接在站点设置里选择“ThinkPHP”模板如果没有就手动填入location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s$1 last; } }这段规则的含义是当用户请求的路径在服务器上找不到对应的真实文件时把整个路径作为参数透传给index.php由ThinkPHP路由解析。注意其中的$1捕获的是括号内的完整路径如果API接口路径带.html后缀正则要改成^(.*)\.html$否则路由会404。配置完成后访问http://你的域名/index/prize/draw和http://你的域名/index/prize/draw.html会走到同一个控制器方法。伪静态本身不改变业务逻辑但影响API调试效率我习惯在本地先用php think route:list查看全部注册路由确认哪些控制器是公开访问、哪些需要登录鉴权。2.3 宝塔面板的站点创建与数据库初始化宝塔面板把环境安装、站点创建、数据库管理压缩到了可视化操作里。假设服务器是CentOS 7安装完宝塔后需要做的不是立刻传源码而是先确认版本组合。组件版本要求用途PHP7.2运行ThinkPHP后端源码MySQL5.6存储用户、奖品、抽奖记录Nginx1.16提供Web服务与伪静态支持宝塔面板最新稳定版管理站点、数据库、定时任务创建站点时勾选“FTP”和“数据库”数据库编码选择utf8mb4因为盲盒奖品的文案和用户昵称可能包含emojiutf8在存储四字节字符时会报Incorrect string value错误。站点创建完成后把源码压缩包上传到www/wwwroot/你的域名目录并解压接着用宝塔自带的phpMyAdmin导入sql目录下的数据库文件。导入完成后修改application/database.php里的数据库连接信息重点核对表前缀配置return [ type mysql, hostname 127.0.0.1, database lottery_db, username lottery_user, password 你的密码, hostport 3306, prefix tp_, ];如果源码默认表前缀是tp_而导入时数据库表名是think_开头所有查询都会报表不存在。我每次部署新环境都会先用SHOW TABLES;看一眼实际表名再回头改prefix这个顺序反过来容易白折腾二十分钟。3. 数据库表设计与抽奖接口的并发控制实现3.1 核心数据表结构与含义盲盒抽奖系统相对普通抽奖核心差异在于两个维度盲盒本身是虚拟物品需要记录“未开启”状态奖品的中奖概率不是平均分布而是按权重配置。拆解这套源码的数据库核心是四张表用户表、奖品表、抽奖记录表、盲盒开启记录表。下列建表语句基于源码常用字段整理实际字段以你拿到的sql文件为准。CREATE TABLE tp_prize ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 奖品名称, level tinyint(4) NOT NULL DEFAULT 0 COMMENT 奖品等级数字越小价值越高, weight int(11) NOT NULL DEFAULT 1 COMMENT 抽奖权重数值越大概率越高, stock int(11) NOT NULL DEFAULT 0 COMMENT 当前库存, total int(11) NOT NULL DEFAULT 0 COMMENT 总投放量, image varchar(255) DEFAULT NULL COMMENT 奖品图片, status tinyint(4) NOT NULL DEFAULT 1 COMMENT 1启用 0停用, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE tp_draw_log ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL COMMENT 用户ID, prize_id int(11) NOT NULL COMMENT 中奖奖品ID, prize_name varchar(100) NOT NULL COMMENT 中奖名称冗余存储防止奖品表改动, status tinyint(4) NOT NULL DEFAULT 0 COMMENT 0未开盒 1已开盒 2已发货, create_time int(11) NOT NULL, PRIMARY KEY (id), KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;tp_prize表里weight字段是概率控制的关键我见过不少二次开发者把这个字段理解成“百分比”存了15、30、55结果加起来不是100。源码里权重通常按相对比例计算不需要总和为100只需保证所有启用奖品的权重相加后均匀映射区间。tp_draw_log的create_time字段推荐使用10位时间戳而不是 datetime虽然可读性差一些但在PHP里做时间区间查询和缓存过期判断时更方便。3.2 按权重生成中奖结果PHP实现与边界处理抽奖接口最核心的代码是按权重随机选出奖品。常见做法是构建权重区间再用随机数定位我拆过的这套源码实现逻辑和下面这段一致function weightedDraw($prizeList) { $totalWeight 0; $weightMap []; foreach ($prizeList as $item) { $totalWeight $item[weight]; $weightMap[] [ id $item[id], name $item[name], start $totalWeight - $item[weight] 1, end $totalWeight, ]; } $randNum mt_rand(1, $totalWeight); foreach ($weightMap as $map) { if ($randNum $map[start] $randNum $map[end]) { return $map; } } return null; }这段代码的逻辑是先把每个奖品的权重换算成区间例如A权重1、B权重5、C权重4则A的区间是1-1B是2-6C是7-10。然后再用mt_rand(1, 10)生成随机数落在哪个区间就中哪个奖。用mt_rand而不是rand是因为前者基于梅森旋转算法随机分布更均匀在高并发抽奖场景下不容易出现连续几个用户中同一个奖的聚集现象。边界情况有两处需要留意第一如果某个奖品权重被设置成0它的起始值等于上一个奖品的结束值区间长度为0永远不会被抽中这可以用来临时下架某个奖品第二如果奖品列表为空$totalWeight为0mt_rand(1, 0)会返回false所以调用前必须判断奖品列表非空否则直接回退到默认空盒结果。3.3 并发扣减库存事务与行锁盲盒活动一旦上线用户不是串行点击的同一个奖品可能在1秒内被多个请求命中。如果代码写的顺序是先查库存、大于0再减1两个请求同时读到库存为1时两个用户都会中奖而库存最终变成-1。这套源码在抽奖记录写入和库存扣减之间使用了数据库事务核心逻辑如下Db::startTrans(); try { $prize Db::name(prize) -where(id, $prizeId) -lock(true) -find(); if ($prize[stock] 0) { throw new \Exception(奖品已抽完); } $updateResult Db::name(prize) -where(id, $prizeId) -dec(stock) -update(); Db::name(draw_log)-insert([ user_id $userId, prize_id $prizeId, status 0, create_time time(), ]); Db::commit(); } catch (\Exception $e) { Db::rollback(); return [code 0, msg $e-getMessage()]; }lock(true)在MySQL中对应SELECT ... FOR UPDATE作用是锁定当前奖品记录的行锁直到事务提交或回滚。第二个请求执行同一语句时会阻塞等待等第一个请求库存减完提交事务后再读取到更新后的库存。这里要特别注意缩进和事务范围不能把唯一索引冲突检查放事务外否则并发插入重复记录时只靠MySQL兜底应用层拿不到用户是否已中奖的准确状态。避免死锁的关键是锁顺序一致。比如有发放优惠券和扣库存两个动作所有请求都必须先锁奖品表再写记录表不能这个请求先锁A再锁B另一个请求先锁B再锁A。不然并发跑到一定量级数据库会报Deadlock found when trying to get lock。4. H5端与小程序端Uniapp工程改造与UI清单4.1 用HBuilderX打开工程目录结构说明前端部分是用Uniapp写的拿到源码后不需要自己搭脚手架直接用HBuilderX导入即可。HBuilderX本身是DCloud出品的前端IDE对Uniapp的支持是最完整的导入后能看到项目的关键目录pages存放页面文件static存放静态资源manifest.json配置应用名称和APP打包参数pages.json配置路由与导航栏。pages.json里通常已经预置了首页、抽奖页、中奖记录页、个人中心四个页面。运行到浏览器时检查的是H5端入口运行到微信开发者工具体现的是小程序端两边共用一套代码。很多新手在H5端点开页面白屏打开浏览器控制台发现是域名配置问题需要修改common/config.js里的baseUrl// common/config.js const BASE_URL https://www.yourdomain.com/index.php/api; export { BASE_URL };这里改成你自己服务器的正式域名不能是localhost因为手机扫码调试时localhost指向的是手机本身。我习惯把API域名单独拆成配置文件不用在业务代码里到处找接口地址后面切换测试服和正式服只改一个文件。4.2 盲盒开盒UI的实现逻辑盲盒UI是这套源码视觉上最突出的部分7月新版UI的改动重点包括列表页卡片阴影调整、开盒动画的过渡效果优化以及按钮状态下的质感反馈。开盒动画的核心是通过v-if条件渲染切换“未开盒”和“已中奖”两种状态配合CSS的transition完成缩放效果。核心页面结构如下template view classbox-container view classbox-trigger v-if!opened clickstartDraw view classbox-cover点击开盒/view view classbox-shine/view /view view classbox-result v-else image :srcprizeInfo.image modeaspectFill/image view classprize-name{{ prizeInfo.name }}/view button classbtn-again clickresetBox再抽一次/button /view /view /templatev-if和v-else确保同一时刻只渲染其中一个视图。点击开盒后调用接口接口返回中奖信息后把opened置为true图片和奖品名展示出来。如果只是切换显示而无动画体验会比较生硬源码里通常在.box-result上加了CSS动画.box-result { animation: boxPop 0.4s ease-out; } keyframes boxPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }开盒动画不建议用复杂的关键帧组合一是小程序端对CSS动画支持不如浏览器完整二是过长的动画会延迟用户看到中奖结果反而影响转化率。0.4秒到0.6秒是用户感知最舒适的范围。4.3 接口请求封装与token透传H5端和小程序端请求后端接口时需要统一携带登录凭证。这套源码的登录机制是基于token的用户在微信端通过uni.login获取code后端用code换openid并签发token。前端需要把所有请求统一封装方便统一做错误拦截// common/request.js const request (url, method GET, data {}) { return new Promise((resolve, reject) { uni.request({ url: BASE_URL url, method: method, data: data, header: { Content-Type: application/json, token: uni.getStorageSync(token) || }, success: (res) { if (res.data.code 401) { uni.navigateTo({ url: /pages/login/login }); return; } resolve(res.data); }, fail: (err) { reject(err); } }); }); };token从本地存储同步读取是因为抽奖接口每次都需要校验用户身份如果用异步读取会出现首帧竞态——token还没拿到请求已经发出去了后端返回未登录。code 401时跳转登录页属于统一拦截比每个业务页面各自判断错误码省事得多。实际项目里我还会加一层请求重试机制比如网络抖动导致fail回调时自动重试一次热门接口中奖查询和库存扣减这类不能重复提交的接口则不重试避免产生重复中奖记录。5. 从H5打包成独立APPHBuilderX流程与常见坑5.1 HBuilderX云打包的完整操作链条源码声称可以打包成独立APP实际路径是HBuilderX的云打包服务整个流程不需要本地配置Android或iOS原生环境。先在HBuilderX中打开前端工程确认manifest.json里的应用名称和AppID——AppID是DCloud分配的没有的话在HBuilderX里的DCloud开发者中心注册一个免费用户也能用基础云打包。接着点击菜单栏的“发行” - “原生App-云打包”。如果还没配置证书可以直接选“使用公共测试证书”打出来的包能安装但部分系统会提示风险要上应用商店Android就必须自己生成keystorekeytool -genkey -alias lottery -keyalg RSA -keysize 2048 -validity 36500 -keystore lottery.keystore签发过程中要求填组织单位和城市信息这些会写进APK的签名信息里务必如实填写。打包平台要求包名遵循反向域名规范比如com.yourcompany.lottery包名一旦确定并上架后续更新不能改改了会被系统当成两个完全不同的应用。5.2 Android与iOS的打包差异对照对比项AndroidiOS证书要求keystore或公共测试证书必须苹果开发者账号99美元/年打包入口HBuilderX云打包直接出APK/AAB需先在苹果开发者后台生成证书和描述文件上架渠道华为、小米、OPPO、vivo应用商店只能通过App Store审核H5内嵌定位权限需要动态申请定位权限需要在Xcode或manifest里声明定位用途Android端打包相对宽松测试包可以直接用公共证书发布到应用商店前再换成自己的keystore重新签名即可两种签名证书打出的包无法覆盖安装。iOS这边没有捷径没有苹果开发者账号就无法进行真机测试只能使用开发证书构建开发包。我处理过一个小程序团队第一次打包iOS的场景卡在描述文件上——描述文件必须包含测试设备的UDID哪个环节需要补测试机就多点几步验证。5.3 打包后运行失败的高频原因第一类是app is not defined。这个典型错误通常是H5端的代码使用了window、document等Web API在APP端不存在。Uniapp提供了条件编译来处理在manifest.json里确认已勾选需要的APP模块业务代码中用#ifdef APP-PLUS包裹APP专用API。第二类是websocket运行到浏览器能连打包成APP后连不上这类问题多数是请求地址用了H5域名APP端需要配置业务域名或关闭SSL校验用于测试环境。第三类是UI界面卡顿盲盒开盒动画在低端Android机上掉帧经验做法是把奖品图片压到200KB以内并用transform和opacity这种GPU加速属性替代left、top的位置动画。6. 上线安装自检与线上故障排查技巧6.1 安装完成后的验证步骤教程里说的“带安装教程”本质是给出一条从零到上线的自检路径。我在部署这套系统时跑完安装向导后不会第一时间去看页面效果而是先在后端验证环境是否真的通了。验证项操作命令预期结果伪静态规则浏览器访问 /index/prize/draw返回JSON或抽奖页而非404数据库连接后台执行php think migrate:status不报数据库连接错误接口连通性curl -s http://域名/index.php/api/index返回含code字段的JSON定时任务crontab -e写入库存回补脚本日志中有执行记录执行curl时注意看返回头里的Content-Type如果是text/html说明路由被Nginx拦截了后端返回了404页面。正确配置伪静态后返回的是application/json。安装之后最容易被忽略的是目录权限。ThinkPHP运行时会向runtime目录写缓存、日志和session文件如果该目录下没有写入权限页面能打开但一登录就报错。执行chown -R www:www /www/wwwroot/你的域名 chmod -R 755 /www/wwwroot/你的域名/runtimewww:www是宝塔下PHP进程的运行用户权限给到www而不是root原因在于PHP-FPM工作进程的用户就是www目录属主是root时PHP写不了缓存文件。6.2 抽奖高峰期的日志定位方法活动上线后遇到问题第一件事是看日志而不是猜。ThinkPHP默认应用日志在runtime/log目录按日期存放格式为年月日.log。排查中奖异常时的常用组合命令是tail -f runtime/log/20250712.log | grep draw这样可以实时过滤当天所有带draw关键词的日志能看到每条抽奖请求的处理时间、SQL语句和异常信息。如果日志里出现大量Swoole或Lock wait timeout exceeded说明你的并发读取和行锁之间有性能问题。我给出的调整策略是把抽奖接口的库存判断和扣减合并成一条原子SQL减少事务内的查询次数UPDATE tp_prize SET stock stock - 1 WHERE id 1 AND stock 0;用ROW_COUNT()判断是否有受影响行数为0则说明库存不足直接返回。这样省的是一次SELECT的往返和行锁持有时间在1000并发以下的抽奖场景这条SQL几乎不会出现超时。最后所有日志文件建议配置宝塔的日志切割保留最近30天的日志其余自动清理——活动结束后复盘靠的是接下来30天的日志再老的历史数据对当期运营分析已经没有价值。本文还有配套的精品资源点击获取