人气壁纸投票+AI编程 ​

项目演示 ​

微信扫描下方小程序码，在线体验咸虾米壁纸项目 ↓↓↓

视频教程 ​

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

课程内容概述 ​

这是一个基于 uniapp 和 uniCloud 开发的 “AI投票”微信小程序的全栈实战课程。该课程最大的特色是深度结合AI编程工具（Trae AI），演示如何利用自然语言辅助生成代码，提高开发效率。课程从前端页面、后端服务、用户系统、核心业务到项目上线，完整地讲解了整个投票小程序的开发流程。核心知识内容可以概括为以下几个方面：

1. 项目初始化与AI辅助开发
   • 创建uniapp项目并初始化uniCloud服务空间。
   • 介绍Trae AI工具，演示如何通过自然语言描述来生成功能代码、组件和页面。
   • 使用AI辅助实现自定义头部组件、封装SCSS函数和变量等。
2. 前端页面开发与组件封装
   • 搭建投票首页、详情页、报名页、图片预览页等核心页面。
   • 使用grid网格布局、uni-forms表单组件、uvParse富文本解析器构建页面结构。
   • 封装倒计时、图片选择、图片裁剪（qf-image-cropper）、图片批量压缩上传等公共组件和功能模块。
   • 实现侧边栏悬浮按钮、规则与奖品弹窗、投票列表等交互功能。
   • 使用z-paging实现列表触底加载和下拉刷新。
3. 后端服务与数据库设计（uniCloud）
   • 设计投票活动、报名参赛、投票记录、操作日志等DB Schema数据库表结构。
   • 使用JQL和云对象（uniCloud）实现对数据库的增删改查、联表查询、条件过滤、排序（orderBy）等操作。
   • 使用dbCmd.inc实现票数的原子自增减操作，保证数据一致性。
   • 使用云对象定时触发器（_timing）实现定时任务（如自动删除3天前的历史数据）。
4. 用户体系与状态管理
   • 引入uni-id-pages用户体系，实现微信小程序的一键快捷登录、自动登录及token续期管理。
   • 使用Pinia进行全局状态管理，存储活动详情、用户报名信息、投票数据等，实现页面间的数据共享与同步。
   • 实现个人资料编辑（头像上传、昵称修改）和手机号设置。
5. 核心业务逻辑实现（投票系统）
   • 活动管理：在uni-admin后台创建、编辑、删除投票活动，配置奖项和奖品。
   • 报名功能：用户报名参赛，提交作品图片（支持裁剪、压缩、上传），并根据报名状态（审核中/通过/未通过）进行页面差异化展示。
   • 投票功能：实现用户对参赛作品的投票，并进行投票限制（如每日投票次数）。集成微信激励视频广告，用户看广告可获得额外投票次数。
   • 排行与搜索：根据票数进行动态排行，支持正则模糊搜索参赛者名称/昵称。
   • 分享与海报：实现微信小程序分享好友和朋友圈功能。使用lime-painter海报画板插件和qrcode小程序码插件，生成带有参赛者信息和太阳码的分享海报，并保存到相册。
6. 后台管理系统与数据监管
   • 使用Element-Plus UI组件库构建uni-admin后台管理页面。
   • 实现对参赛作品的列表展示、条件搜索、状态审核（通过/拒绝）等管理功能。
   • 实现投票日志的查询与展示，便于监管投票数据。
   • 封装公共操作日志模块，将用户和管理员的关键操作记录写入数据库。
7. 用户体验优化与特效
   • 使用firework-effect烟花特效插件，实现投票成功后的礼花效果。
   • 使用防抖函数（debounce）控制投票按钮的频繁点击。
   • 使用Promise.all和groupBy同时获取多个数据并进行统计。
8. 项目打包与上线
   • 将本地schema和云对象上传到云端，导出并初始化数据库数据。
   • 配置支付宝云等不同云厂商的跨域和配置项。
   • 打包后台管理系统（网页托管）和微信小程序客户端，并完成上线。

核心亮点 ​

1.uniapp+unicloud前后端完整全栈项目

2.AI辅助项目开发提升效率

3.uniCloud高阶JQL语法应用

4.uni-id快捷登录及用户体系

5.uniadmin后台管理系统

6.element-plus在Vue3项目中的应用

7.pinia全局状态管理

8.多种类型的小程码分享组件

9.组件封装及hooks管理

10.报名参赛全流程

11.投票记录行为判断

12.各种常见的第三方插件的应用

13.定时触发自动执行任务

项目效果图概览 ​

📱 小程序客户端页面 ​