uniapp实现图文谈天功能

Uniapp 实现图文谈天功能

下面我将介绍如安在 Uniapp 中实现一个根本的图文谈天功能，包括消息发送、接收和展示。
一、准备工作

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

二、实现步骤

1. 页面结构

1. <template>
2.   <view class="chat-container">
3.     <!-- 聊天消息区域 -->
4.     <scroll-view
5.       class="message-list"
6.       scroll-y="true"
7.       :scroll-with-animation="true"
8.       :scroll-top="scrollTop"
9.     >
10.       <view
11.         v-for="(item, index) in messageList"
12.         :key="index"
13.         :class="['message-item', item.isMe ? 'my-message' : 'other-message']"
14.       >
15.         <!-- 头像 -->
16.         <image
17.           class="avatar"
18.           :src="item.isMe ? myAvatar : otherAvatar"
19.           mode="aspectFill"
20.         ></image>
21.         
22.         <!-- 消息内容 -->
23.         <view class="message-content">
24.           <!-- 文本消息 -->
25.           <text v-if="item.type === 'text'" class="text-message">{{ item.content }}</text>
26.          
27.           <!-- 图片消息 -->
28.           <image
29.             v-else-if="item.type === 'image'"
30.             class="image-message"
31.             :src="item.content"
32.             mode="widthFix"
33.             @click="previewImage(item.content)"
34.           ></image>
35.         </view>
36.       </view>
37.     </scroll-view>
38.    
39.     <!-- 输入区域 -->
40.     <view class="input-area">
41.       <!-- 图片选择按钮 -->
42.       <view class="action-btn" @click="chooseImage">
43.         <uni-icons type="image" size="24" color="#666"></uni-icons>
44.       </view>
45.       
46.       <!-- 文本输入框 -->
47.       <input
48.         class="input-box"
49.         v-model="inputText"
50.         placeholder="输入消息..."
51.         @confirm="sendTextMessage"
52.       />
53.       
54.       <!-- 发送按钮 -->
55.       <view class="send-btn" @click="sendTextMessage">
56.         <text>发送</text>
57.       </view>
58.     </view>
59.   </view>
60. </template>

复制代码

2. JavaScript 逻辑

1. <script>
2. export default {
3.   data() {
4.     return {
5.       messageList: [], // 消息列表
6.       inputText: '', // 输入文本
7.       scrollTop: 0, // 滚动位置
8.       myAvatar: '/static/avatars/my-avatar.jpg', // 我的头像
9.       otherAvatar: '/static/avatars/other-avatar.jpg', // 对方头像
10.       socket: null // WebSocket 连接
11.     }
12.   },
13.   onLoad() {
14.     this.initWebSocket();
15.     // 加载历史消息
16.     this.loadHistoryMessages();
17.   },
18.   onUnload() {
19.     // 关闭 WebSocket 连接
20.     if (this.socket) {
21.       this.socket.close();
22.     }
23.   },
24.   methods: {
25.     // 初始化 WebSocket
26.     initWebSocket() {
27.       // 这里替换为你的 WebSocket 地址
28.       this.socket = new WebSocket('wss://your-websocket-url.com');
29.       
30.       this.socket.onopen = () => {
31.         console.log('WebSocket 连接成功');
32.       };
33.       
34.       this.socket.onmessage = (res) => {
35.         const message = JSON.parse(res.data);
36.         this.receiveMessage(message);
37.       };
38.       
39.       this.socket.onerror = (err) => {
40.         console.error('WebSocket 错误:', err);
41.       };
42.       
43.       this.socket.onclose = () => {
44.         console.log('WebSocket 连接关闭');
45.       };
46.     },
47.    
48.     // 加载历史消息
49.     loadHistoryMessages() {
50.       // 这里调用你的 API 获取历史消息
51.       uni.request({
52.         url: 'https://your-api-url.com/messages',
53.         success: (res) => {
54.           this.messageList = res.data.messages;
55.           this.scrollToBottom();
56.         }
57.       });
58.     },
59.    
60.     // 发送文本消息
61.     sendTextMessage() {
62.       if (!this.inputText.trim()) return;
63.       
64.       const message = {
65.         id: Date.now(),
66.         type: 'text',
67.         content: this.inputText,
68.         isMe: true,
69.         time: new Date().toLocaleTimeString()
70.       };
71.       
72.       // 添加到消息列表
73.       this.messageList.push(message);
74.       this.inputText = '';
75.       
76.       // 发送到服务器
77.       this.sendToServer(message);
78.       
79.       // 滚动到底部
80.       this.$nextTick(() => {
81.         this.scrollToBottom();
82.       });
83.     },
84.    
85.     // 选择图片
86.     chooseImage() {
87.       uni.chooseImage({
88.         count: 1,
89.         sizeType: ['compressed'],
90.         sourceType: ['album', 'camera'],
91.         success: (res) => {
92.           const tempFilePaths = res.tempFilePaths;
93.           this.uploadImage(tempFilePaths[0]);
94.         }
95.       });
96.     },
97.    
98.     // 上传图片
99.     uploadImage(filePath) {
100.       uni.showLoading({ title: '上传中...' });
101.       
102.       // 这里替换为你的上传 API
103.       uni.uploadFile({
104.         url: 'https://your-api-url.com/upload',
105.         filePath: filePath,
106.         name: 'file',
107.         success: (uploadRes) => {
108.           const res = JSON.parse(uploadRes.data);
109.           if (res.code === 0) {
110.             const message = {
111.               id: Date.now(),
112.               type: 'image',
113.               content: res.data.url,
114.               isMe: true,
115.               time: new Date().toLocaleTimeString()
116.             };
117.             
118.             this.messageList.push(message);
119.             this.sendToServer(message);
120.             
121.             this.$nextTick(() => {
122.               this.scrollToBottom();
123.             });
124.           }
125.         },
126.         complete: () => {
127.           uni.hideLoading();
128.         }
129.       });
130.     },
131.    
132.     // 发送消息到服务器
133.     sendToServer(message) {
134.       if (this.socket && this.socket.readyState === WebSocket.OPEN) {
135.         this.socket.send(JSON.stringify(message));
136.       } else {
137.         // 如果 WebSocket 不可用，使用 HTTP 请求
138.         uni.request({
139.           url: 'https://your-api-url.com/send',
140.           method: 'POST',
141.           data: message,
142.           success: () => {
143.             console.log('消息发送成功');
144.           }
145.         });
146.       }
147.     },
148.    
149.     // 接收消息
150.     receiveMessage(message) {
151.       message.isMe = false; // 标记为对方消息
152.       this.messageList.push(message);
153.       
154.       this.$nextTick(() => {
155.         this.scrollToBottom();
156.       });
157.     },
158.    
159.     // 预览图片
160.     previewImage(url) {
161.       uni.previewImage({
162.         urls: this.messageList
163.           .filter(item => item.type === 'image')
164.           .map(item => item.content),
165.         current: url
166.       });
167.     },
168.    
169.     // 滚动到底部
170.     scrollToBottom() {
171.       // 这里需要根据实际内容高度计算
172.       this.scrollTop = 99999;
173.     }
174.   }
175. }
176. </script>

