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 頁面 ​