UniApp H5 Demo

仓库中的 sdk/uniapp/demo 是一个基于 @deeprespond/im-uniapp/h5 的手机端 H5 聊天示例，可以直接运行。页面按常见的移动聊天应用组织：底部导航、全屏的会话页和资料抽屉；桌面宽度下只作响应式预览。可以用它试 SDK 的功能，也可以把其中的页面状态和事件处理搬到 UniApp 的 Vue 页面中。

功能范围

模块	覆盖内容
账号	用凭证（Ticket）登录、用户名密码登录和注册、退出登录，连接状态和运行日志
会话	会话列表、未读数、搜索、草稿单聊、自动标记已读、正在输入
好友	好友列表、资料、备注、删除好友、黑名单，发送、同意和拒绝好友申请
消息	文本、图片、视频和文件消息，撤回，👍 表情回应；单聊的第一条消息发出后，草稿会话自动变为正式会话
录音和位置	录音和位置消息；浏览器没有麦克风或定位权限时，界面显示 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 服务地址；同源部署（本地开发代理或生产环境的反向代理）时不需要填写
`VITE_IM_WS_URL`	WebSocket 地址，可选
`VITE_IM_TICKET`	预先填好的登录凭证，可选
`VITE_IM_USERNAME` / `VITE_IM_PASSWORD`	预先填好的测试账号，可选
`VITE_IM_TARGET_USERNAME`	互测对象的账号，可选
`VITE_IM_RTC_CHANNEL`	频道名，默认 `demo-channel`
`VITE_IM_RTC_TICKET`	频道凭证，可选

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

多账号互测

Demo 设置了 sessionScope: "tab"：登录状态保存在 sessionStorage 中，同一个标签页刷新后仍然登录，不同标签页可以登录不同账号。在两个标签页中分别登录 Alice 和 Bob，就可以互发消息、加好友和通话；频道可以用三个账号测试主持人、成员进出和媒体订阅。你的项目可以按自己的登录方式改为持久保存令牌，但不要把长期凭证写进前端代码。

构建与检查

bash

pnpm typecheck
pnpm build
pnpm preview

构建时做严格的 TypeScript 检查。

Demo 源码包（1.0.1，不含依赖和本地配置）：deeprespond-uniapp-demo-h5-1.0.1.zip

迁移到 UniApp 页面

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

UniApp H5 Demo ​

功能范围 ​

运行 ​

环境变量 ​

多账号互测 ​

构建与检查 ​

相关 Demo ​

迁移到 UniApp 页面 ​