更新记录

1.0.0（2026-06-08）

1.0.0

首次整理为“活动报名项目模板”上架版本。
清理历史业务品牌信息，统一为模板化描述。
移除测试页与支付证书文件，默认关闭支付配置。
补齐部署指南、数据库初始化说明、上架检查清单与插件市场文案。

平台兼容性

云端兼容性

阿里云	腾讯云	支付宝云
√	×	×

uni-app(5.0)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	-	-	-	-	-	-	-	-	-	-	-

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

uni-app 活动报名项目模板

基于 uni-app + uniCloud 的活动报名、订单管理、推广邀约、后台管理一体化项目模板。

适用于以下场景：

门店促销活动
课程预约报名
活动报名
沙龙 / 会议 / 讲座报名
带邀约/推广裂变能力的营销活动

本项目不是纯前端静态模板，包含完整的前端页面、uniCloud 云对象、登录、订单、推广、后台管理等业务链路，开箱即用，也适合在现有基础上进行二次开发。

演示截图

仓库中的完整演示图片位于 demo/ 目录，下面放几张主界面截图用于快速预览：

演示图 1 演示图 2

功能简介

用户端

首页活动展示
活动详情页
活动报名
免费活动报名
付费活动下单与支付
订单列表与订单详情
个人中心

推广端

申请加入推广体系
我的推广
我的邀约
推广/邀约数据统计

管理端

管理面板
活动管理
活动分类管理
订单管理
订单核销
用户管理
系统配置

技术栈

uni-app
Vue 3
uniCloud
uni-id-pages
uni-pay
Tailwind CSS v4
weapp-tailwindcss
pnpm
HBuilderX

适用平台

微信小程序
H5
App

说明：

当前项目更适合在 HBuilderX 工作流下开发、调试和上传。
登录、弹层、支付等能力在不同平台上可能存在细节差异，正式使用前请自行做完整回归。

项目结构

pages/                           用户端页面
pages-manager/                   后台管理页面
components/                      通用组件与业务组件
services/                        前端业务请求与返回结构适配层
utils/                           工具函数、缓存、统一入口
composables/                     复用逻辑
uniCloud-aliyun/cloudfunctions/  云对象与云函数

当前页面结构重点如下：

pages/index：首页
pages/activity：活动详情
pages/order：订单列表 / 详情
pages/referral：推广申请 / 推广列表 / 邀约列表
pages/user：个人中心 / 设置
pages-manager：后台管理

运行前提

在运行本项目之前，请先准备以下环境：

Node.js 20.19+
pnpm
HBuilderX 5.07+
已开通 uniCloud 阿里云服务空间
已准备自己的微信小程序 appid
如需登录功能，需配置 uni-id-pages
如需支付功能，需配置 uni-pay

快速开始

1. 安装依赖

pnpm install

说明：

安装依赖后会自动执行 weapp-tw patch
该项目样式依赖 Tailwind CSS v4 + weapp-tailwindcss

2. 使用 HBuilderX 导入项目

打开 HBuilderX
选择“导入项目”
选择当前项目目录

3. 关联 uniCloud 服务空间

在 HBuilderX 中为项目绑定你自己的 uniCloud 阿里云服务空间
如果你不是直接使用原项目云空间，必须重新部署云对象 / 云函数

4. 上传云对象与云函数

本项目主要后端代码位于：

uniCloud-aliyun/cloudfunctions/

请在 HBuilderX 中将云对象 / 云函数上传到你的目标服务空间。

建议优先上传以下主链路云对象：

uniCloud-aliyun/cloudfunctions/aura-activity
uniCloud-aliyun/cloudfunctions/aura-order
uniCloud-aliyun/cloudfunctions/aura-referral
uniCloud-aliyun/cloudfunctions/aura-admin
uniCloud-aliyun/cloudfunctions/aura-content

