当前位置: 首页 > news >正文

微信小程序仿微信聊天界面

界面结构:

  • 消息列表: 使用 scroll-view 实现滚动,每条消息使用 view 组件包裹,根据消息类型 (文本、图片、文件) 显示不同内容。
  • 输入框区域: 包含输入框 (textarea)、发送按钮 (button) 和上传文件按钮 (view 组件模拟)。
  • 头像: 使用 image 组件展示。

功能实现:

  • 多行输入框高度自适应: 使用 textarea 组件的 auto-height 属性,并监听 linechange 事件动态调整高度。
  • 消息气泡样式: 使用 CSS 实现不同类型消息的气泡样式。
  • 发送消息: 点击发送按钮或输入框回车时,将消息内容添加到消息列表中,并清空输入框。
  • 上传文件: 点击上传文件按钮,调用小程序 API 选择文件并上传。

代码示例:

<!-- pages/chat/chat.wxml -->
<view class="container"><scroll-view class="message-list" scroll-y="true" style="height:{{scrollHeight}}px;"><view class="message-item {{item.isMe?'message-item-right':'message-item-left'}}" wx:for="{{messages}}" wx:key="index"><image class="avatar" src="{{item.isMe?'my-avatar.png':'other-avatar.png'}}"></image><view class="message-content {{item.isMe?'message-content-right':'message-content-left'}}"><view wx:if="{{item.type === 'text'}}">{{item.content}}</view><image wx:if="{{item.type === 'image'}}" src="{{item.content}}" mode="widthFix"></image><view wx:if="{{item.type === 'file'}}" class="file-message"><text class="file-name">{{item.content.name}}</text><text class="file-size">{{item.content.size}}</text></view></view></view></scroll-view><view class="input-area"><view class="input-bar"><view class="upload-btn" bindtap="uploadFile">+</view><textarea class="input-text" auto-height value="{{inputValue}}" bindinput="onInput" bindconfirm="sendMessage" placeholder="请输入消息内容" /><button class="send-btn" bindtap="sendMessage">发送</button></view></view>
</view>
// pages/chat/chat.js
Page({data: {scrollHeight: 0, // 滚动区域高度inputValue: '', // 输入框内容messages: [{ isMe: false, type: 'text', content: '你好' },{ isMe: true, type: 'text', content: '你好,请问有什么可以帮您?' },],},// 页面加载时获取滚动区域高度onLoad: function () {const that = this;wx.getSystemInfo({success: function (res) {that.setData({scrollHeight: res.windowHeight - 50, // 50 为输入框区域高度});},});},// 监听输入框内容变化onInput: function (e) {this.setData({inputValue: e.detail.value,});},// 发送消息sendMessage: function () {if (this.data.inputValue.trim() === '') return;this.data.messages.push({isMe: true,type: 'text',content: this.data.inputValue,});this.setData({messages: this.data.messages,inputValue: '',});// 滚动到底部this.scrollToBottom();},// 上传文件uploadFile: function () {const that = this;wx.chooseMessageFile({count: 1, // 只允许选择一个文件type: 'all', // 可以选择任意类型的文件success: function (res) {const file = res.tempFiles[0];// 将文件信息添加到消息列表中that.data.messages.push({isMe: true,type: 'file',content: {name: file.name,size: that.formatFileSize(file.size),},});that.setData({messages: that.data.messages,});// 滚动到底部that.scrollToBottom();// TODO: 上传文件到服务器// wx.uploadFile({//   // ...// });},});},// 格式化文件大小formatFileSize: function (size) {if (size < 1024) {return size + 'B';} else if (size < 1024 * 1024) {return (size / 1024).toFixed(1) + 'KB';} else if (size < 1024 * 1024 * 1024) {return (size / (1024 * 1024)).toFixed(1) + 'MB';} else {return (size / (1024 * 1024 * 1024)).toFixed(1) + 'GB';}},// 滚动到底部scrollToBottom: function () {this.setData({scrollTop: 999999,});},
});
/* pages/chat/chat.wxss */
.container {display: flex;flex-direction: column;height: 100%;padding-bottom: 0rpx;padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}.message-list {flex: 1;padding: 20rpx;
}.message-item {display: flex;padding-bottom: 20rpx;
}.message-item-left {justify-content: flex-start;
}.message-item-right {flex-direction: row-reverse;
}.avatar {width: 80rpx;height: 80rpx;border-radius: 50%;margin: 10rpx;
}.message-content {max-width: 70%;padding: 20rpx;border-radius: 10rpx;
}.message-content-left {background-color: #77dbd3;
}.message-content-right {background-color: #9eea6a;
}.input-area {height: 50px;padding: 10rpx;background-color: #f6f6f6;
}.input-bar {display: flex;align-items: center;background-color: #fff;border-radius: 10rpx;
}.upload-btn {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;margin-left: 10rpx;background-color: #f6f6f6;border-radius: 50%;
}.input-text {flex: 1;height: 80rpx;padding: 10rpx;font-size: 28rpx;line-height: 40rpx;
}.send-btn {width: 120rpx;height: 80rpx;line-height: 80rpx;text-align: center;margin-left: 10rpx;background-color: #07c160;color: #fff;border-radius: 10rpx;
}.file-message {display: flex;flex-direction: column;
}.file-name {font-size: 24rpx;
}.file-size {font-size: 20rpx;color: #999;
}

注意:

  • 代码中只实现了基本功能,还有很多细节可以优化,例如消息时间显示、图片预览、文件下载等。
  • 上传文件功能需要配合后端接口实现。
  • 样式可以根据实际需求进行调整。

希望以上代码可以帮助你!

相关文章:

微信小程序仿微信聊天界面

界面结构: 消息列表: 使用 scroll-view 实现滚动&#xff0c;每条消息使用 view 组件包裹&#xff0c;根据消息类型 (文本、图片、文件) 显示不同内容。输入框区域: 包含输入框 (textarea)、发送按钮 (button) 和上传文件按钮 (view 组件模拟)。头像: 使用 image 组件展示。 …...

文件用电脑生成的在线技巧,能够轻松将多种类型文件转二维码

现在为了能够更加快捷将文件分享给其他人查看&#xff0c;很多人会通过制作二维码的方式来存储文件&#xff0c;这样可以减少文件对内存的占用&#xff0c;而且用户扫码获取内容也更加的方便快捷。二维码能够随时更新内容&#xff0c;可以长期通过一个二维码来提供个不同的内容…...

QT实现TCP/UDP通信

服务器端&#xff1a; 客户端&#xff1a; 服务器&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QTcpSocket> #include <QList> #include <QMessageBox> #include <QDebug&…...

流程自动化变革:看低代码开发如何赋能企业创新转型

在数字化转型的浪潮中&#xff0c;企业面临着前所未有的挑战和机遇。为了保持竞争力&#xff0c;企业必须快速适应市场变化&#xff0c;创新业务模式&#xff0c;并提高运营效率。流程自动化成为企业转型的关键&#xff0c;而低代码开发平台如JNPF&#xff0c;正成为推动这一变…...

可提示 3D 分割研究里程碑!SAM2Point:SAM2加持泛化任意3D场景、任意提示!

郑重声明&#xff1a;本解读已获得论文作者的原创解读授权 文章链接&#xff1a;https://arxiv.org/pdf/2408.16768 在线demo: https://huggingface.co/spaces/ZiyuG/SAM2Point code链接&#xff1a;https://github.com/ZiyuGuo99/SAM2Point 亮点直击 无投影 3D 分割&#xff1…...

Rabbitmq中得RPC调用代码详解

文章目录 1.RPC客户端2.RabbitMQ连接信息实体类3.XML工具类 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 直接上代码了 1.RPC客户端 …...

ISAC: Toward Dual-Functional Wireless Networks for 6G and Beyond【论文阅读笔记】

此系列是本人阅读论文过程中的简单笔记&#xff0c;比较随意且具有严重的偏向性&#xff08;偏向自己研究方向和感兴趣的&#xff09;&#xff0c;随缘分享&#xff0c;共同进步~ Integrated Sensing and Communications: Toward Dual-Functional Wireless Networks for 6G and…...

split 分割字符串方法解析,substring 截取字符串方法解析;二者的作用和区别?使用时需要注意什么?附代码和运行图

目录 一. 摘要 二. split 方法 2.1 String[] split(String regix) 2.2 String[] split(String regix&#xff0c;int limit) 2.3.1 当 int < 0时&#xff0c;会按照最大数量切割字符串 2.3.2 当 int 0时&#xff0c;此时就和第一个方法一样了&#xff0c;等于没有传入…...

HTTP 协议的基本格式

HTTP协议("超文本传输协议")&#xff0c;是一个被广泛使用应用层协议&#xff0c;自1991年正式发布HTTP协议以来&#xff0c;HTTP协议就一直在更新&#xff0c;目前已经更新到3.0版本&#xff0c;但是目前主流的依旧是1.1版本&#xff0c;但依旧是一个最主流使用的应…...

STM32-HAL库开发快速入门

注:本文主要记录一下STM32CubeMX软件的使用流程,记录内容以STM32外设&#xff08;中断、I2C、USART、SPI等配置&#xff09;在STM32CubeMX中的设置为主&#xff0c;对驱动代码编写不做记录&#xff0c;所以阅读本文最好有标准库开发经验。除第2节外&#xff0c;使用的都是韦东山…...

vue3-print打印eletable某一行的数据

主页面的表格 <template><el-table :data"list"><el-table-column label"操作" align"center"><template #default"scope"><el-buttonlinktype"primary"click"handleType(scope.row)"…...

【Vue】pnpm创建Vue3+Vite项目

初始化项目 &#xff08;1&#xff09;cmd切换到指定工作目录&#xff0c;运行pnpm create vue命令&#xff0c;输入项目名称后按需安装组件 &#xff08;2&#xff09;使用vs code打开所创建的项目目录&#xff0c;Ctrl~快捷键打开终端&#xff0c;输入pnpm install下载项目…...

springboot配置多数据源

springboot配置多数据源 学习新技术&#xff0c;争做新青年&#xff0c;欢迎围观&#xff0c;河南老乡在上海请&#xff0c;加&#xff0c;微&#xff0c;andyfau2022&#xff0c; ----获取数据源&#xff1a;null&#xff0c;数据源为null时默认使用主数据源的。 1-yml文件…...

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题&#xff1a;墙体两侧特征混淆误匹配&#xff0c;导致建图和定位偏差&#xff0c;表现为过门跳变、外月台走歪等 解决思路&#xff1a;预期的根治方案IGICP需要较长时间完成上线&#xff0c;先使用切分地图的工程化方案&#xff0c;即墙体两侧切…...

ChatGPT+Simple Mind Map生成思维导图:快速提升学习效率

一、告别杂乱笔记&#xff0c;一键生成清晰思维导图&#xff01; 最近开始学习网络安全&#xff0c;一头扎进了各种协议、漏洞、防御机制的海洋中。信息量巨大&#xff0c;知识点零散&#xff0c;让我很快便陷入了“知识焦虑”——笔记越记越多&#xff0c;却越来越混乱&#…...

Day9 | Java框架 | SpringBoot

Day9 | Java框架 | SpringBoot SpringBoot简介入门程序概述起步依赖 基础配置配置文件格式&#xff1a;3种yaml语法规则yaml数据读取三种格式 多环境启动配置文件参数命令行参数多环境开发控制&#xff1a;Maven & SpringBoot 多环境兼容 配置文件分类&#xff1a;4种 整合…...

Wordpress右下角表单弹出插件

Ultimate Sticky Popup & Widgets Charcoal Making Machine | Equipment for Sale - Kingtiger...

影刀RPA实战:自动化批量生成条形码完整指南

今天我们聊聊使用影刀来实现批量生成条形码&#xff0c;条形码在零售行业运用非常广泛&#xff0c;主要作用表现在产品识别&#xff0c;库存管理&#xff0c;销售管理&#xff0c;防伪保护等&#xff0c;这些作用使其成为现代商业和工业环境中不可或缺的工具&#xff0c;它极大…...

Python Flask简介

简介 Flask 有两个主要依赖&#xff1a;路由、调试和 Web 服务器网关接口&#xff08;Web Server Gateway Interface&#xff0c;WSGI&#xff09; 子系统由&#xff1a;Werkzeug 提供模板系统由&#xff1a;Jinja2提供Werkzeug 和 Jinjia2 都是由 Flask 的核心开发者开发而成…...

视频监控平台是如何运作的?EasyCVR视频汇聚平台的高效策略与实践

随着科技的飞速发展&#xff0c;视频监控平台在社会安全、企业管理、智慧城市构建等领域发挥着越来越重要的作用。一个高效的视频监控平台&#xff0c;不仅依赖于先进的硬件设备&#xff0c;更离不开强大的视频处理技术作为支撑。这些平台集成了多种先进的视频技术&#xff0c;…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...