当前位置: 首页 > 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;…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...