uniapp小程序对接腾讯IM即时通讯无ui集成(1)

首先需要完成一些准备工作。

1.注册腾讯云账号

腾讯云 注册账号后搜索im即时通讯,新创建一个应用。

2.uniapp创建项目

腾讯云无ui集成文档

按照文档步骤下载完这两个包后打开项目。有下图这两个包就算完成了开始工作。

3.APP目录进行引入和集成

c 复制代码
<script>
	import TIM from '@tencentcloud/chat';
	import TIMUploadPlugin from 'tim-upload-plugin';
	let options = {
		SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
	};
	// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
	uni.$TUIKit = TIM.create(options); // SDK 实例通常用 tim 表示
	uni.$TUIKit.setLogLevel(1); // 普通级别,日志量较多,接入时建议使用
	uni.$TUIKit.registerPlugin({
		'tim-upload-plugin': TIMUploadPlugin
	});
	uni.$TUIKitTIM = TIM;
	uni.$TUIKitEvent = TIM.EVENT;
	uni.$TUIKitVersion = TIM.VERSION;
	uni.$TUIKitTypes = TIM.TYPES; // 监听系统级事件
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>
相关推荐
小时前端2 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li3 天前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup3 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia4 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia4 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲5 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang6 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ6 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理7 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close7 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化