如果你有自定义公共模块，也要同步上传 uniCloud-aliyun/cloudfunctions/common/*。

4.1 初始化数据库

请优先检查 uniCloud-aliyun/database/ 下的 schema 文件，并在你的服务空间中创建对应集合。

常见核心集合包括：

aura-activity
aura-order
aura-referrer
aura-settings

初始化建议：

先导入 schema，不要先导入真实业务数据。
优先准备一套演示数据，用于插件市场截图和功能验证。
后台管理员、活动、活动分类建议分开初始化，便于排错。

验证重点：

首页可以正常拉取活动列表
活动详情能读取到活动内容、价格、时间和报名状态
免费活动可以下单并在订单页看到记录
管理后台可以读取活动、订单、用户等数据

5. 配置项目基础信息

你至少需要根据自己的环境修改以下内容：

manifest.json
小程序 appid
项目标题、描述、品牌信息
静态资源（Logo、默认图、分享图等）
登录配置
支付配置（模板默认关闭，需自行接入）
uniCloud 数据表与服务空间相关配置

当前仓库保留了支付证书目录与占位文件结构，便于使用者对照配置，但不包含真实商户证书内容；同时模板默认关闭支付，避免直接把敏感配置打包到插件市场。你在正式商用前仍需替换为自己的商户、协议链接和服务空间配置。

静态资源建议优先替换：

static/images/logo.png：默认封面、默认 Banner 图、后台缩略图兜底图
static/images/default-avatar.png：默认用户头像
页面与数据库中的活动封面、Banner 图、分享图：建议换成你自己的演示素材

6. 编译运行

建议优先运行到：

微信小程序
H5

建议先验证以下主链路：

首页活动展示
活动详情
免费活动报名
订单列表与订单详情
推广申请与推广页
管理端登录与后台入口

uniCloud 依赖说明

本项目强依赖 uniCloud，不是一个纯前端模板项目。

主要依赖包括：

登录状态校验
活动与内容数据
报名与订单逻辑
推广与邀约逻辑
管理后台接口
支付链路

当前前端调用约定：

页面 / 组件优先调用 services/*
云对象统一通过 utils/cloud.js 管理
不建议在业务代码中直接新增裸 uniCloud.importObject(...)

如果你更换了自己的云空间：

需要重新上传云对象 / 云函数
需要重新准备数据库集合与权限规则
需要重新验证登录、订单、支付、推广、后台权限链路

登录、支付与权限说明

支付

当前项目支付能力基于 uni-pay
如需正式启用支付，请自行配置商户参数、回调链路和审核信息
如果只是本地体验，建议优先用免费活动验证报名链路

后台权限

管理页面位于 pages-manager/
是否能进入后台，不仅取决于前端按钮显示，也取决于后端权限校验
若你使用自己的账号体系，请同步调整角色和权限配置

使用注意事项

项目更偏 HBuilderX 工作流，命令行脚本较少
依赖 uniCloud、uni-id-pages、uni-pay
正式上线前请重点回归以下能力：
首页展示
活动详情
报名弹窗
免费报名 / 付费报名
订单详情
推广申请 / 推广列表 / 邀约列表
后台管理与核销

另外，uni-app H5 输入框有一个兼容性注意事项：

不要对 input / textarea 设置 box-sizing: border-box
否则在 H5 端可能导致输入框无法正常获取焦点或输入异常

授权说明

普通授权版：适合个人或团队自用部署与二次开发，不含源码二次分发、二次转售或打包后再次售卖授权。
源码授权版：提供完整源码交付，适合深度二开与长期维护，不含源码二次分发、二次转售或作为模板再次销售授权。
如需代部署、支付接入、品牌替换、页面调整或功能定制，可作为额外服务另行沟通。

常见问题

1. 为什么安装依赖后项目不能直接运行？

因为本项目不是纯前端静态模板，运行依赖：

uniCloud 服务空间
登录配置
支付配置
小程序 / H5 平台配置

2. 为什么有些接口调用失败？

常见原因包括：

没有绑定自己的 uniCloud 服务空间
云对象 / 云函数没有上传
数据表或权限规则未配置
当前账号没有对应权限

3. 为什么后台入口看不到或无法进入？

后台除了前端按钮显示控制外，后端也做了权限校验。你需要：

确认当前用户角色 / 权限配置正确
确认后台相关云对象已部署完成

4. 如何只保留免费报名功能？

可以先只使用免费活动场景，暂不启用完整支付配置，先跑通：

首页活动展示
活动详情
免费报名
订单列表 / 详情

5. 为什么不同平台表现不完全一致？

uni-app 在 H5、小程序、App 上的弹层、登录、支付、输入框等能力存在平台差异，正式使用前必须做对应平台回归。

初见活动报名项目模板（uniCloud + 付费活动报名 + 推广邀约) 活动报名 付费活动 课程预约 推广邀约 活动后台管理