uniapp使用腾讯im 无ui集成方案写法

已于 2024-02-27 14:52:13 修改
阅读量1.4k 收藏 12
点赞数 23
文章标签： uni-app ui javascript 信息与通信
于 2024-02-26 16:31:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73854956/article/details/136302828
版权

页面显示
在这里插入图片描述
在这里插入图片描述

1.无ui集成方案

1.1 首先下来依赖
//初始化
npm init
// IM Web SDK
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
npm install tim-js-sdk --save
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save
// 拦截或替换敏感词需要本地审核插件
npm install tim-profanity-filter-plugin --save
1.2 创建tim.js
import TIM from 'tim-js-sdk/tim-js-friendship.js'
import TIMUploadPlugin from 'tim-upload-plugin';
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';

// import COS from "cos-js-sdk-v5";

​
​ const options = {
​ SDKAppID: 1600024346
​ // 接入时需要将0替换为您的即时通信应用的 SDKAppID
​ };
​ // 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
​ const tim = TIM.create(options); // SDK 实例通常用 tim 表示
​ // tim.setLogLevel(0);
​ const TIMData = TIM
​ // 注册腾讯云即时通信 IM 上传插件
​ tim.registerPlugin({
​ ‘tim-upload-plugin’: TIMUploadPlugin
​ });
​

// 注册腾讯云即时通信 IM 本地审核插件
tim.registerPlugin({
	'tim-profanity-filter-plugin': TIMProfanityFilterPlugin
});

// 注册 COS SDK 插件
// tim.registerPlugin({'cos-js-sdk': COS});

​
​
​ /* eslint-disable require-jsdoc */
​ function genTestUserSig(userID) {
​ const SDKAPPID = 1600024346;
​ const EXPIRETIME = 604800;
​ const SECRETKEY = ‘a03e633a7f9e49784a8f1b1d87ebc4d930be70544e13822bdd8f9a0af40acc1’;
​
const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
const userSig = generator.genTestUserSig(userID);

	return {
		sdkAppId: SDKAPPID,
		userSig: userSig
	};
}

export default {
	tim,
	TIMData,
	genTestUserSig
}
1.3 在main.js导入
import tim from './utils/tim.js'
import TIM from 'tim-js-sdk/tim-js-friendship.js'

Vue.prototype.tim = tim.tim //tim sdk 引入后生成的tim服务
Vue.prototype.$TIM = TIM //tim 的状态/事件 常量
2.1 在登录接口存储用户信息
//用户信息
		user() {
			this.$helper.apiPost(this.$api.tab.user).then(ret => {
				if (ret.data.code == 200) {
					this.info = ret.data.data
					//根据返回的userID 以及 userSig 登录tim
					uni.setStorageSync('uid', ret.data.data.username)
					//这里我叫后端返回了一个userSing
					uni.setStorageSync('uid_sig', ret.data.data.user_sig)
					console.log(this.info, '122332211');
					this.tim.login({
						userID: this.info.username,
						userSig: this.info.user_sig
					}).then((imResponse) => {
						this.$helper.showToast('登录成功')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tab/home'
							})
						}, 500)
					})
				}
			})
		},
2.2 进入首页
 data() {
		return {
			userID: uni.getStorageSync('uid'),
			userSig: uni.getStorageSync('uid_sig'),
		};
	},
 onLoad() {
		this.cosImLogin()
	},
 methods: {
	 cosImLogin() {
		console.log(this.userID, 'this.userID');
		console.log(this.userSig, 'this.userSig');
		if (!this.userID.length || !this.userSig.length) return
			this.tim.login({
				userID: this.userID,
				userSig: this.userSig
			}).then((res) => {
				this.loginTUICallKit()
			}).catch((err) => {
				console.log("报错", err)
			})
		},
	 loginTUICallKit() {
			const options = {
				SDKAppID: 1600024346, // 请替换为步骤一取到的 SDKAppID
				userID: this.userID, // 请替换为您的 UserID
				userSig: this.userSig, // 您可以在控制台中计算一个 UserSig 并填在这个位置
			};
			this.$TUICallKit.login(options, (res) => {
				if (res.code === 0) {
					console.log('login success');
					this.$TUICallKit.enableFloatWindow(true); // 开启小浮窗
				} else {
					console.log(`login failed, error message = ${res.msg}`);
				  }
				});
			},
		}
