当前位置：首页 > uni-app

uniapp实现聊天框

2026-02-06 11:39:49uni-app

uniapp实现聊天框的方法

页面结构与样式

在pages目录下创建聊天页面，使用scroll-view组件实现消息滚动区域，搭配view和text组件构建消息气泡。CSS需设置消息容器的flex布局，区分发送与接收消息的样式：

/* 消息容器样式 */
.message-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
/* 接收消息样式 */
.receive-message {
  align-self: flex-start;
  background: #f1f1f1;
  border-radius: 5px;
  max-width: 70%;
}
/* 发送消息样式 */
.send-message {
  align-self: flex-end;
  background: #07c160;
  color: white;
  border-radius: 5px;
  max-width: 70%;
}

数据绑定与渲染

在Vue的data中定义消息数组，使用v-for动态渲染消息列表。每条消息对象应包含内容、发送者标识和时间戳：

uniapp实现聊天框

data() {
  return {
    messages: [
      { content: '你好', isMe: false, time: '10:00' },
      { content: '你好！', isMe: true, time: '10:01' }
    ]
  }
}

消息发送功能

通过input或textarea组件绑定输入内容，点击发送按钮时将新消息加入数组并清空输入框。注意自动滚动到底部：

uniapp实现聊天框

methods: {
  sendMessage() {
    if (!this.inputText.trim()) return;
    this.messages.push({
      content: this.inputText,
      isMe: true,
      time: new Date().toLocaleTimeString()
    });
    this.inputText = '';
    this.$nextTick(() => {
      this.scrollToBottom();
    });
  }
}

实时通信集成

如需实现实时聊天，可集成WebSocket或第三方SDK（如融云、环信）。初始化连接后监听消息事件：

// 示例：融云IM初始化
const RongIMLib = require('rongcloud-imlib');
RongIMLib.init({ appkey: 'YOUR_APPKEY' });
RongIMLib.connect('USER_TOKEN', {
  onSuccess: function(userId) {
    console.log('连接成功');
  },
  onMessage: function(message) {
    // 处理接收到的消息
  }
});

本地存储与历史记录

使用uni.setStorageSync保存聊天记录，下次进入页面时从本地读取：

// 保存记录
uni.setStorageSync('chat_history', this.messages);

// 读取记录
onLoad() {
  const history = uni.getStorageSync('chat_history');
  if (history) this.messages = history;
}