更新记录

1.0.1（2026-06-26）下载此版本

首页「发现 / 关注」信息流改为列表流展示（homeFeedList），与圈子详情列表样式一致
消息页开放「新增关注」模块（pages_main/message/newFollow），含粉丝列表与发现好友推荐
补充 user/interestUser 等消息相关接口声明
README 增加可扩展业务模块说明（商城、IM、礼物、勋章、VIP、搭子等），含目录与 API 对照及接入步骤
修复首页列表 VIP 昵称颜色调用报错

1.0.0（2026-06-26）下载此版本

首发 HaoSNS社交系统 uni-app 体验版模板（Vue3 + uview-plus）
包含首页信息流、圈子、帖子详情、搜索、用户主页与设置等基础页面
支持 H5、微信小程序、App 多端编译
通过 config.json 配置后端接口域名
内置 dayjs 与 uni.scss，支持 HBuilderX 3.8+ 直接导入运行
精简体验版：未包含的路由由 demoGuard 拦截提示

平台兼容性

uni-app(3.8.0)

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

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

HaoSNS社交系统体验版

基于 uni-app（Vue 3） 的社交系统前端模板，支持 H5、微信小程序、iOS App、Android App 多端编译。
本包为 精简体验版：保留社区主流程相关页面与接口封装，便于在 HBuilderX 中导入、运行与二次开发学习。

项目说明

HaoSNS社交系统体验版面向「社区 + 圈子 + 用户体系」类应用的前端工程实践，采用 主包 + 分包 结构组织页面，统一通过 config.json 配置后端域名，经 utils/axios.js 发起请求。

本模板已内置的核心模块：

模块	说明
首页信息流	推荐 / 关注 Tab，列表流展示帖子（`components/home/homeFeedList.vue`）
圈子	广场发现、圈子详情、圈内帖子列表与布局切换
帖子	精简详情页 `demoDetail`、评论列表、点赞 / 收藏接口
用户	个人主页、关注 / 粉丝 / 互关、资料编辑、黑名单
搜索	内容搜索、圈子搜索
话题与专题	话题详情、专题列表
消息（部分）	消息顶栏入口；新增关注页（`pages_main/message/newFollow`）
举报	举报分类、提交与我的举报
设置	密码、安全、隐私、关于等子页

体验版限制说明：

未随包提供的分包目录（见下文「可扩展业务模块」）不在本 zip 中
命中 utils/demoGuard.js 中 BLOCKED_PATTERNS 的路由会提示「功能未开放」
本包 api/api.js 仅声明体验版所用接口；完整工程另有独立 API 常量文件，按业务模块划分更多端点
以本仓库 pages.json 注册路由 与 api/api.js 已声明接口 为实际上线能力边界

技术栈

类别	选型
跨端框架	uni-app（Vue 3 + Vite）
UI 组件	uview-plus
状态管理	Pinia + Vuex
富文本	mp-html、自研 `richContent` 格式化
日期处理	dayjs（内置 `common/vendor/dayjs`）
网络请求	`utils/axios.js`（封装 token、错误处理）
后端协议	RESTful JSON，基础路径 `{domain}/api/`

多端支持

端	说明
H5	浏览器访问，适配移动端视口
微信小程序	需配置 AppID 与 request 合法域名
App	可云打包或本地自定义基座调试

同一套源码编译到各端；差异编译通过 manifest.json 与各平台条件编译指令处理。

首页 Tab 结构

首页容器为 pages/index/index（或模板 pages/index/template/sns.vue），底部 Tab 通常包括：

Tab	对应组件 / 页面	说明
首页	首页模板（推荐流等）	拉取文章列表、轮播、置顶等
圈子 / 广场	`pages/circles/template/discover.vue`	圈子分类与列表
消息	`pages_main/components/Message.vue`	顶栏通知入口；已开放「新增关注」子页
我的	`pages_main/my/oldMy.vue`	个人中心入口

Tab 文案与图标可由后端 index/home、nav/list 等接口动态下发（以后台配置为准）。

接口对接

1. 配置域名

编辑根目录 config.json：

{
  "domain": "https://你的后端域名"
}

api/api.js 会读取该字段并拼接为 https://你的后端域名/api/。

2. 请求封装

统一入口：utils/axios.js 中的 request 方法
接口地址常量：集中在 api/api.js
登录态：由 axios 层读取本地 token 并写入请求头（具体字段以后端约定为准）

