uniapp微信小程序聊天界面

### 使用 UniApp 开发微信小程序聊天界面 #### 创建项目结构 为了构建一个完整的聊天界面，在项目初始化阶段需规划好文件夹和页面布局。通常情况下，会有一个专门用于展示消息列表的页面以及处理发送新消息逻辑的功能模块。 #### 设计消息模型 定义数据对象来表示每条消息的内容、时间戳、发送者身份等属性。这有助于更好地管理和渲染对话记录。 ```javascript const messageModel = { id: String, // 唯一标识符 content: String, // 文本内容 timestamp: Number, // 时间戳 senderId: String // 发送方ID }; ``` #### 实现消息收发功能 通过 WebSocket 或 HTTP 请求等方式连接服务器端口以实现实时通信。对于简单的应用场景可以直接利用 uni.request API 进行轮询操作；而对于更复杂的需求，则建议采用 WebSockets 来保持持久化链接并降低延迟。 ##### 初始化WebSocket连接 ```javascript // 在 App.vue 中建立全局事件监听器 export default { created() { this.initSocket(); }, methods: { initSocket() { const socketTask = uni.connectSocket({ url: 'wss://example.com/socket' }); socketTask.onOpen(() => { console.log('WebSocket connection opened'); }); socketTask.onError((error) => { console.error(`WebSocket error occurred: ${JSON.stringify(error)}`); }); socketTask.onMessage(({ data }) => { let receivedData; try { receivedData = JSON.parse(data); } catch (e){ return; } if(receivedData.type === "message"){ // 更新UI显示新的消息 app.globalData.messages.push(receivedData.payload); } }); socketTask.onClose(() => { console.log('WebSocket closed'); }); app.globalData.socketTask = socketTask; } } } ``` ##### 处理用户输入与发送消息 当用户点击发送按钮时触发此函数，它负责收集当前用户的输入并将之封装成标准的消息格式后推送给其他参与者。 ```html <template> <!-- 聊天框 --> <view class="chat-input"> <input type="text" v-model="newMessageContent"/> <button @click="sendMessage">Send</button> </view> </template> <script> import { mapState } from 'vuex'; export default { computed:{ ...mapState(['userId']), }, data(){ return{ newMessageContent:'' }; }, methods: { sendMessage() { if (!this.newMessageContent.trim()) return; const outgoingMsg = { type:"message", payload:{...messageModel, content:this.newMessageContent, senderId:this.userId, timestamp:new Date().getTime() } }; app.globalData.socketTask.send({data:JSON.stringify(outgoingMsg)}); this.newMessageContent=''; } } } </script> ``` #### 渲染消息列表 最后一步是在前端界面上呈现所有的历史消息。可以考虑使用 Vue 的 `v-for` 指令遍历存储于 Vuex store 或本地 state 内部的消息数组，并根据不同条件调整样式（比如区分自己和其他人的发言）。 ```html <template> <scroll-view scroll-y style="height:80vh;"> <block v-for="(msg,index) in messages" :key="index"> <view :class="[msg.senderId===userId?'my-message':'other-message']">{{ msg.content }}</view> </block> </scroll-view> </template> <style scoped lang="scss"> .my-message{ /* 自己发出的信息 */ text-align:right; } .other-message{/* 对方发出的信息 */ text-align:left; } </style> ```