uniapp实现图文聊天功能

Uniapp 实现图文聊天功能

下面我将介绍如何在 Uniapp 中实现一个基本的图文聊天功能，包括消息发送、接收和展示。

一、准备工作

创建 Uniapp 项目
准备后端接口（可以使用云开发、自己的服务器或第三方服务）

二、实现步骤

1. 页面结构

<template><view class="chat-container"><!-- 聊天消息区域 --><scroll-view class="message-list" scroll-y="true" :scroll-with-animation="true":scroll-top="scrollTop"><view v-for="(item, index) in messageList" :key="index" :class="['message-item', item.isMe ? 'my-message' : 'other-message']"><!-- 头像 --><image class="avatar" :src="item.isMe ? myAvatar : otherAvatar" mode="aspectFill"></image><!-- 消息内容 --><view class="message-content"><!-- 文本消息 --><text v-if="item.type === 'text'" class="text-message">{{ item.content }}</text><!-- 图片消息 --><image v-else-if="item.type === 'image'" class="image-message" :src="item.content" mode="widthFix"@click="previewImage(item.content)"></image></view></view></scroll-view><!-- 输入区域 --><view class="input-area"><!-- 图片选择按钮 --><view class="action-btn" @click="chooseImage"><uni-icons type="image" size="24" color="#666"></uni-icons></view><!-- 文本输入框 --><input class="input-box" v-model="inputText" placeholder="输入消息..." @confirm="sendTextMessage"/><!-- 发送按钮 --><view class="send-btn" @click="sendTextMessage"><text>发送</text></view></view></view>
</template>

2. JavaScript 逻辑

<script>
export default {data() {return {messageList: [], // 消息列表inputText: '', // 输入文本scrollTop: 0, // 滚动位置myAvatar: '/static/avatars/my-avatar.jpg', // 我的头像otherAvatar: '/static/avatars/other-avatar.jpg', // 对方头像socket: null // WebSocket 连接}},onLoad() {this.initWebSocket();// 加载历史消息this.loadHistoryMessages();},onUnload() {// 关闭 WebSocket 连接if (this.socket) {this.socket.close();}},methods: {// 初始化 WebSocketinitWebSocket() {// 这里替换为你的 WebSocket 地址this.socket = new WebSocket('wss://your-websocket-url.com');this.socket.onopen = () => {console.log('WebSocket 连接成功');};this.socket.onmessage = (res) => {const message = JSON.parse(res.data);this.receiveMessage(message);};this.socket.onerror = (err) => {console.error('WebSocket 错误:', err);};this.socket.onclose = () => {console.log('WebSocket 连接关闭');};},// 加载历史消息loadHistoryMessages() {// 这里调用你的 API 获取历史消息uni.request({url: 'https://your-api-url.com/messages',success: (res) => {this.messageList = res.data.messages;this.scrollToBottom();}});},// 发送文本消息sendTextMessage() {if (!this.inputText.trim()) return;const message = {id: Date.now(),type: 'text',content: this.inputText,isMe: true,time: new Date().toLocaleTimeString()};// 添加到消息列表this.messageList.push(message);this.inputText = '';// 发送到服务器this.sendToServer(message);// 滚动到底部this.$nextTick(() => {this.scrollToBottom();});},// 选择图片chooseImage() {uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: (res) => {const tempFilePaths = res.tempFilePaths;this.uploadImage(tempFilePaths[0]);}});},// 上传图片uploadImage(filePath) {uni.showLoading({ title: '上传中...' });// 这里替换为你的上传 APIuni.uploadFile({url: 'https://your-api-url.com/upload',filePath: filePath,name: 'file',success: (uploadRes) => {const res = JSON.parse(uploadRes.data);if (res.code === 0) {const message = {id: Date.now(),type: 'image',content: res.data.url,isMe: true,time: new Date().toLocaleTimeString()};this.messageList.push(message);this.sendToServer(message);this.$nextTick(() => {this.scrollToBottom();});}},complete: () => {uni.hideLoading();}});},// 发送消息到服务器sendToServer(message) {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send(JSON.stringify(message));} else {// 如果 WebSocket 不可用，使用 HTTP 请求uni.request({url: 'https://your-api-url.com/send',method: 'POST',data: message,success: () => {console.log('消息发送成功');}});}},// 接收消息receiveMessage(message) {message.isMe = false; // 标记为对方消息this.messageList.push(message);this.$nextTick(() => {this.scrollToBottom();});},// 预览图片previewImage(url) {uni.previewImage({urls: this.messageList.filter(item => item.type === 'image').map(item => item.content),current: url});},// 滚动到底部scrollToBottom() {// 这里需要根据实际内容高度计算this.scrollTop = 99999;}}
}
</script>

3. CSS 样式

<style>
.chat-container {display: flex;flex-direction: column;height: 100vh;background-color: #f5f5f5;
}.message-list {flex: 1;padding: 20rpx;overflow: auto;
}.message-item {display: flex;margin-bottom: 30rpx;
}.my-message {flex-direction: row-reverse;
}.other-message {flex-direction: row;
}.avatar {width: 80rpx;height: 80rpx;border-radius: 10rpx;
}.message-content {max-width: 60%;margin: 0 20rpx;
}.text-message {padding: 15rpx 20rpx;border-radius: 10rpx;background-color: #fff;font-size: 28rpx;line-height: 1.5;
}.my-message .text-message {background-color: #95ec69;
}.image-message {max-width: 100%;border-radius: 10rpx;
}.input-area {display: flex;align-items: center;padding: 20rpx;background-color: #fff;border-top: 1rpx solid #eee;
}.input-box {flex: 1;height: 70rpx;padding: 0 20rpx;margin: 0 20rpx;border-radius: 35rpx;background-color: #f5f5f5;font-size: 28rpx;
}.action-btn {padding: 10rpx;
}.send-btn {padding: 10rpx 20rpx;color: #007aff;font-size: 28rpx;
}
</style>