2.3 我的好友列表
export default {
	data() {
		return {
			friends: []
		};
	},

	onLoad() {
		this.friendList();
	},
	methods: {
		openConversation(name, userID) {
		// userID:电话号码  username：昵称 
		//跳转到聊天页面(聊天页面自定义头部所以要携带昵称)
		this.$helper.toPage('/pages/active/chat?name=' + name + '&userID=' + userID);
	 },
	    //我的好友
		async friendList() {
			let res = await this.$helper.apiPost(this.$api.user.friend_list);
			this.friends = res.data.data;
			console.log(this.friends);
		}
	}
};
3.1 聊天页面

3.1.1 对话内容

3.1.1 对话内容
<view class="msg-content-list">
   <mescroll-uni ref="mescrollRef" :fixed="false" :down="downOption" @init="mescrollInit" @down="downCallback"	@up="upCallback">
	 <view>
		<view class="msg-content-item" v-for="(item, index) in msgList">
		  <view class="time-slot" v-if="item.isShowTime || index == 0">
			{{getShowTimePipe(item.time) || ''}}
		  </view>
  <!-- 个人开始 -->
	      <view>
		<view class="content-from msg" v-if="item.flow == 'in'">
		<image class="msg-image left-head" :src="item.avatar" />
  <!-- 每条消息内容 -- left -->
		<view class="content-my-left-box">
  <!-- 展示文本 -->
		<view class="content-my-left-text" v-if="item.type == 'TIMTextElem'">
		   <rich-text :nodes="nodesFliter(item.payload.text)"></rich-text>
		</view>
  <!-- 展示图片 -->
	<image class="content-my-left-img" :style="`height:${item.payload.imageInfoArray[1].height}px; width: ${item.payload.imageInfoArray[1].width}px;`" :src="item.payload.imageInfoArray[1].imageUrl" mode="widthFix" v-else-if="item.type == 'TIMImageElem'" @click="onPreviewImg(item.payload.imageInfoArray[1].imageUrl)"></image>
  <!-- 展示视频 -->
	<MyVideo class="content-my-video" v-else-if="item.type == 'TIMVideoFileElem'" :videoUrl="item.payload.remoteVideoUrl" />
	</view>
<!-- 每条消息内容 -- left -->
	</view>
	<view class="content-my msg" v-else-if="item.flow == 'out'">
<!-- 每条消息内容 -- right -->
	<view class="content-my-right-box">
<!-- 展示文本 -->
	<view class="content-my-right-text" v-if="item.type == 'TIMTextElem'">
		rich-text :nodes="nodesFliter(item.payload.text)"></rich-text>
	</view>
<!-- 展示图片 -->
<image class="content-my-right-img"	:style="`height: ${item.payload.imageInfoArray[1].height*2}rpx; width: ${item.payload.imageInfoArray[1].width*2}rpx;`":src="item.payload.imageInfoArray[1].imageUrl" mode="widthFix" v-else-if="item.type == 'TIMImageElem'" @click="onPreviewImg(item.payload.imageInfoArray[1].imageUrl)"></image>
<!-- 展示视频 -->
<MyVideo class="content-my-video" v-else-if="item.type == 'TIMVideoFileElem'" :videoUrl="item.payload.remoteVideoUrl" />
</view>
<!-- 每条消息内容 -- right -->
	      <image class="msg-image right-head" :src="item.avatar " />
        </view>
      </view>
<!-- 个人结束 -->
					</view>
				</view>
			</mescroll-uni>
		</view>
3.2 底部输入框
3.2 底部输入框

