在线活动抽奖项目 ​

项目演示 ​

微信扫描下方小程序码，在线体验九两酒商城 ↓↓↓

视频教程 ​

📺 完整版学习地址：https://www.bilibili.com/cheese/play/ss28368

课程内容概述 ​

这是一个基于 uniapp 和 uniCloud 开发的 “抽奖大转盘”微信小程序的全栈实战课程。该课程的核心亮点是集成了uni-push实时推送服务，实现了在线互动的抽奖场景。课程从前端页面、后端服务、用户系统、抽奖核心逻辑到实时推送和项目上线，完整地讲解了整个互动抽奖小程序的开发流程。核心知识内容可以概括为以下几个方面：

1. 项目初始化与前端页面开发
   • 创建uniapp项目并关联uniCloud服务空间。
   • 使用uni-list、z-paging、uni-load-more等扩展组件实现抽奖列表的布局、触底加载和下拉刷新。
   • 开发抽奖详情页，使用getSystemInfoSync获取状态栏高度，实现自定义导航栏。
   • 使用animation动画实现波纹跳动按钮、侧栏悬浮菜单动态展开/折叠、uni-popup弹出层等交互效果。
   • 使用z-index布局层叠头像，使用previewImage实现图片预览。
2. 后台管理功能（抽奖活动管理）
   • 创建抽奖活动管理页面，实现复杂的奖项结构配置（支持新增、删除奖项）。
   • 实现图片上传到云存储（uni.chooseImage和uniCloud.uploadFile），并使用dayjs生成文件名。
   • 封装Promise图片上传方法，使用uni-datetime-picker日期选择器配置活动时间。
   • 实现表单数据校验，完成抽奖活动的创建与数据提交。
3. 用户体系与个人中心
   • 引入uni-id-pages用户体系，配置uniIdRouter实现自动登录和微信登录后返回上一页。
   • 使用uni-id钩子beforeRegister创建默认用户数据。
   • 二次开发个人资料编辑页面（userinfo），实现头像上传、昵称修改等功能。
   • 使用ifdef条件编译兼容小程序和H5端的图片上传差异。
   • 使用阿里云图片缩放数据处理技术，获取缩略图以减少CDN流量开销。
4. 数据库设计与聚合查询
   • 创建抽奖活动、参与记录、中奖记录等DB Schema数据表结构。
   • 使用JQL联表查询，并使用运算方法和字段别名（field as）处理数据。
   • 深入学习云数据库聚合操作（aggregate），包括lookup联表查询、match条件过滤、project指定字段、cond条件操作符等高级用法。
   • 使用DB Schema数据库触发器（trigger）自动更新参与人数等统计字段。
   • 使用db.command（dbCmd）实现数据的原子自增减操作。
5. 核心业务逻辑（抽奖系统）
   • 实现用户参与抽奖功能，并对参与状态进行条件判断。
   • 使用reduce遍历求和限制抽奖名额，使用Promise.all同时获取所有满足条件的参与用户。
   • 实现随机抽奖算法，随机抽取中奖用户，并判断是否可以重复中奖。
   • 创建中奖用户表，将中奖记录入库，并更新抽奖活动的状态。
   • 实现管理员对中奖记录的手动核销功能。
   • 实现中奖记录列表的展示和奖品信息关联查询。
6. uni-push实时推送（核心亮点）
   • 开通uni-push服务，实现从云对象向客户端发送实时推送消息。
   • 使用uniPush.sendMessage方法，实现向指定用户（user_id）推送消息。
   • 结合抽奖场景，在开奖时通过push实时向所有参与用户推送中奖结果。
   • 客户端通过onPushMessage监听推送消息，并根据推送内容实时展示抽奖动画和中奖弹窗。
   • 实现通过push实时推送参与人数变化，增强互动体验。
7. 高级功能与项目完善
   • 调用微信API获取小程序码（getUnlimitedQRCode），并在云对象中自定义参数生成指定页面的小程序码。
   • 实现扫码核销功能：扫描小程序码或二维码，解析scene参数，校验合法性并完成中奖核销。
   • 使用uniCloud.request调用第三方接口生成小程序码。
   • 在云对象中使用npm安装模块，实现活动状态的自动修改。
   • 使用云对象定时触发器（_timing）定时修改活动状态（如活动开始/结束）。
   • 使用lodash.debounce防抖函数减少网络请求。
   • 发现并修复开发过程中的各类Bug。
8. 项目打包上线
   • 上线前的准备工作，连接云端函数并修改push推送配置。
   • 打包H5端并部署到uniCloud前端网页托管。
   • 打包微信小程序，配置socket合法域名，完成上线。

核心亮点 ​

1.熟练应用HTML+CSS掌握抽奖大转盘页面布局

2.uniapp组件及扩展组件的应用

3.z-paging扩展插件做触底加载和下拉刷新

4.CSS中有趣的animation动画实现

5.官方插件市场及npm下载项目需要的依赖

6.uniCloud云函数JQL语法及schema表及触发器

7.uni-id用户体系定制微信一键登录和账号登录

8.开启uni-push实时推送功能

9.通过push实现多人同时同步点餐菜单案例

10.lodash.debounce防抖优化网络开销

11.调用微信API生成及解析小程序码

12.扫码核销实现逻辑

13.云对象timing定时触发器的应用

14.打包上线微信小程序和H5云端web托管

项目效果图概览 ​

📱 小程序客户端页面 ​