更新记录
1.0.0(2026-03-04) 下载此版本
新版本发布,后续有时间会继续开发TRTC视频通话模块,目前仅在微信小程序测试,其它平台未进行测试与适配
平台兼容性
uni-app(4.83)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | × | - | - | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | × | × | × | × | × | × | × | × | × | × | × |
替换腾讯云密钥 (核心配置) 你需要去 创建应用,获取 SDKAppID 和 SecretKey。
配置底层服务 utils/im-service.js 打开文件,将第 4 行的 SDKAppID 替换为你的应用 ID:
配置签名生成工具 utils/GenerateTestUserSig.js 打开文件,将开头的两个常量替换为你的真实参数:
Step 3: 配置测试账号并运行 修改当前登录账号 (App.vue) 打开 App.vue,在 globalIMLogin 方法中,将 myUserID 改为你想要登录的测试号(建议纯英数):
在会话列表进行聊天 (pages/message/message.vue) 确保你已经在腾讯云控制台的【辅助工具】里,或者用网页版 Demo 登录了另一个账号(如 test_user_B)给 test_user_A 发送一条消息。 此时你的列表页就会出现动态会话,点击即可进入完美封装的 chat.vue 聊天界面!
📁 核心目录结构说明 💡 进阶:如何二次开发“自定义业务卡片”? 如果你想增加新的卡片(如:发送商品链接),只需两步:
发送端 (chat.vue):仿照 sendResumeCard 方法,调用 this.$im.tim.createCustomMessage,在 payload.data 中传入你自定义的 JSON 字符串(如 { type: 'goods', id: 101, price: '99' })。
解析端 (chat.vue):在 formatTimMessage 方法中,拦截 msg.type === this.$im.TIM.TYPES.MSG_CUSTOM,解析 JSON 并将其转换为前端模板需要的变量结构。
⚠️ 生产环境上线安全警告(后端开发者必读) 本模板为了方便快速预览,使用了前端生成 UserSig 的方案。但在正式的商业生产环境中,将 SecretKey 暴露在前端是极不安全的!
正式上线前的重构建议:
废弃前端的 GenerateTestUserSig.js。
在您的 Java 后端(如 SpringBoot 环境)集成腾讯云 IM 服务端 SDK。
提供一个业务接口(如 /api/im/getUserSig)。
在 App.vue 的 globalIMLogin 中,先请求该 Java 接口获取 UserSig,拿到后再调用 this.$im.login。

收藏人数:
下载插件并导入HBuilderX
下载插件ZIP
赞赏(0)
下载 2125
赞赏 2
下载 11382197
赞赏 1867
赞赏
京公网安备:11010802035340号