更新记录

1.0.0（2026-09-30） 下载此版本

• 首发版本：树洞信息流、发布与详情、登录与游客体系、话题、活动、成就、VIP 中心等 27 个页面
• 统一请求封装与 Pinia 状态管理骨架，便于对接任意后端
• 内置 z-paging / z-tabs / mp-html 组件，无额外安装依赖
• 完成深色模式、状态栏与安全区适配
• 附带用户协议、隐私政策、帮助反馈等合规页面

平台兼容性

uni-app(4.08)

fengstyle-xshudong 匿名树洞（uni-app 客户端整包）

• 插件 ID：fengstyle-xshudong
• 版本：1.0.0
• 技术栈：uni-app + Vue 3 + Vite 5 + Pinia + uview-plus + SCSS
• 平台：H5、微信小程序、支付宝小程序、百度小程序、抖音/头条小程序、QQ 小程序、京东小程序、快应用、App（Android / iOS）
• 授权：源码可自由用于个人与商业项目，源码包内不含任何 license 限制文件

一、这是什么

一套可以直接运行的匿名树洞（树洞日记 / confession wall）App 客户端源码。核心是「匿名发布 + 匿名浏览」的社区流产品，已内置 27 个页面与完整交互：

• 树洞信息流：首页瀑布流、下拉刷新、上拉分页、点赞、评论、分享
• 匿名体系：游客免登录浏览、邮箱登录、草稿箱、本地足迹记录
• 内容管理：我的发布、我的收藏、浏览历史、点赞、粉丝与关注列表
• 社区扩展：话题广场、话题详情、本地活动（搭子）、创建活动
• 成长与商业化：成就中心、VIP 会员中心（套餐位已就绪）
• 合规页面：用户协议、隐私政策、关于我们、帮助与反馈、意见反馈

界面为全自定义导航栏 + 卡片式视觉，主色 #7C8CF8，深色模式、状态栏适配、安全区适配均已处理。

二、导入与运行

方式 A：HBuilderX（推荐）

1. 下载插件包 fengstyle-xshudong.zip 并解压。
2. 把解压得到的 fengstyle-xshudong 目录重命名为你的项目名（例如 shudong），放到本地任意目录。
3. HBuilderX → 文件 → 导入 → 导入外部项目，选择该目录。
4. 文件 → 发行 → 运行到浏览器 / 微信开发者工具，即可预览。
5. 若提示依赖缺失，右键项目 → 管理 npm 依赖，安装 package.json 中的依赖。

方式 B：CLI（HBuilderX 配套的 uni-app CLI）

1. 解压并进入项目目录。
2. 安装依赖：

npm install

3. 启动 H5 调试：

npm run dev:h5

4. 编译到微信小程序：

npm run dev:mp-weixin

编译产物在 dist/dev/mp-weixin，用微信开发者工具导入该目录即可。

package.json 内置了全部平台的 build/dev 脚本（dev:mp-alipay、dev:mp-toutiao、build:h5、build:app-plus 等），按需执行即可。

三、目录结构

fengstyle-xshudong/
├─ index.html                  H5 模板
├─ package.json                依赖与平台构建脚本
├─ vite.config.js              Vite 配置（scss 兼容告警已处理，端口 5100）
├─ shims-uni.d.ts              类型声明
└─ src/
   ├─ main.js                  应用入口（Pinia、uview-plus 注册）
   ├─ App.vue                  全局生命周期与主题初始化
   ├─ pages.json               路由、easycom 规则、tabBar
   ├─ manifest.json            应用配置（appid、平台配置）
   ├─ uni.scss                 全局 SCSS 变量
   ├─ pages/                   27 个业务页面
   ├─ store/                   Pinia：app / feed / user
   ├─ composables/             useAuth / useFeed / useLike
   ├─ components/              Skeleton 骨架屏等公共组件
   ├─ utils/request.js         统一请求封装（需配置 BASE_URL）
   ├─ static/                  logo、tabBar 图标
   └─ uni_modules/             z-paging、z-tabs、mp-html 三个组件

src/uni_modules 内已随包附带 z-paging（上拉分页）、z-tabs（标签页）、mp-html（富文本），无需再从插件市场重复安装。

四、接入自己的后端