<view class="bottom fixed" @click="getBottomHeight()" :style="{bottom: changeBottomVal}">
	<view class="flex-center-between">
		<image @click="imgBtn" src="/static/images/home/1086.png" mode=""></image>
		// @keyboardheightchange 监听键盘高度
			<input :adjust-position="false" @keyboardheightchange="keyboardheightchange" class="save-inp" v-model="msgText" :focus="focus" type="text" @confirm="sendBtn">
		<view class="send" @click="sendBtn">发送</view>
	 </view>
	</view>

3.1.2 js代码

3.1.2 js代码

	data() {
			return {
				top: uni.getStorageSync('safeArea').top,
				name: '',
				bottomImg: false,
				username: '',
				changeBottomVal: '',//键盘高度
				bottomHeight: '', //底部高度
				msgList: [], // 会话消息列表		
				msgText: '', // 文字消息
				message: {}, // 发送消息对象
				timUserInfo: {}, // 会话对象用户信息
				msgUserData: {}, // 会话对象信息
				focus: false,
				downOption: {
					auto: false,
					textInOffset: '拉取历史记录',
					textOutOffset: '',
					textLoading: '拉取中...'
				},
			};
		},
		onShow() {
			this.getTimeSlot()
			// 获取会话数据
			this.getListMsg()

		},
		onLoad(e) {

			this.tim.on(this.$TIM.EVENT.MESSAGE_RECEIVED, (event) => {

				if (event.data[0].type == "TIMSoundElem") {
					this.getListMsg()
					this.getTimeSlot()
				} else {
					let arr = event.data.filter((res) => res.conversationID == (this.isGroup ? `GROUP${this.msgData.groupID}` :
						`C2C${this.msgUserData.userID}`))
					this.msgList.push(...arr)
					this.getTimeSlot()
					// 获取底部高度
					this.getBottomHeight(false)
				}
			})

			this.name = e.name;
			this.username = e.username;
			this.msgUserData = e

			// 已读会话
			this.inRead()
			// 获取底部高度
			this.getBottomHeight(false)
		},
		methods: {
		//键盘高度
			keyboardheightchange(e) {
				this.changeBottomVal = e.detail.height + 'px'
			},
			getBottomHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.bottom').boundingClientRect(data => {
						this.bottomHeight = data.height

						console.log(data.height, 'data.height');
					}).exec();
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 9999,
							duration: 100
						})
					})
				})
			},

			// 预览图片
			onPreviewImg(image) {
				uni.previewImage({
					urls: [image],
					fail: function(err) {}
				})
			},
			imgBtn() {
				this.bottomImg = !this.bottomImg
			},
			// 发送拍摄或者上传视频
			sendMsgVideo() {
				uni.chooseVideo({
					success: (res) => {
						this.message = this.tim.createVideoMessage({
							to: this.msgUserData.userID,
							conversationType: 'C2C',
							payload: {
								file: res
							},
							onProgress: (event) => {}
						});
						this.tim.sendMessage(this.message).then((res) => {
							this.msgList.push(res.data.message)
							// 获取底部高度
							this.getBottomHeight(false)
						})
					}
				})
			},
			// 发送拍摄或者上传图片
			sendMsgImage() {
				uni.chooseImage({
					count: 1,
					mediaType: ['image'], // 图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						this.message = this.tim.createImageMessage({
							to: this.msgUserData.userID,
							conversationType: 'C2C',
							payload: {
								file: res
							},
							onProgress: function(event) {}
						});
						this.tim.sendMessage(this.message).then((res) => {
							this.msgList.push(res.data.message)
							// 获取底部高度
							this.getBottomHeight(false)
						})
					}
				});
			},
			// 判断是否有十分钟的时间间隔
			getTimeSlot() {
				setTimeout(() => {
					this.msgList.forEach((res, index) => {
						let i = this.msgList.length - (index + 2) <= 0 ? 0 : this.msgList.length - (index + 2)
						let j = this.msgList.length - (index + 1) <= 0 ? 0 : this.msgList.length - (index + 1)
						let time1 = this.$time.getNowDate(this.msgList[i].time * 1000)
						let time2 = this.$time.getNowDate(this.msgList[j].time * 1000)
						if (this.$time.GetDateDiff(time2, time1, 'minute') <= -5) {
							this.$set(this.msgList[j], 'isShowTime', true)
						}
					})
				}, 300)
			},
			// 获取会话列表
			getListMsg(isDown = false) {
				// 用于拉取历史聊天数据
				let parmas = {
					conversationID: `C2C${this.msgUserData.userID}`,
					nextReqMessageID: this.nextReqMessageID
				}
				// 用于拉取目前聊天数据
				let data = {
					conversationID: `C2C${this.msgUserData.userID}`,
				}
				this.tim.getMessageList(isDown ? parmas : data).then((res) => {

					this.nextReqMessageID = res.data.nextReqMessageID
					console.log(res, '11122111221');
					if (!this.nextReqMessageID.length || this.nextReqMessageID == '-1') this.mescroll.lockDownScroll(true)
					if (isDown) {
						this.msgList = res.data.messageList.concat(this.msgList)
						this.mescroll.endDownScroll()
					} else {
						this.msgList = res.data.messageList
					}

				});
				this.timeOut = setTimeout(() => {
					uni.hideLoading()
					if (!isDown) {
						uni.pageScrollTo({
							scrollTop: 9999,
							duration: 100
						})
					}
					this.$forceUpdate()
				}, 800)
			},
			inRead() {
				// 将某会话下所有未读消息已读上报
				this.tim.setMessageRead({
					conversationID: `C2C${this.msgUserData.userID}`
				})
			},
			//聊天的节点加上外层的div
			nodesFliter(str) {
				let nodeStr = '<div style="display: flex; align-items: center;word-wrap:break-word; width: auto;">' + str +
					'</div>'
				return nodeStr
			},
			getShowTimePipe(time) {
				return this.$time.showTimePipe(time * 1000)
			},
			// 发送文本
			sendMsgText() {
				this.msgText = this.msgText.trim()
				console.log(this.msgText, '111111');
				if (this.msgText.length == '') {
					uni.showToast({
						title: "发送消息不能为空",
						icon: "none"
					})
					return
				}
				// 1. 创建消息实例，接口返回的实例可以上屏
				this.message = this.tim.createTextMessage({
					to: this.msgUserData.userID,
					conversationType: 'C2C',
					payload: {
						text: this.msgText
					},
				});
				this.tim.sendMessage(this.message).then((res) => {
					this.msgList.push(res.data.message)
					this.focus = true
					this.msgText = ""
					// 获取底部高度
					this.getBottomHeight(false)
				})
			},
			sendBtn() {
				this.sendMsgText()
			}
		}
