# app-uniapp

**Repository Path**: heralink/app-uniapp

## Basic Information

- **Project Name**: app-uniapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-20
- **Last Updated**: 2026-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Heralink App uni-app 版

`app/web` 的 uni-app 移植版本，一套代码输出 **H5 / 微信小程序 / 安卓 App** 三端。

## 架构与职责

```text
H5 / 微信小程序 / Android App
    ├── HTTP /app-api/* ───────→ app/server (:9090)
    └── WebSocket 实时连接 ────→ communication-server (:8181)
                                      └── WebRTC 信令转发
```

本仓库只负责跨端界面、API 调用封装、WebSocket 客户端和端能力适配。用户、好友、群组、房间、主题及消息历史由 `app/server` 管理；实时连接和通话信令由独立通讯服务管理。音视频媒体不经过通讯服务，使用浏览器或平台提供的 WebRTC 能力。

后端地址在 [`src/config.js`](src/config.js) 配置。H5 默认通过 Vite 代理访问本地 `app/server`，微信小程序和 Android App 必须配置可访问的 HTTPS/WSS 地址及平台域名白名单。

## 快速开始

```bash
npm install --registry=https://registry.npmmirror.com   # 国内源安装更快更稳

# H5（默认走 vite proxy 转发 /app-api 和 /uploads -> http://127.0.0.1:9090）
npm run dev:h5
# 本机浏览器访问：http://localhost:3003/
# 手机浏览器访问：http://<电脑局域网IP>:3003/

# 微信小程序（手动启动，使用微信开发者工具打开 dist/dev/mp-weixin）
npm run dev:mp-weixin
# 真机/模拟器开发前，在 src/config.js 将 nativeHost 改为电脑局域网 IP

# App（手动启动，使用 HBuilderX 打开本目录并运行到手机/模拟器）
npm run dev:app
# 真机/模拟器开发前，在 src/config.js 将 nativeHost 改为电脑局域网 IP

# 也可以从 app 根目录统一启动后端、旧 Web/Admin 和 uni-app H5：
# Windows：双击 app/start.bat
# Linux/macOS：bash app/start.sh
# 微信小程序与 Android App 继续用上面的命令手动指向开发工具。
```

## 目录结构

```
src/
├── pages/              tabBar 主页面（chat/friends/group/room/topic）
├── pages-sub/          分包页面（预留，小程序主包 2MB 限制）
├── components/         业务组件
├── api/                接口封装（对应 app/web/src/api，路径完全一致，底层换成 uni.request）
├── composables/        useWebSocket（uni.connectSocket 版，逻辑同 Web）
├── utils/
│   ├── storage.js       统一封装 uni.getStorageSync（替代 localStorage）
│   ├── sound.js         新消息提示音（H5 用 Web Audio 合成，小程序/App 用静态音频文件）
│   ├── upload.js        跨端选文件/上传（uni.chooseImage/chooseVideo/chooseFile）
│   ├── useMessage.js    toast/confirm 封装（替代 ElMessage）
│   └── call/            音视频通话能力分发（H5=WebRTC，小程序/App 受平台能力限制）
├── config.js            后端地址配置（H5 走相对路径，小程序/App 必须绝对地址 + 域名白名单）
├── manifest.json        三端各自的权限/AppID 配置
└── pages.json           路由 + tabBar
```

## 当前进度（2026-09-20）

| 模块 | 状态 |
|------|------|
| 登录/注册 | ✅ 已完成 |
| 好友页（列表/申请/备注/拉黑） | ✅ 已完成 |
| 会话列表（统一混排个人/群/订阅/房间，未读+tabBar 角标） | ✅ 已完成（pages/chat） |
| 聊天窗口（单聊/群聊/房间/主题 四模式合一） | ✅ 已完成（pages-sub/chat-room 分包） |
| 文本/图片/语音/视频/文件消息、撤回、回复、转发、表情回复 | ✅ 聊天窗口内已实现 |
| 聊天记录视觉（微信式：仅内容气泡着色，头像/昵称/时间在页面背景层） | ✅ 已完成 |
| 音视频通话（H5 限定，含来电/通话浮层） | ✅ 代码已移植，待真机联调 |
| 群组/房间/主题 管理页（建群/成员/公告/阵容等） | ✅ 已完成移动端迁移 |
| 广播页、管理后台 | ⬜ 未开始 |

> 构建验证：`npm run build:h5`、`npm run build:mp-weixin`、`npm run build:app` 均通过（分包结构见 dist/build/mp-weixin/app.json）。
> 依赖 `sass`（devDependency），新克隆后需 `npm install`。
> 通话信令仅在打开聊天窗口（单聊）时接收；其它页面收到来电不弹接听（v1 限制）。
> 小程序/App 端消息提示音需在 `src/static/` 放置 `notify.mp3`（缺失时静默）。
> 生产部署：`npm run build:h5` 的产物在 `dist/build/h5`，Docker/Nginx 部署入口为 `/uniapp/`；`http://localhost:3003/` 仅用于本地开发。

## 聊天界面约定

- **消息气泡**：只有消息内容（文本/语音/文件/上传失败）带气泡；接收方为白色，发送方为微信式绿色 `#95ec69`。头像、昵称、时间、引用、操作按钮、表情反应均直接显示在聊天页浅灰背景上。图片与视频保持媒体块本身，不额外套一层气泡。
- **信息行方向**：对方为「头像 昵称 时间」，我方为「时间 昵称 头像」，昵称始终靠头像一侧，信息行宽度随内容收缩。
- **附件面板**：输入框加号菜单为最多 4 列的固定网格，每项占 25% 宽度，超出后从第二行左侧继续排列；面板宽度随启用项数量收缩，不铺满屏幕。
- **表情回复**：数据存在服务端，进入会话或翻页时按消息批量拉取（`GET /message/reactions?msg_ids=a,b,c`），所以刷新后徽章仍在。选择器里已加过的表情会高亮，**再点一次是取消**（与微信一致），点已有徽章同样是取消。本地状态落后于服务端时（重复添加返回 409）会提示「已经添加过该表情」，不再静默。表情没有实时推送，别人新加的表情要重新进入会话才会出现。没有 `msg_id` 的消息不显示表情入口。
- **文件地址**：后端返回 `/uploads/...` 相对路径，H5 依赖 Vite 代理，生产环境需由 Nginx 转发到 `app/server`。


## 界面预览

![界面 1](screenshots/screen-01.png)
![界面 2](screenshots/screen-02.png)
![界面 3](screenshots/screen-03.png)
![界面 4](screenshots/screen-04.png)

## 与 app/web 的差异

- 无 Element Plus：目前用原生 uni-app 组件 + 自定义样式。
- 请求库不同：web 用 axios，uni-app 用 luch-request。**luch-request 的错误对象没有 `statusCode` 属性**，HTTP 状态码在 `error.response.statusCode`；写成 `error.statusCode` 会恒为 `undefined`（曾因此让 409 被当成失败弹出提示、401 自动登出分支永不触发）。
- 音视频通话目前仅 H5 端可用（依赖 `RTCPeerConnection`）；小程序/App 端需要接入对应平台的实时音视频能力。
- 小程序 / App 上线前需要在微信开放平台 / App 配置里加 HTTPS + WSS 域名白名单，本地开发不受影响。