复制代码

3. CSS 样式

1. <style>
2. .chat-container {
3.   display: flex;
4.   flex-direction: column;
5.   height: 100vh;
6.   background-color: #f5f5f5;
7. }
9. .message-list {
10.   flex: 1;
11.   padding: 20rpx;
12.   overflow: auto;
13. }
15. .message-item {
16.   display: flex;
17.   margin-bottom: 30rpx;
18. }
20. .my-message {
21.   flex-direction: row-reverse;
22. }
24. .other-message {
25.   flex-direction: row;
26. }
28. .avatar {
29.   width: 80rpx;
30.   height: 80rpx;
31.   border-radius: 10rpx;
32. }
34. .message-content {
35.   max-width: 60%;
36.   margin: 0 20rpx;
37. }
39. .text-message {
40.   padding: 15rpx 20rpx;
41.   border-radius: 10rpx;
42.   background-color: #fff;
43.   font-size: 28rpx;
44.   line-height: 1.5;
45. }
47. .my-message .text-message {
48.   background-color: #95ec69;
49. }
51. .image-message {
52.   max-width: 100%;
53.   border-radius: 10rpx;
54. }
56. .input-area {
57.   display: flex;
58.   align-items: center;
59.   padding: 20rpx;
60.   background-color: #fff;
61.   border-top: 1rpx solid #eee;
62. }
64. .input-box {
65.   flex: 1;
66.   height: 70rpx;
67.   padding: 0 20rpx;
68.   margin: 0 20rpx;
69.   border-radius: 35rpx;
70.   background-color: #f5f5f5;
71.   font-size: 28rpx;
72. }
74. .action-btn {
75.   padding: 10rpx;
76. }
78. .send-btn {
79.   padding: 10rpx 20rpx;
80.   color: #007aff;
81.   font-size: 28rpx;
82. }
83. </style>

复制代码

三、功能扩展建议

• 消息状态：添加发送中、已发送、已读等状态
  
• 消息撤回：实现消息撤回功能
  
• 语音消息：添加语音消息功能
  
• 心情包：支持心情包发送
  
• 消息分页：实现消息分页加载
  
• 离线消息：处置处罚离线消息同步
  
• 消息加密：增加消息加密功能
  

四、注意事项

• 实际开发中必要替换示例中的 API 地址和 WebSocket 地址
  
• 图片上传必要根据后端接口调整参数
  
• 生产环境必要考虑安全性、性能优化等问题
  
• 对于复杂的谈天应用，建议使用成熟的即时通讯 SDK（如融云、环信等）
  

这个实现提供了根本的图文谈天功能，你可以根据实际需求进行扩展和优化。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。