使用腾讯IM实现uni-app小程序中的客服聊天

一、安装依赖

小程序项目:

// IM 小程序 SDK
npm install tim-wx-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install tim-upload-plugin --save

如果是web项目:

// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install tim-upload-plugin --save

二、引入

小程序,在 App.vue 中

import TIM from 'tim-wx-sdk'
import TIMUploadPlugin from 'tim-upload-plugin'

onLaunch:  function (res) {
    
    
    let SDKAppID = 0 // 填自己的 SDKAppID
	uni.setStorageSync(`TIM_${
    
    SDKAppID}_isTUIKit`, true);
	// 重点注意: 为了 uni-app 更好地接入使用 tim,快速定位和解决问题,请勿修改 uni.$TUIKit 命名。
	// 如果您已经接入 tim ,请将 uni.tim 修改为 uni.$TUIKit。
	uni.$TUIKit = TIM.create({
    
    
		SDKAppID: SDKAppID 
	});
	
	uni.$TUIKit.registerPlugin({
    
    
		'tim-upload-plugin': TIMUploadPlugin
	});
	
	// 将原生插件挂载在 uni 上
	// #ifdef APP-PLUS
	uni.$TUICalling = TUICalling;
	// #endif
	// 如果您已创建了 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.$resetLoginData = this.resetLoginData();
	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);
  },

这里只贴一下部分代码,建议可以直接去官网参考快速集成方案,官网地址:
快速入门

建议使用 含UI快速集成方案

使用腾讯IM开发小程序聊天功能,在微信开发者工具中打包上传时可能会提示包过大的问题,建议进行分包处理,将这一部分放在主包之外

微信小程序如果需要上线或者部署正式环境,需要在微信公众平台的小程序后台进行域名配置

即时通信 IM 控制台

猜你喜欢

转载自blog.csdn.net/xiamoziqian/article/details/125203845