4.1 消息列表
4.1.1 html
<view>
	<view v-for="(item, index) in list" :key="index" @click="goToMessage(item.userProfile.nick,item.userProfile.userID,index)">
				<view class="pop flex-center-between">
					<view class="name flex">
						<image :src="item.userProfile.avatar" mode=""></image>
						<view class="tian">
							<view>{{item.userProfile.nick}}</view>
							<span>
								<rich-text :nodes="nodesFliter(item.lastMessage.messageForShow)"></rich-text>
							</span>
						</view>
					</view>
					//未读消息
				<view class="red" v-if="item.unreadCount">{{item.unreadCount}}</view>
			</view>
		<view class="line"></view>
	</view>
</view>

4.2.2 js
export default {
		data() {
			return {
				top: uni.getStorageSync('safeArea').top,
				list: [],
				isTips: true
			};

		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.getList()
		},
		methods: {
			//聊天的节点加上外层的div
			nodesFliter(str) {
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">' + str + '</div>'
				return nodeStr
			},
			goToMessage(name, userID, index) {
				this.$helper.toPage('/pages/active/chat?name=' + name + '&userID=' + userID );
				// this.list[index].unreadCount = 0
			},
			getList() {
				// 获取全量的会话列表
				this.tim.getConversationList().then((res) => {

					this.list = res.data.conversationList
					// console.log(this.list, '1111');
					console.log(this.list, '1111');
					this.list = this.list.filter((res) => res.type != "@TIM#SYSTEM")

					this.getFriend()
				})
			},
			getFriend() {
				this.tim.getFriendApplicationList().then(res => {
					this.friendNum = res.data.unreadCount
				})
			},
		}
	};