源码为「前端完整 + 数据可插拔」设计，出厂时使用内置演示数据，开箱即可看到完整交互；接入真实服务只需两步。

第 1 步：配置接口地址

编辑 src/utils/request.js 顶部的地址常量：

const BASE_URL = 'https://your-api-domain.com'

该文件已封装：Bearer Token 鉴权、15 秒超时、统一 loading、code === 200 业务码校验、401 自动清理登录态并提示、网络异常兜底提示。

第 2 步：把演示数据换成真实请求

演示数据集中在 3 个 store 中，替换为接口调用即可，页面无需改动：

登录接口的返回约定：接口成功时返回 { code: 200, data: { token, userInfo } }，把 token 与 userInfo 分别写入 setToken、setUserInfo 即可持久化到本地缓存（键名分别为 token、userInfo）。

关键接口约定

• 请求头：Authorization: Bearer {token}，Content-Type: application/json
• 业务码：code === 200 视为成功，其余走 msg 错误提示
• 鉴权失败：HTTP 401 时清除本地登录态并跳转登录页

五、页面清单

六、发布前必做的配置

1. 应用标识：src/manifest.json 中 name、appid、各平台 appid（微信/支付宝等）目前为空，需在 HBuilderX 或 manifest 中填写你自己的。
2. 应用名称：index.html 里的 title 标签与 manifest.json 的 name 字段建议同步改成你的产品名。
3. 正式发布：src/manifest.json 目前是 HBuilderX 的开发态默认配置，正式上架请补齐应用图标、启动图、Android 包名与签名、iOS BundleID 与证书，并按平台要求配置隐私权限声明。
4. 内容审核：社区类 App 在各平台上线前需自行接入内容安全审核（文本、图片）与举报处理流程，包内已内置举报与反馈入口页面。
5. 支付：pages/vip/vip 只包含套餐展示与购买流程 UI，未接入任何支付 SDK，接入前请勿对用户承诺可购买。

七、二次开发提示

• 改主题色：全局主色集中在 src/uni.scss 与各页 #7C8CF8，建议全局替换后再逐页检查。
• UI 组件：已在 src/pages.json 中通过 easycom 配置 uview-plus 组件，模板里可直接用 u- 前缀的组件标签，例如 u-icon 组件的 name 属性设为 arrow-left，无需 import。
• 分页：z-paging 已随包附带，列表页直接使用其组件即可获得下拉刷新与上拉加载；接入后端时把 mock 数据换成 z-paging 的 @query 请求即可。
• 状态管理：Pinia setup 语法，app / feed / user 三个 store 分别对应设备与主题、内容流、登录态。
• 本地缓存：token、userInfo、theme 三个键使用 uni.setStorageSync 存储，清缓存逻辑在设置页。

八、常见问题

Q：运行后数据都是演示的？ A：是的，源码出厂为演示数据模式，用于完整预览交互。接入方法见第四节，两步即可切换到真实接口。

Q：提示找不到 uview-plus 组件？ A：先执行 npm install 安装依赖；HBuilderX 项目需在 src/uni_modules 或根目录确认依赖存在。若打包后丢失，请在 HBuilderX 中重新执行「运行到浏览器」。

Q：如何只做 H5？ A：npm run dev:h5 或 npm run build:h5，产物在 dist/build/h5，可直接部署到任意静态服务器或云托管。

Q：能改成其他品类吗？ A：可以。页面结构、路由、状态管理与组件均为标准 uni-app 写法，替换业务文案与数据源即可复用到其他社区/工具类 App。

Q：是否支持 App 端？ A：支持，且推荐用 HBuilderX 打开项目后「运行到手机 / 制作原生 App」调试打包。若使用 CLI，可用 npm run dev:custom、npm run build:custom 配合自定义参数编译自定义平台产物。

九、更新日志

v1.0.0

• 首发版本：树洞信息流、发布与详情、登录与游客体系、话题、活动、成就、VIP 中心等 27 个页面
• 统一请求封装与 Pinia 状态管理骨架，便于对接任意后端
• 内置 z-paging / z-tabs / mp-html 组件，无额外安装依赖
• 完成深色模式、状态栏与安全区适配
• 附带用户协议、隐私政策、帮助反馈等合规页面