uni-app 是目前比较火的跨平台框架,腾讯云即时通信 IM 正式推出支持三大平台的 uni-app TUIKit。 TUIKit 是基于 IM SDK 实现的一套 UI 组件,其包含会话、聊天、群组管理等功能,基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
目前我们提供了示例客服群 ➕ 示例好友的基础模版,在线客服功能包括:
- 支持发送文本消息、图片消息、语音消息、视频消息等常见消息。
- 支持常用语、订单、服务评价等自定义消息。
- 支持创建群聊会话、群成员管理等。
uni-app TUIKit 支持平台
- 安卓
- iOS
- 微信小程序
效果展示:
安卓演示: | iOS 演示: | 微信小程序演示: |
---|---|---|
| | |
uni-app TUIkit 的优势:
-
极速集成
低代码方案助您快速集成,一天即可完成。
-
跨平台开发
一套代码可以多端打包,支持 iOS、Android、微信小程序。
-
场景化开发
覆盖常用场景,组件化UI助您低代码快速实现所需场景(师生互动,在线答疑,社交娱乐等)。
-
开发成本低
节省大量资金、时间、人力、从而可以做好产品
我们的案例
-
师生互动场景
-
房屋租赁客服场景
-
社交场景:
如何快速集成 TUIKit?
支持模块化接入 ,这是我们 TUIKit 的亮点,客户可以只接入自己需要的模块。 以 C2C 会话为例,在目录结构里,只需要拿出对应的 Chat 模块,就可以轻松集成啦。 下面这是我们的一个客户的接入的案例,客户是实现房屋租赁场景,直接集成 TUIKit chat 模块,无缝对接就实现了展示的效果~
uni-app TUIKit 支持源码集成
从 GitHub 下载 uni-app TUIKit 源码。将 TUIKit 文件夹与自己的工程文件夹置于同级,例如:
步骤一:安装依赖
根据 package.json 进行对应依赖安装
可以参考 uni-app 官网
步骤二:初始化TUIKit
将 app.vue 中的代码复制到 myApplication 项目中,填写 SDKAppID
步骤三:集成静态资源文件
在 myApplication 项目中集成静态资源文件 (工具、图片等)
步骤四:集成所需模块
将 pages 和 components 复制到 myApplication 项目中
也可以只集成自己所需要的模块,将 pages 和其对应的 components 复制到 myApplication 项目目录下
步骤五:更新路由
根据页面更新路由:更新 pages.json 中的 pages 路由
步骤六:获取签名和登录
! 注意
- 正确的
UserSig
签发方式是将UserSig
的计算代码集成到您的服务端,并提供面向 App 的接口,在需要UserSig
时由您的 App 向业务服务器发起请求获取动态UserSig
。更多详情请参见 服务端生成 UserSig。
uni.$TUIKit.login({userID: 'your userID', userSig: 'your userSig'})
.then(function(imResponse) {
console.log(imResponse.data); // 登录成功
if (imResponse.data.repeatLogin === true) {
// 标识账号已登录,本次登录操作为重复登录。v2.5.1 起支持
console.log(imResponse.data.errorInfo);
}
})
.catch(function(imError) {
console.warn('login error:', imError); // 登录失败的相关信息
});
常见问题
1. uni-app 同时支持安卓,iOS, 微信小程序平台,im sdk 如何选择?
请选择 tim-wx-sdk
,npm 安装或者静态引入
// 从v2.11.2起,SDK 支持了 WebSocket,推荐接入;v2.10.2及以下版本,使用 HTTP
npm install tim-wx-sdk@2.15.0 --save
import TIM from 'tim-wx-sdk';
// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
uni.$TUIKit = TIM.create({
SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
});
// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
uni.$TUIKit.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
// uni.$TUIKit.setLogLevel(1); // release 级别,SDK 输出关键信息,生产环境时建议使用
如果您的项目需要关系链功能,请使用 tim-wx-friendship.js
import TIM from 'tim-wx-sdk/tim-wx-friendship.js';
!
- 为了更好地使用 TUIKit,快速定位和解决问题,请勿修改uni.$TUIKit 命名,如果您已经接入tim ,请将 uni.tim 修改为uni.$TUIKit。
- 请将im sdk 升级到 2.15.0,该版本支持了iOS 语音播放
- 若同步依赖过程中出现问题,请切换 npm 源后再次重试。
切换 cnpm 源
>npm config set registry http://r.cnpmjs.org/
>
>
2. 如何上传图片、视频、语音消息等富媒体消息?
请使用 cos-wx-sdk-v5
// 发送图片、语音、视频等消息需要 cos-wx-sdk-v5 上传插件
npm install cos-wx-sdk-v5@0.7.11 --save
import COS from "cos-wx-sdk-v5";
// 注册 COS SDK 插件
uni.$TUIKit.registerPlugin({
'cos-wx-sdk': COS
});
3. uni-app 打包 iOS 语音消息无法播放怎么办?
请将 im sdk 升级到 2.15.0,该版本支持了iOS 语音消息播放
4. uni-app 打包 app 发送语音消息时间显示错误怎么办?
uni-app 打包 app,recorderManager.onStop
回调中没有 duration
和 fileSize
,需要用户自己补充 duration 和 fileSize
- 通过本地起定时器记录时间,计算出 duration
- 本地计算文件大小,fileSize = (音频码率) x 时间长度(单位:秒) / 8,粗略估算。
详细代码请参考 uni-app TUIKit
!
- 语音消息对象中必须包括
duration
和fileSize
,如果没有fileSize
,语音消息时长是一串错误的数字
5、video 视频消息层级过高无法滑动怎么办?
在项目中通过视频图片代替,没有直接渲染 video
,在播放时渲染的方式规避了层级过高问题
详细代码请参考 uni-app TUIKit
! 官方 原生组件说明
6、微信小程序环境,真机预览,报系统错误,体积过大怎么办?
运行时请勾选代码压缩,运行到小程序模拟器 =》运行时是否压缩代码
技术咨询
了解更多详情您可 QQ 咨询:309869925 (技术交流群)
文档:
- SDK API 手册
- SDK 更新日志
- uni-app TUIKit 源码
- 一分钟跑通 Demo (uni-app)
- 快速集成 uni-app TUIKit
- 快速集成微信小程序原生 TUIKit
- 微信小程序原生 TUIKit 源码