uni-app 极快集成 IM 即时通信的方法——TUIKit 来啦

uni-app 是目前比较火的跨平台框架，腾讯云即时通信 IM 正式推出支持三大平台的 uni-app TUIKit。 TUIKit 是基于 IM SDK 实现的一套 UI 组件，其包含会话、聊天、群组管理等功能，基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。

目前我们提供了示例客服群 ➕ 示例好友的基础模版，在线客服功能包括：

• 支持发送文本消息、图片消息、语音消息、视频消息等常见消息。
• 支持常用语、订单、服务评价等自定义消息。
• 支持创建群聊会话、群成员管理等。

uni-app TUIKit 支持平台

• 安卓
• 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。

1.  
   uni.$TUIKit.login({userID: 'your userID', userSig: 'your userSig'})
2.  
   .then(function(imResponse) {
3.  
   console.log(imResponse.data); // 登录成功
4.  
   if (imResponse.data.repeatLogin === true) {
5.  
   // 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
6.  
   console.log(imResponse.data.errorInfo);
7.  
   }
8.  
   })
9.  
   .catch(function(imError) {
10.  
    console.warn('login error:', imError); // 登录失败的相关信息
11.  
    });

常见问题

1. uni-app 同时支持安卓，iOS， 微信小程序平台，im sdk 如何选择？

请选择 tim-wx-sdk ，npm 安装或者静态引入

1.  
   // 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
2.  
   npm install tim-wx-sdk@2.15.0 --save
3.  
   import TIM from 'tim-wx-sdk';
4.  
   // 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
5.  
   uni.$TUIKit = TIM.create({
6.  
   SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
7.  
   });
8.  
    
9.  
   // 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
10.  
    uni.$TUIKit.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
11.  
    // 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 源后再次重试。

1.  
   切换 cnpm 源
2.  
   >npm config set registry http://r.cnpmjs.org/
3.  
   >
4.  
   >

2. 如何上传图片、视频、语音消息等富媒体消息？

请使用 cos-wx-sdk-v5

1.  
   // 发送图片、语音、视频等消息需要 cos-wx-sdk-v5 上传插件
2.  
   npm install cos-wx-sdk-v5@0.7.11 --save
3.  
   import COS from "cos-wx-sdk-v5";
4.  
   // 注册 COS SDK 插件
5.  
   uni.$TUIKit.registerPlugin({
6.  
   'cos-wx-sdk': COS
7.  
   });

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 源码

 

这篇好文章是转载于：学新通技术网