uniapp 实现腾讯云IM添加好友功能

UniApp 集成腾讯云IM实现添加好友功能的完整指南

一、功能需求分析

在社交类应用开发中，好友系统是核心模块之一。本文将基于腾讯云IM SDK，在uniapp框架下实现以下功能：

1. 发送/接收好友请求
2. 好友请求状态管理
3. 好友列表同步与展示
4. 跨平台（小程序/H5/App）兼容处理

二、环境准备与SDK配置

2.1 安装依赖包

npm install tim-js-sdk tim-upload-plugin --save

2.2 全局SDK初始化

// main.js
import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';export const tim = TIM.create({SDKAppID: xxxxxxxx // 必填项
});// 注册上传插件
tim.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });// 登录配置
export async function initTIM(userID, userSig) {try {await tim.login({ userID, userSig });console.log('登录成功');} catch (err) {console.error('登录失败:', err);}
}

三、核心功能实现步骤

3.1 发送好友请求

// pages/add-friend/add-friend.vue
async function sendFriendRequest() {if (!this.targetUserID) {uni.showToast({ title: '请输入用户ID', icon: 'none' });return;}try {const res = await tim.addFriend({userID: this.targetUserID,type: 'TIM_FRIEND_TYPE_BOTH', // 双向好友remark: this.remark || ''});console.log('请求已发送', res);uni.showToast({ title: '请求已发送' });} catch (err) {console.error('发送失败:', err);uni.showToast({ title: err.message || '发送失败', icon: 'none' });}
}

3.2 接收/处理好友请求

// 监听好友事件
tim.on(TIM.EVENT.FRIENDSHIP_CHANGED, (event) => {event.data.forEach(item => {if (item.type === TIM.TYPES.EVT_FRIEND_APPLICATION_LIST_ADDED) {handleNewRequest(item.data);}});
});function handleNewRequest(request) {uni.showModal({title: '新好友请求',content: `${request.from} 申请添加你为好友`,confirmText: '同意',cancelText: '拒绝',success: (res) => {if (res.confirm) {handleFriendRequest(request, 'Accept');} else {handleFriendRequest(request, 'Reject');}}});
}async function handleFriendRequest(request, action) {try {await tim.doResponse({responseType: 'Accept' === action ? 'Accept' : 'Reject',currentUserID: request.from,userID: request.to});console.log(`请求已${action}`);} catch (err) {console.error('处理失败:', err);}
}

3.3 好友列表同步

// 获取好友列表
async function fetchFriendList() {try {const { data: friendList } = await tim.getFriendList();console.log('好友列表:', friendList);// 存储到Vuex/Piniastore.commit('SET_FRIEND_LIST', friendList);} catch (err) {console.error('获取失败:', err);}
}// 实时监听好友变化
tim.on(TIM.EVENT.FRIEND_LIST_UPDATED, (event) => {fetchFriendList(); // 刷新本地缓存
});

3.4 好友列表展示

<template><view class="friend-list"><view v-for="friend in friendList" :key="friend.userID"class="friend-item"@click="navigateToChat(friend)"><image :src="friend.avatar || defaultAvatar" class="avatar" /><view class="info"><text class="name">{{ friend.nickname }}</text><text class="remark">{{ friend.remark || '未设置备注' }}</text></view></view></view>
</template><script>
import { mapState } from 'vuex';export default {computed: {...mapState(['friendList'])},methods: {navigateToChat(friend) {uni.navigateTo({url: `/pages/chat/chat?userID=${friend.userID}`});}}
}
</script><style>
.friend-item {display: flex;padding: 20rpx;border-bottom: 1rpx solid #eee;
}.avatar {width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 20rpx;
}.info {flex: 1;display: flex;flex-direction: column;justify-content: center;
}.name {font-size: 32rpx;color: #333;
}.remark {font-size: 24rpx;color: #999;
}
</style>

四、关键优化策略

4.1 输入验证优化

// 添加好友前验证
function validateInput(userID) {const regex = /^[a-zA-Z0-9_-]{4,20}$/;if (!regex.test(userID)) {uni.showToast({title: '用户ID格式错误（4-20位字母数字）',icon: 'none'});return false;}return true;
}

4.2 请求状态管理

// 使用Vuex管理请求状态
export default new Vuex.Store({state: {requestStatus: {pending: false,error: ''}},mutations: {SET_REQUEST_STATUS(state, { pending, error }) {state.requestStatus = { pending, error };}}
});

4.3 防抖处理

// 使用lodash防抖优化搜索
import _ from 'lodash';export default {methods: {searchUser: _.debounce(async function(keyword) {// 搜索逻辑}, 500)}
}

五、生产环境注意事项

1. 安全校验：

   • 后端应校验userSig的有效性
   • 限制好友请求频率（防刷）

2. 性能优化：

   // 分页加载好友列表
   async function fetchFriendList(page = 1, size = 20) {try {const { data } = await tim.getFriendList({nextSeq: page > 1 ? (page-1)*size : undefined,limit: size});// 合并数据} catch (err) {// 错误处理}
   }
   

3. 平台适配：

   • 小程序端需处理用户拒绝授权场景
   • App端建议添加本地联系人缓存

4. 扩展功能建议：

   // 好友分组实现
   const friendGroups = {'同事': [/* 好友列表 */],'家人': [/* 好友列表 */]
   };
   

六、总结

通过腾讯云IM的好友管理系统，结合uniapp的跨平台能力，可以快速构建完整的社交关系链。实际开发中需重点关注：

1. 好友关系的双向确认机制
2. 请求状态的实时同步
3. 输入验证与安全防护
4. 跨平台体验一致性