3. App 打包

在 manifest.json 中配置应用名称、图标、权限说明；地图、推送、微信 SDK 等模块按实际使用功能勾选。

快速开始

环境要求

HBuilderX 3.8.0+（uni-app Vue3 项目）
可选：Node.js（仅当自行安装额外 npm 依赖时需要）

导入与运行

HBuilderX → 文件 → 导入 → 从本地目录导入
选择本项目根目录（根目录需包含 manifest.json、pages.json）
修改 config.json 中的 domain 为你的后端地址
运行 → 运行到浏览器 / 微信开发者工具 / 手机基座

依赖说明：

dayjs 已 vendored 至 common/vendor/dayjs，并通过 vite.config.js 配置别名，一般无需 npm install
unpackage/ 为本地编译缓存，首次运行自动生成；上传插件 zip 时不要包含此目录

首次运行检查清单

[ ] manifest.json 中无他人 appid（上架模板应留空或使用测试 id）
[ ] config.json 域名可访问且接口返回正常
[ ] 根目录存在 uni.scss、vite.config.js
[ ] H5 运行无 $u-main-color 等 SCSS 变量报错

目录结构

HaoSNSCore-Demo/
├── api/
│   └── api.js              # 接口 URL 常量
├── common/vendor/dayjs/    # 内置 dayjs
├── components/             # 公共组件（feed 卡片、圈子头部等）
├── config.json             # 后端域名
├── pages/                  # 主包页面
│   ├── index/              # 首页 Tab
│   ├── login/              # 登录
│   ├── search/             # 搜索
│   └── circles/template/   # 圈子发现页
├── pages_main/             # 分包
│   ├── reviewDetails/      # 帖子详情（demoDetail）
│   ├── circlesInDetail/    # 圈子详情
│   ├── userDetails/        # 用户主页
│   ├── message/            # 消息子页（newFollow 等）
│   ├── my/                 # 个人中心
│   ├── settings/           # 设置子页
│   └── components/         # 分包内组件（如 Message）
├── static/                 # 静态资源
├── uni_modules/            # uview-plus、mp-html 等
├── utils/
│   ├── axios.js            # 请求封装
│   ├── demoGuard.js        # 未包含路由拦截
│   ├── GlobalUtils.js      # 通用工具
│   └── richContent.js      # 富文本 / 评论 HTML 处理
├── App.vue
├── main.js
├── manifest.json
├── pages.json
├── uni.scss
└── vite.config.js

可扩展业务模块

以下为完整版前端工程中的模块化业务能力（按分包与 API 命名空间归纳）。本体验版 zip 默认不包含对应页面源码；二开时可从完整工程迁移对应目录，在 pages.json 注册路由、在 api/api.js 补充接口常量，并从 demoGuard.js 的 BLOCKED_PATTERNS 中移除相关路径。

下列仅列独立业务模块，不含登录注册、点赞收藏、基础用户资料等已内置能力。

内容与发布

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
发帖编辑器	`pages_sendPage/`	`article/add`、`article/addDraft`、`article/draft_*`、`publish_page/config`	富文本发帖、选圈选话题、定位、草稿箱、发布类型配置
视频流详情	`pages_chat/home/videoDetails`	`article/video_lists`	竖屏视频帖连续播放流
草稿管理页	`pages_main/draftPage/`	`article/draft_lists`、`article/draft_del`	草稿列表与编辑入口
内容录制	`pages_main/recording/`	`upload/video`	拍摄 / 录制并上传视频素材
投票	—	`vote/add`	帖子附带投票选项
弹幕	—	`danmaku/lists`、`danmaku/save`	视频或活动场景弹幕收发
自定义字段	—	`field/list`、`field/add`、`field/article`	圈子 / 帖子扩展字段（插件）
图章加精	—	`article_stamp/list`、`article_stamp/addGoodArticle`	圈主加优、用户申请加优
帖子管理	`pages_main/createPage/` 等	`article/show`、`article/mylist`、`article/edit`、`article/update`、`article/statistics`	上下架、编辑、发帖数据统计

