基于uniapp开发的聊天页面组件

基于 UniApp 开发的聊天页面组件，可以通过 Vue 的组件化设计实现一个功能完整、界面美观的聊天页面。以下是一个示例实现，涵盖以下功能：

• 界面布局：消息列表、输入框、发送按钮。
• 消息类型：文本消息展示。
• 自动滚动：新消息时自动滚动到底部。
• 用户分区：区分用户和对方消息样式。

具体效果可以查看演示站点

http://chat.xidicom.cn/

---

1. 目录结构建议

创建以下目录和文件：

/components/ChatPage/         # 聊天页面组件目录
  - ChatPage.vue              # 主聊天页面组件
  - ChatMessage.vue           # 消息项组件
/pages/chat/                  # 聊天页面
  - index.vue                 # 页面入口

2. ChatPage.vue 主组件

<template>
  <view class="chat-container">
    <!-- 消息列表 -->
    <scroll-view
      class="chat-messages"
      :scroll-into-view="lastMessageId"
      scroll-y
    >
      <view v-for="(msg, index) in messages" :key="msg.id" :id="msg.id">
        <ChatMessage :message="msg" :isUser="msg.sender === 'user'" />
      </view>
    </scroll-view>

    <!-- 输入框 -->
    <view class="chat-input-container">
      <input
        class="chat-input"
        placeholder="请输入消息..."
        v-model="inputMessage"
        @confirm="sendMessage"
      />
      <button class="send-button" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
import ChatMessage from './ChatMessage.vue';

export default {
  name: 'ChatPage',
  components: { ChatMessage },
  data() {
    return {
      messages: [
        { id: '1', sender: 'bot', content: '你好！有什么可以帮你的吗？' },
        { id: '2', sender: 'user', content: '你好，我想了解一下产品。' },
      ],
      inputMessage: '',
    };
  },
  computed: {
    lastMessageId() {
      return this.messages.length > 0
        ? this.messages[this.messages.length - 1].id
        : '';
    },
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) return;

      // 用户发送消息
      this.messages.push({
        id: `${Date.now()}`,
        sender: 'user',
        content: this.inputMessage,
      });

      this.inputMessage = '';

      // 模拟对方回复
      setTimeout(() => {
        this.messages.push({
          id: `${Date.now() + 1}`,
          sender: 'bot',
          content: '好的，我正在为您处理。',
        });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  background-color: #f5f5f5;
  padding: 10px;
}

.chat-input-container {
  display: flex;
  padding: 10px;
  background-color: #ffffff;
}

.chat-input {
  flex: 1;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
}

.send-button {
  margin-left: 10px;
  height: 40px;
  padding: 0 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}
</style>

3. ChatMessage.vue 消息项组件

<template>
  <view
    class="message"
    :class="{ 'message-user': isUser, 'message-bot': !isUser }"
  >
    <text class="message-content">{{ message.content }}</text>
  </view>
</template>

<script>
export default {
  name: 'ChatMessage',
  props: {
    message: {
      type: Object,
      required: true,
    },
    isUser: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
.message {
  display: flex;
  margin: 10px 0;
  max-width: 70%;
}

.message-user {
  align-self: flex-end;
  background-color: #007aff;
  color: white;
  border-radius: 10px 10px 0 10px;
  padding: 10px;
}

.message-bot {
  align-self: flex-start;
  background-color: #f0f0f0;
  color: black;
  border-radius: 10px 10px 10px 0;
  padding: 10px;
}

.message-content {
  font-size: 14px;
}
</style>

4. 页面引入和使用

在页面 index.vue 中引入组件：

<template>
  <view>
    <ChatPage />
  </view>
</template>

<script>
import ChatPage from '@/components/ChatPage/ChatPage.vue';

export default {
  components: { ChatPage },
};
</script>

5. 功能扩展建议

• 图片消息：支持发送和显示图片消息，可以使用 <image> 标签。
• 语音消息：利用 UniApp 的音频模块实现语音录制和播放。
• 对接后端：通过 WebSocket 或 HTTP 请求接收真实的消息。
• 性能优化：处理大量消息时，可以考虑虚拟列表（如 recycle-view）。

这套组件基本覆盖了常见的聊天页面需求，你可以根据具体功能需求进一步扩展。