更新记录

1.2.0（2026-05-20） 下载此版本

首次发布

平台兼容性

uni-app(5.0)

其他

社群获客 - UniApp 微信小程序模板

简介

社群获客 是一款基于 UniApp (Vue 2) 开发的社交类微信小程序前端模板。它集成了主播名片展示、人脉名片交换、群聊大厅以及互助广场等核心功能，并配备了完善的个人中心、积分体系及 VIP 会员管理模块。

该模板采用现代化的 UI 设计，支持自定义底部导航栏（TabBar）、下拉刷新、上拉加载更多、动态筛选以及 Banner 轮播等交互体验，非常适合用于开发社群运营、资源对接或直播公会类的小程序应用。

在线演示

• 微信小程序: 恒连05
• H5 演示: https://shengkavue.dylivemcn.cn/h5

功能特性

🚀 核心业务模块

1. 主播名片 (Anchor Hall):
   • 支持按地域、性别、职业进行多维度筛选。
   • 展示主播头像、昵称、职业标签及个人简介。
   • 内置审核状态标识与查看权限控制。
2. 人脉名片 (Card Hall):
   • 类似主播名片的展示逻辑，专注于普通用户的人脉资源交换。
   • 支持名片发布与管理。
3. 群聊大厅 (Group Hall):
   • 展示各类社群信息，支持群类型与分类筛选。
   • 集成***记录查询与换群功能。
4. 互助广场 (Help Square):
   • 用户可发布互助信息，支持九宫格图片展示。
   • 按标签分类，方便快速检索。

👤 个人中心 (User Center)

• 身份认证: 支持用户完善资料与实名认证。
• 积分系统: 每日签到领积分、积分明细查询、积分抽奖功能。
• VIP 会员: 可视化 VIP 卡片展示，支持有效期管理与续费入口。
• 我的发布: 统一管理发布的群组、名片及互助信息。
• 邀请机制: 专属邀请码生成与分享，支持邀请记录追踪。

🛠️ 技术与交互

• 自定义 TabBar: 突破原生限制，实现中间凸起 Logo 的个性化导航。
• 高效列表渲染: 优化的长列表性能，支持下拉刷新与触底自动加载。
• 动态字典驱动: 筛选条件（如职业、地区）由后端字典动态配置，灵活可扩展。
• 多端适配: 基于 UniApp 框架，一套代码可编译为微信小程序、H5 及 App。

技术栈

• 框架: UniApp (Vue 2)
• UI 组件库: uni-ui (uni-drawer, uni-section 等)
• 状态管理: Vuex
• 网络请求: 封装 Axios/Request 拦截器，统一处理 Token 与错误提示。
• 样式预处理: SCSS

目录结构

├── api                 # API 接口定义
│   ├── qun             # 业务模块接口（群组、名片、主播等）
│   └── system          # 系统基础接口
├── components          # 公共组件
│   ├── turntable       # 积分大转盘组件
│   └── vip-modal       # VIP 充值弹窗组件
├── pages               # 页面文件
│   ├── anchorHall      # 主播名片首页
│   ├── cardHall        # 人脉名片首页
│   ├── index           # 群聊大厅首页
│   ├── huzhuList       # 互助广场首页
│   ├── mine            # 个人中心子页面（钱包、积分、设置等）
│   └── qun             # 业务详情页（发布、详情、管理）
├── static              # 静态资源（图片、图标）
├── store               # Vuex 状态管理
├── utils               # 工具类（请求封装、权限校验、时间格式化）
├── App.vue             # 应用配置，全局生命周期
├── main.js             # 入口文件
├── manifest.json       # 应用配置（appid、权限等）
└── pages.json          # 页面路由与窗口表现配置

快速开始

环境准备

• 安装 HBuilderX (推荐) 或 VS Code + UniApp 插件。
• 安装微信开发者工具。

运行步骤

1. 克隆项目:

   git clone https://github.com/your-repo/shengka-wx.git

2. 导入项目:
   • 使用 HBuilderX 打开项目根目录。
   • 或者在微信开发者工具中选择“导入项目”，目录指向 unpackage/dist/dev/mp-weixin (需先运行)。
3. 配置接口地址:
   • 修改 config.js 中的 baseUrl 为你的后端 API 地址。
4. 运行调试:
   • 在 HBuilderX 中点击“运行” -> “运行到小程序模拟器” -> “微信开发者工具”。

注意事项

1. 后端依赖: 本项目是基于 RuoYi (若依) 框架开发的配套前端，后端需部署对应的 Java Spring Boot 服务。
2. 隐私协议: 发布前请务必在 config.js 中替换真实的隐私政策与服务协议链接。
3. 图片资源: 默认使用了部分本地静态图片，正式环境建议替换为 CDN 链接以提升加载速度。

更新日志

• v1.2.0:
  • 新增主播名片积分奖励机制。
  • 优化个人中心签到交互体验。
  • 修复部分机型 TabBar 遮挡问题。

许可证

本项目遵循 MIT 开源协议。

联系方式

如有技术问题或合作意向，请联系：

• 邮箱: [707460325@qq.com]
• 微信: [***]

祝您的项目开发顺利！