即时通讯与社交

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
私聊 / 群聊	`pages_chat/chat/`	`chat/chatList`、`chat/chatRecord`、`chat/sendPrivateMessage`、`chat/sendGroupMessage`	会话列表、聊天记录、发消息、已读回执
群管理	`pages_chat/chat/genGroup` 等	`group/createGroup`、`group/pull`、`group/kick`、`chat/groupUpdate`	建群、拉人、踢人、群资料
付费***	`pages_chat/chat/joinGroup`	`group/groupOrder`、`group/requestJoin`	付费、申请
圈子群聊	`pages_chat/chat/circleChat`	`chat/chatCircleMessage`、`chat/sendCircleMessage`	圈子维度群消息
客服	`pages_chat/chat/chatKefu`	`kefu/sendMessage`、`kefu/messageList`	客服会话
GoEasy 通道	`pagesGoEasy/`	与 `chat/*` 配合	第三方 IM 通道封装（可选）
朋友圈	`pages_main/friend_circle/`	动态流相关	好友圈时间线
好友扩展	`pages_friend/`	`user_extend/friend` 等	好友关系扩展页
附近的人	`pages_main/peopleNearby/`	`userExtend/search`	LBS 发现用户
消息子页（其余）	`pages_chat/message/`	`notice/lists`（`type` 区分）	赞和收藏、评论和@、系统通知列表
活动消息	`pages_main/activityMessages/`	活动类通知	运营 / 活动推送聚合
表情包	—	`emo/list`	聊天与评论表情资源

礼物、勋章与成长

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
礼物	`pages_chat/gift/giftList`	`gift/list`、`gift/listByCategory`、`gift/sendGift`、`gift/recharge`	礼物分类、赠送、礼物场景积分充值
勋章	`pages_main/medal/`	`medal/lists`、`medal/checkMedal`、`medal/receive`、`medal/receiveAll`	勋章墙、条件检测、领取
用户等级	`pages_main/user_levels/`	`user/level`	等级展示与权益
签到	`pages_main/signin/`、`pages_main/check/`	`sign/sign`、`sign/lists`、`circle/sign`	全站签到、圈子签到与排行

商城与交易

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
自营商城	`pages_selfshop/`	`goods/`、`cart/`、`order/`、`after_sale/`、`user_address/*`	商品、购物车、下单、物流、售后、收货地址
二手商城	`pages/twoShop/`	`twoshop.goods/`、`twoshop.order/`、`twoshop.config/*`	闲置发布、浏览、下单
积分商城	`pages_main/pointShop/`	积分商品与兑换（与后台积分插件配合）	积分兑换实物或虚拟商品
统一支付	`pages_sendPage/money/` 等	`pay/payway`、`pay/prepay`、`pay/payStatus`	微信支付等多渠道预下单
苹果内购	—	`AppleIAP/verifyReceipt`	iOS 内购票据校验
钱包	`pages_main/newMoney/`、`pages_sendPage/money/`	`user/wallet`、`recharge/*`、`account_log/lists`	余额、充值记录、流水
提现	`pages_sendPage/money/withdraw`	`user/withdraw_balance`、`user/withdraw_earnings`	余额 / 收益提现

红包、转账与打赏

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
私聊红包	`pages_chat/redPacket/`	`trade/private_send_red`、`trade/private_red_receive`	单聊发红包 / 领红包
群红包	—	`trade/group_send_red`、`trade/group_red_receive`	群聊红包
转账	`pages_chat/chat/transfer`	`trade/transfers`、`trade/receive_transfers`	用户间转账
帖子红包	—	`trade/article_send_red`、`trade/article_red_receive`	帖子挂载红包
帖子打赏	—	`article/submit_reward`	对作者打赏
分享 / 阅读红包	—	`trade/article_share_callback`、`trade/article_red_read_callback`	分享或阅读激励

会员、推广与运营

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
VIP 会员	`pages_main/vip/`	`vip/index`、`vip/createOrder`	会员套餐与开通订单
帖子置顶（付费）	`pages_main/articleTop/`	`articleTop/packageList`、`articleTop/createOrder`、`articleTop/record`	置顶套餐购买与记录
广告推广 Pin	—	`pin/packageList`、`pin/createOrder`、`pin/banner`、`pin/record`	信息流广告位、套餐订单、曝光点击统计（体验版仅保留部分 `pin/feed*` 互动接口）
圈子创建付费	`pages_main/circle/`	`circle/create`、`circle/circle_create_order`	创建圈子及付费开通
DIY 装修	—	`Diy/getDefault`	首页 / 频道可视化页面配置
海报 / 小程序码	—	`poster/code`、`poster/mpCode`	分享海报与小程序码生成

