uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频

uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频

原则

拿来即用，节省开发时间

介绍

腾讯的给的例子内容比较乱，我花了好长时间才集成出来，然后对聊天页面做了UI美化。

效果图

使用方式

1. 将文件放到相应的位置
   
2. app配置

<script>
	import TIM from 'tim-wx-sdk';
	import COS from 'cos-wx-sdk-v5';
	import TIMUploadPlugin from 'tim-upload-plugin';
	import logger from './utils/logger'; // app.js
	import {
		SDKAppID
	} from './debug/GenerateTestUserSig.js';
	import {genTestUserSig} from "./debug/GenerateTestUserSig.js"
	
	
	export default {
		onLaunch: function() {
			uni.setStorageSync(`TIM_${SDKAppID}_isTUIKit`, true);
			// 重点注意： 为了 uni-app 更好地接入使用 tim，快速定位和解决问题，请勿修改 uni.$TUIKit 命名。
			// 如果您已经接入 tim ，请将 uni.tim 修改为 uni.$TUIKit。
			uni.$TUIKit = TIM.create({
				SDKAppID: SDKAppID
			});
			
			// 注册 COS SDK 插件
			uni.$TUIKit.registerPlugin({
				'cos-wx-sdk': COS,
				'tim-upload-plugin': TIMUploadPlugin
			});
			
			// 如果您已创建了 tim，请将 tim 实例挂载在 wx 上，且不可以修改 wx.$TIM（修改变量可能导致 TUICalling 组件无法正常使用）, 完成 TUICalling 初始化，
			// 如果您没有创建，可以不传
			// #ifdef MP-WEIXIN
			wx.$TIM = uni.$TUIKit;
			// #endif
			uni.$TUIKitTIM = TIM;
			uni.$TUIKitEvent = TIM.EVENT;
			uni.$TUIKitVersion = TIM.VERSION;
			uni.$TUIKitTypes = TIM.TYPES; // 监听系统级事件
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY, this.onSDKReady);
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady);
			uni.$TUIKit.on(uni.$TUIKitEvent.KICKED_OUT, this.onKickedOut);
			uni.$TUIKit.on(uni.$TUIKitEvent.ERROR, this.onTIMError);
			uni.$TUIKit.on(uni.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);
			
			//重新设置用户信息
			uni.$LTResetLoginData = this.resetLoginData;
			uni.$LTLogin = this.liaotianLogin;
			uni.$LTUpdateMyInfo = this.ltUpdateMyInfo;
		},
		globalData: {
					// userInfo: userID userSig token phone
					userInfo: {
						userID:'',
						userSig:""
					},
					// 个人信息
					userProfile: {
					},
					isTUIKit: true,
					headerHeight: 0,
					statusBarHeight: 0,
					SDKAppID: SDKAppID,
					isSDKReady:false
				},
		methods: {
			onTIMError(event) {
				console.info("聊天-SDK遇到错误时触发",event)
				uni.showModal({
					title:"系统提示",
					content:'初始化聊天错误：' + event.data.code + "," + event.data.message,
				})
			},
			onSDKReady({name}) {
				console.info("聊天-SDK进入ready状态时触发",name)
				const isSDKReady = name === uni.$TUIKitEvent.SDK_READY ? true : false
				getApp().globalData.isSDKReady = true
				this.ltUpdateMyInfo()
			},
			onSdkNotReady() {
				console.info("聊天-SDK进入not ready状态时触发")
				getApp().globalData.isSDKReady = false
			},
			onNetStateChange(event) {
				console.info("聊天-网络状态改变通知",event)
				// v2.5.0 起支持
				  // event.data.state 当前网络状态，枚举值及说明如下：
				  // TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
				  // TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动，SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
				  // TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试，若用户网络恢复，SDK 会自动同步消息
				  
			},
			onSDKReload() {
				console.info("聊天-SDK重启")
			},
			onKickedOut() {
				console.info("聊天-用户被踢下线时触发")
				uni.showModal({
					title:"系统提示",
					content:'您的聊天账号在另一台设备登陆,若不是本人，请联系管理员',
				})
				
				
			},
			liaotianLogin(event){
				if(getApp().globalData.isSDKReady === true){
					if(this.isNotNull(event)){
						event(true)
					}
					return
				}
				this.resetLoginData()
				console.info("签名",getApp().globalData.userInfo)
				uni.$TUIKit.login({userID: getApp().globalData.userInfo.userID, userSig: getApp().globalData.userInfo.userSig})
				.then((imResponse)=> {
				  console.log("登陆结果",imResponse.data); // 登录成功
				  if (imResponse.data.repeatLogin === true) {
				    // 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
				    console.log("登陆成功",imResponse.data.errorInfo);
				  }else{
					 let interval = setInterval(()=> {
					 	console.info("sdk是否准备",getApp().globalData.isSDKReady)
					       if(getApp().globalData.isSDKReady === true){
					 		  if(this.isNotNull(event)){
					 			  clearInterval(interval)
					 			  event(true)
					 		  }
					 	  }
					 }, 100) 
				  }	
				})
				.catch((imError)=> {
					console.warn('登陆失败:', imError); // 登录失败的相关信息
					uni.showModal({
						title:"系统提示",
						content:"聊天登陆失败，请稍后重试",
					})
				  event(false)
				});
			},
			// 聊天 - 初始化数据
			resetLoginData() {
				//从数据库获取到用户信息
				let userInfo = {
					fbNickName:"闫伟",
					fbAvatarUrl:"https://thirdwx.qlogo.cn/mmopen/vi_32/LWicoUend7QOfiabWDRjfpPDB51LzhbzVzjibicqDD2ztqy7BlpicRn8HToMoDVg9g1XfNiayHStXfC2f6yGNHgLueEw/132",
					liaotianId:"lt402882f280bb92810180bbb3f40a000f",
				}
				getApp().globalData.expiresIn = '';
				getApp().globalData.sessionID = '';
				getApp().globalData.userInfo = {
					userID: userInfo.liaotianId,
					userSig: genTestUserSig(userInfo.liaotianId).userSig,
				};
				getApp().globalData.userProfile = {
					userID:userInfo.liaotianId,
					nick: userInfo.fbNickName,
					avatar:userInfo.fbAvatarUrl
				};
			},
			ltUpdateMyInfo(){
				if(getApp().globalData.isSDKReady === true){
					let userInfo = this.$user.getUserInfo()
					// 修改个人标配资料
					let promise = uni.$TIM.updateMyProfile({
					  nick: userInfo.fbNickName,
					  avatar: userInfo.fbAvatarUrl,
					  // allowType: uni.$TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
					});
					promise.then(function(imResponse) {
					  console.log("更新资料成功",imResponse.data); // 更新资料成功
					}).catch(function(imError) {
					  console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
					});
				}
			},
			/**
			 * 是否不为空
			 * @param {Object} params
			 */
			isNotNull(params){
			      if (typeof(params) === 'undefined'){
					  return false
				  }else if(params == null){
					  return false
				  }
				  
				  return true
			}
		},
		onShow: function(res) {
			
		},
		onHide: function() {
		
		}
	}
