UniApp H5 Demo

仓库提供 sdk/uniapp/demo，一个基于 @deeprespond/im-uniapp/h5 的可运行手机端 H5 聊天示例。页面按简化版微信 / Telegram 的移动聊天产品组织：底部导航、全屏会话页和资料抽屉，桌面宽度只作为响应式预览。它适合直接验证 SDK 能力，也可以把其中的页面状态和事件处理迁移到 UniApp Vue 页面。

功能范围

模块	覆盖内容
账号	Ticket 登录、用户名密码登录与注册、退出、连接状态与运行日志
会话	会话列表、未读数、搜索、草稿单聊、自动标记已读、输入状态
好友	好友列表、资料、备注、删除好友、黑名单、好友申请收发、同意与拒绝
消息	文本、图片、视频和文件消息，消息撤回，👍 reaction；首条单聊消息会自动把草稿会话升级为正式会话
媒体入口	录音与位置消息；浏览器缺少麦克风或定位权限时，界面展示 SDK 的失败原因
音视频	语音 / 视频通话入口与高级 RTC 频道控制；能力不可用时把 SDK 错误展示在界面中
界面	昵称编辑、联系人资料侧栏、中英双语界面、响应式窄屏布局

运行

bash

cd sdk/uniapp/demo
cp .env.example .env.local
# 编辑 .env.local；不要提交真实密码、Ticket 或长期密钥。
pnpm install
pnpm dev

打开 Vite 输出的地址（默认 http://127.0.0.1:5175）。也可以不动 .env.local，直接在登录卡片中填写 App Key、API URL 和凭证。

环境变量

.env.example 可复制为 .env.local 后按需填写，全部可省略：

变量	说明
`VITE_IM_APP_KEY`	应用 App Key，默认 `org#app`
`VITE_IM_API_URL`	IM 服务地址；同源部署（本地 dev 代理或生产反代）时无需配置
`VITE_IM_WS_URL`	WebSocket 地址，可选
`VITE_IM_TICKET`	预置的登录 Ticket，可选
`VITE_IM_USERNAME` / `VITE_IM_PASSWORD`	预置的测试账号，可选
`VITE_IM_TARGET_USERNAME`	互测对象账号，可选
`VITE_IM_RTC_CHANNEL`	频道名，默认 `demo-channel`
`VITE_IM_RTC_TICKET`	频道 Ticket，可选

不要把真实密码、Ticket 或长期密钥提交到 Git；生产环境应由业务服务端签发短期 Ticket。

多账号互测

Demo 显式使用 sessionScope: "tab"：会话保存在 sessionStorage，同一标签页刷新保持登录，不同标签页可以分别登录不同账号。开两个浏览器标签页分别登录 Alice 和 Bob，即可做真实的双用户收发、好友申请和通话联调；频道场景可用三个账号验证主持人、成员进出与媒体订阅。业务项目可以按自己的登录策略改回持久化 token，但不要把长期凭证写入前端代码。

构建与检查

bash

pnpm typecheck
pnpm build
pnpm preview

构建会执行严格 TypeScript 检查。手机端与桌面响应式的视觉检查、真实三账号互测流程见仓库内的 H5 测试报告（Agent测试/sdk-uniapp/H5重构三账号互测/）。

Demo 源码包（与仓库同版本，排除依赖与本地配置）：deeprespond-uniapp-demo-h5-1.0.0-alpha.zip

迁移到 UniApp 页面

Demo 使用 Vite + 原生 TypeScript 页面，不依赖 UniApp 运行时；src/ 中的状态管理和事件处理代码可以直接搬进 UniApp 的 Vue 页面。@deeprespond/im-uniapp/h5 的导入必须放在 #ifdef H5 条件编译内，创建与收尾要求见H5 接入。

UniApp H5 Demo ​

功能范围 ​

运行 ​

环境变量 ​

多账号互测 ​

构建与检查 ​

相关 Demo ​

迁移到 UniApp 页面 ​