次贝。
关注
uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频
05-18
腾讯的给的例子内容比较乱，我花了好长时间才集成出来，然后对聊天页面做了UI美化。 使用： 1.复制文件到项目 2. GenerateTestUserSig.js配置SDKAPPID和SECRETKEY 3. 安装 npm i 4. 运行 教程：https://blog.csdn.net/qq_17702967/article/details/124785424
IM聊天的写法
09-19
关于IM的写法 用window编程 加上基础的网络协议 就能够写出一个聊天工具来！
使用Vue3进行腾讯即时通讯开发的指南
最新发布
weixin_65644264的博客
07-09 426
随着即时通讯（IM）技术的普及和需求的增加，开发一款高效、安全、易用的IM应用已成为许多企业和开发者的目标。腾讯云即时通信（TIM）提供了一个强大的SDK，可以方便地集成到各类应用中，而Vue3作为现代前端开发的热门框架，结合TIM SDK可以快速构建出功能丰富的IM应用。本文将详细介绍如何使用Vue3进行腾讯即时通讯的开发，涵盖从环境搭建、SDK集成到基础功能实现的各个方面。通过以上步骤，我们使用Vue3成功集成了腾讯云即时通信SDK，并实现了基础的用户登录和聊天功能。
uniapp对接腾讯云IM+音视频生成userSig
03-14
用于uniapp对接腾讯云IM+音视频生成userSig
2024最新uniapp集成腾讯IM
。
02-20 547
即时通信 IM 快速入门（uniapp vue2/vue3）-快速入门-文档中心-腾讯云
uniapp使用腾讯即时通信IM
weixin_45671325的博客
03-07 2745
uniapp项目使用腾讯的即时通信IM
uniapp使用腾讯im
一切都不太晚
12-07 7501
前端时间在我们网页端实现了一个很low的腾讯im有点不爽，用的是无集成方案，这是为什么呢，这还要从react说起，真是命苦，什么都没，不过咱们的vue小伙伴就不得了了，有ui集成方案，很简单，废话不多我们按个来看腾讯im有两种使用方案，一种是有ui集成方案，一种是无ui集成方案，我们就逐一去看从零开始逐步去看有ui集成文档直通车 然后配置package.json, 项目刚创建的时候是没有这个文件的，需要我们去创建一个配置文件 接下来配置ui （1-1-1）下载（电脑那个系统用哪个） （1-1-2）
uniapp对接腾讯云IM+音视频。音视频含UI集成
qying的博客
03-14 4289
uniapp对接腾讯云IM+音视频集成到android和ios，音视频含ui集成
uniapp 对接腾讯IM来聊天
weixin_57663472的博客
05-30 262
1.需要下载一个插件 cnpm i @tencentcloud/tui-customer-service-plugin，启动不了。1.最近项目中用到腾讯IM，我也去粗略的学习了一下，根据官网的安装指南，使用会报一点小错。
uniapp集成融云IM，简单的demo
04-09
项目中提取出来的一个简单的demo
Android kotlin Jetpack mvvm 项目，阿里+头条+腾讯大厂Android笔试真题
m0_64319298的博客
12-10 521
富有表现力且简洁：您可以使用更少的代码实现更多的功能。表达自己的想法，少编写样板代码。在使用 Kotlin 的专业开发者中，有 67% 的人反映其工作效率有所提高。 更安全的代码：Kotlin 有许多语言功能，可帮助您避免 null 指针异常等常见编程错误。包含 Kotlin 代码的 Android 应用发生崩溃的可能性降低了 20%。 可互操作：您可以在 Kotlin 代码中调用 Java 代码，或者在 Java 代码中调用 Kotlin 代码。Kotlin 可完全与 Java 编程语言互操作，因此您可.
腾讯技术团队整理，年度好文轻松彻底入门 Flutter，秒变大前端
weixin_43901866的博客
01-14 1315
原文作者：腾讯技术 原文链接：https://zhuanlan.zhihu.com/p/90836859 来源：知乎 本文真对 Flutter 的技术特性，做了一些略全面的入门级的介绍，如果你听说过Flutter，想去了解它，但是又不想去翻厚厚的API，那么本文就是为你准备的。 随着纯客户端到Hybrid技术，到RN&Weex，再到如今的Flutter技术，客户端实现技术不断前进。 在...
【打工日常】云原生之搭建私有化web在线聊天软件LumenIM
全糖少冰我吃不了苦
04-27 2059
Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发。a.本次实践部署环境为个人腾讯云的测试环境，若是生产环境请谨慎部署；b.本次实践使用了mysql、redis、nginx以及前后端的开源包进行启动测试。
Qt开发经验总结
草上爬的博客
12-02 8354
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
uniapp(全端兼容)-最新详细实现接入腾讯云IM即时通讯教程，uniapp在安卓苹果app端/小程序/h5移动端等集成使用腾讯云im插件，提供消息列表与聊天对话示例，支持发图片/私聊/实时监听消息
高级前端工程师
05-13 3403
uni-app，腾讯云IM，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，im即时通讯，腾讯云IM详细教程，如何接入腾讯IM即时通讯，使用腾讯im有没有插件，怎么使用腾讯云IM插件，tim-wx-sdk，聊天sdk，即时通讯im uniapp私聊/群聊/聊天室，实现IM即时通讯仿微信聊天功能，对接腾讯云IM+音视频，调用腾讯即时通信IM的示例，卡顿很卡不流畅，音视频，全局监听，仿微信IM，uni-huanxin-im，sdk,实现多端实时通
uni-app 接入腾讯云的即时通讯 im
m0_68559944的博客
12-06 215
好的，我已经帮你搜索了 uni-app 接入腾讯云的即时通讯 im，以下是一些相关的链接： * [uni-app 官方文档] () * [uni-app 接入腾讯云即时通讯 im 的示例代码] () * [腾讯云即时通讯 im 官方文档] () 希望这些链接对你有所帮助。
uni-app 快速集成 IM 即时通信的方法——TUIKit 来啦
热门推荐
qq_37263130的博客
11-22 1万+
uni-app 是目前比较火的跨平台框架，腾讯云即时通信 IM 正式推出支持三大平台的 uni-app TUIKit。 TUIKit 是基于 IM SDK 实现的一套 UI 组件，其包含会话、聊天、群组管理等功能，基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。 目前我们提供了示例客服群 ➕ 示例好友的基础模版，在线客服功能包括： 支持发送文本消息、图片消息、语音消息、视频消息等常见消息。 支持常用语、订单、服务评价等自定义消息。 支持创建群聊会话、群成员管理等。 uni-app TUI
uniapp 使用TUIKit 腾讯IM 实现分享好友名片功能
12-05
根据提供的引用内容，分享好友名片功能需要使用即时通信 IM（Instant Messaging）基于 QQ 底层 IM 能力开发，集成聊天、会话、群组、资料管理和直播弹幕能力，也支持通过信令消息与白板等其他产品打通，全面覆盖您的业务场景，支持各大平台小程序接入使用，全面满足通信需要。在uniapp中使用TUIKit可以实现腾讯IM的功能，包括分享好友名片功能。 具体实现步骤如下： 1.在uniapp项目中安装TUIKit插件，可以使用npm命令进行安装：npm install @tencent-im/tui-wx-miniapp-sdk --save 2.在需要使用TUIKit的页面中引入TUIKit插件：import TIM from 'tim-wx-sdk'; import TUIKit from 'tui-wx-miniapp-sdk'; 3.初始化TUIKit：const tim = TIM.create({ SDKAppID: 'xxxxx' }); TUIKit.init({ tim }); 4.在需要分享好友名片的地方，调用TUIKit的shareProfileCard方法：TUIKit.shareProfileCard({ userID: 'xxxxx', // 好友的userID userName: 'xxxxx', // 好友的userName avatarUrl: 'xxxxx', // 好友的头像地址 success: function () { console.log('分享成功'); }, fail: function (data) { console.log('分享失败', data); } });
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值