</script>

<style>
	@import "colorui/main.css";
	@import "colorui/icon.css";
	
	body{
		height: 100%;
		width: 100%;
		background-color: #ededed;
		color: #333333;
		font-family: 'ukijtor'
	}
	
	.full-back-color-gray{
		height: 100%;
		background-color: #f1f1f1;
	}
	
	.full-back-color-white{
		height: 100%;
		background-color: white;
	}
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}
	
	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}
	
	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	
	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}
	
	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}
	
	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}
	
	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}
	
	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}
	
	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}
	
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}
	
	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
	
	.text-light {
		font-weight: 300;
	}
	
	@keyframes show {
		0% {
			transform: translateY(-50px);
		}
	
		60% {
			transform: translateY(40upx);
		}
	
		100% {
			transform: translateY(0px);
		}
	}
	
	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}
	
		60% {
			transform: translateY(40upx);
		}
	
		100% {
			transform: translateY(0px);
		}
	}
</style>

3. main.js 配置

// 全局mixins，用于实现setData等功能';
import Mixin from './polyfill/mixins';
Vue.mixin(Mixin);

4. pages.json 配置

{
	"pages": [
		{
		    "path" : "pages/TUI-Conversation/conversation/conversation",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "消息",
		        "enablePullDownRefresh": false
		    }
		},
		{
		    "path" : "pages/TUI-Chat/chat",
		    "style" :                                                                                    
		    {
				"navigationBarTitleText": "聊天",
				"enablePullDownRefresh": false
		    }
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "集成腾讯im",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {}		
	}
}

5. GenerateTestUserSig.js配置SDKAPPID和SECRETKEY
6. 安装 npm i
7. 运行

源码

下载源码

联系方式

可关注后发私信

文章转载

查看文章文章来源地址https://www.toymoban.com/news/detail-490770.html

到了这里，关于uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！