垂直场景

模块	前端目录（完整版）	API 前缀 / 代表接口	能力概述
搭子活动	`pages_partner/`	`partner/list`、`partner/createPartner`、`partner/createOrder`、`partner/userJoinPartner` 等	活动发布、报名、订单、评论
拼车	`pages_main/carPooling/`	拼车业务接口	顺风车信息发布与详情
商户	`pages_merchant/`	`merchantConfig/list`	商家入驻与配置
广场扩展	—	`plaza/recommendGroups`、`topic/plazaHot`	广场推荐群、热门话题封面

模块接入步骤（通用）

从完整工程复制对应 分包目录 至本项目（注意 components/、static/ 依赖一并迁移）
在 pages.json → subPackages 注册页面路径
在 api/api.js 按上表补充 {模块}/... 接口常量（命名可与完整版 HaoSNSCore/api/api.js 对照）
编辑 utils/demoGuard.js，删除该模块相关的 BLOCKED_PATTERNS 条目
在 Tab / 个人中心 / 消息顶栏等入口增加 navigateTo（若原入口被 showCommercialFeatureTip 拦截，需改为真实路由）
确认后端已安装并启用对应插件或业务开关

二次开发说明

新增页面

在 pages/ 或 pages_main/ 下新建 .vue 文件
在 pages.json 的 pages 或 subPackages 中注册路径
若需新接口，在 api/api.js 增加 URL，并在页面中通过 request 调用

路由拦截（demoGuard）

utils/demoGuard.js 在 App.vue 启动时安装，对 navigateTo 等 API 进行包装：

命中 BLOCKED_PATTERNS 的路径 → 弹出「功能未开放」
完整版帖子路径会自动重写到 demoDetail

自行扩展功能时，应 从拦截列表中移除 对应 pattern，并确保页面文件已随包提供。

样式与主题

全局 SCSS 变量：uni.scss（含 uview-plus 主题引入）
页面内可使用 uview-plus 组件，easycom 已在 pages.json 配置

帖子详情页

体验版使用 pages_main/reviewDetails/demoDetail.vue，为精简实现，支持：

标题、正文（HTML / 纯文本）
图片九宫格、视频
评论列表（富文本评论渲染）

编译与发布

目标	操作
H5	发行 → 网站-H5；将产物部署到 Web 服务器
微信小程序	发行 → 小程序；用开发者工具上传
App	发行 → 原生 App；使用云打包或本地证书打包

各端发行前请确认 manifest.json 版本号、权限与模块配置符合上架要求。

常见问题

Q：编译报错 $u-main-color 或找不到 dayjs？
确认 zip 内含 uni.scss、common/vendor/dayjs、vite.config.js，重启 HBuilderX 后重新运行。

Q：接口 404 或跨域？
检查 config.json 域名是否正确；H5 开发时注意后端 CORS；小程序须配置合法域名。

Q：登录后仍跳回登录页？
检查 token 是否写入本地存储、axios 是否携带 token、后端 session 是否过期。

Q：点击发帖、聊天、商城等提示「功能未开放」？
属体验版预期行为：对应模块页面未纳入本 zip。参见上文「可扩展业务模块」迁移目录与接口，并从 demoGuard.js 放行。

Q：如何对照完整版有哪些 API？
完整工程 api/api.js 按业务模块声明了更多端点（如 gift/*、medal/*、goods/*、chat/*、trade/*、partner/* 等）；本包仅保留体验流程所需子集，扩展时按模块拷贝常量即可。

Q：「新增关注」为什么能用，其他消息入口不行？
体验版已单独纳入 pages_main/message/newFollow 及依赖组件；赞和收藏、评论和@、系统通知等仍归属 pages_chat/message/ 分包，需按模块迁移后开放。

Q：帖子详情样式与线上一致吗？
体验版详情页为 demoDetail，与完整工程中的 reviewDetails 不是同一文件；二开时可替换为自有详情组件。

Q：如何替换 Tab 图标与名称？
多数由后端 nav/list、index/home 下发；亦可在前端 Tab 配置处写死（见 pages/index/index.vue）。

版本

当前版本：1.0.0
最低 HBuilderX：3.8.0（Vue3 + Vite）

许可说明

本模板仅供学习与技术参考。使用请遵守相关法律法规；再分发时请保留必要版权信息。

HaoSNS社交系统 SNS 社交 uni-app 圈子 前端模板