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/Pinia
    store.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. 跨平台体验一致性