使用 HTML + JavaScript 实现仿微信桌面聊天界面（附完整代码）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2025年8月8日 10:53 本文热度 82

搭建基础的HTML结构和样式框架

页面居中布局

为了让整个应用在页面中居中显示，我们对 html 和 body 元素进行了如下设置：通过Flex布局，实现了水平和垂直居中，同时设置了背景色为灰色，模拟桌面应用程序的环境。

html,body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d9d9d9;
    margin: 0 auto;
}

主容器设计

.container 类定义了应用的主容器，这个容器具有以下特点：

固定尺寸：910x640像素（微信桌面版的大致尺寸）
白色背景，与灰色页面背景形成对比
添加了阴影效果，增强立体感
使用Flex布局，便于内部组件排列
圆角设计，提升视觉效果

.container {
    width: 910px;
    height: 640px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    border-radius: 4px;
    position: relative;
}

添加侧边功能栏

引入图标库

首先，我们在中引入了 Font Awesome 图标库，这将为我们提供丰富的图标资源，用于美化界面元素。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

新增侧边栏结构

在 .container 中，添加功能区（sidebar）。它包含四个图标，分别代表：聊天会话（fa-comments）、群聊/联系人（fa-user-group）、文件管理（fa-folder）、设置（fa-gear）。

<div class="sidebar">
  <div class="sidebar-item active"><i class="fa-solid fa-comments"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-user-group"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-folder"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-gear"></i></div>
</div>

侧边栏样式设计

侧边栏整体样式：宽度为60px，深灰色背景（#2e2e2e），使用Flex布局实现垂直排列，并通过 padding-top 在顶部留出20px的间距。

.sidebar {
    width: 60px;
    background-color: #2e2e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

功能项样式：每个功能项都是40x40像素的正方形，具有浅灰色背景（#3a3a3a）、圆角设计、居中显示图标、鼠标悬停时显示手型光标、添加了背景色过渡动画效果、图标为白色、大小20px。

.sidebar-item {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #3a3a3a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #fff;
    font-size: 20px;
}

交互效果：鼠标悬停时，背景色变为更浅的灰色（#4a4a4a）；当前激活项（active类）背景色为微信标志性的绿色（#07c160）

.sidebar-item:hover {
    background-color: #4a4a4a;
}
.sidebar-item.active {
    background-color: #07c160;
}

实现会话列表区域

新增会话列表结构

在 .container 中添加了会话列表区域，包含两个主要部分：顶部搜索框区域（.chat-list-header）、聊天会话项列表（多个 .chat-item）。

<div class="chat-list">
  <div class="chat-list-header">
    <div class="search-box">
      <input type="text" placeholder="搜索">
    </div>
  </div>
  <div class="chat-item active">
    <div class="avatar">A</div>
    <div class="chat-info">
      <div class="chat-name">Alice</div>
      <div class="chat-preview">你好，最近怎么样？</div>
    </div>
  </div>
  <!-- 更多聊天项... -->
</div>

会话列表样式设计

会话列表容器：宽度为240px，浅灰色背景（#f5f5f5），右侧添加了分隔线，使用Flex布局实现垂直排列。

.chat-list {
    width: 240px;
    background-color: #f5f5f5;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

搜索框区域：高60px，包含一个输入框用于搜索会话。输入框去除了默认边框和轮廓，提供简洁的搜索体验。

.chat-list-header {
    height: 60px;
    background-color: #f5f5f5;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
}
.search-box {
    flex: 1;
    height: 35px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
}
.search-box input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

聊天会话项：每个聊天项高70px，包含头像和聊天信息。交互效果：鼠标悬停时背景色变浅、激活项具有更深的背景色。

.chat-item {
    height: 70px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s;
}
.chat-item:hover {
    background-color: #e8e8e8;
}
.chat-item.active {
    background-color: #e0e0e0;
}

头像和信息展示：头像使用绿色背景和白色粗体字母，模拟用户头像；聊天信息区域包含联系人姓名和最新消息预览，消息预览具有文本截断效果。

.avatar {
    width: 45px;
    height: 45px;
    background-color: #07c160;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}
.chat-info {
    flex: 1;
    overflow: hidden;
}
.chat-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}
.chat-preview {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

实现聊天主区域

新增聊天主区域结构

在 .container 中添加了聊天主区域，包含三个部分：

聊天头部（.chat-header）- 显示当前聊天对象名称
消息显示区域（.chat-messages）- 显示聊天记录
消息输入区域（.chat-input）- 用户输入和发送消息

<div class="chat-area">
  <div class="chat-header">
    <div class="chat-title">Alice</div>
    <div class="chat-actions">
      <i class="fa-solid fa-ellipsis-h action-btn"></i>
    </div>
  </div>
  <div class="chat-messages">
    <div class="message received">
      <div class="avatar">A</div>
      <div class="message-bubble">你好，最近怎么样？</div>
    </div>
     <!-- 更多消息... -->
  </div>
  <div class="chat-input">
    <div class="input-tools">
      <i class="fa-regular fa-face-smile tool-btn"></i>
      <i class="fa-solid fa-paperclip tool-btn"></i>
      <i class="fa-solid fa-image tool-btn"></i>
    </div>
    <div class="input-box">
      <textarea placeholder="输入消息..."></textarea>
      <button class="send-btn">发送</button>
    </div>
  </div>
</div>

聊天主区域样式设计

聊天区域容器：占据了剩余的610px宽度，使用Flex布局实现垂直排列。

.chat-area {
    width: 610px;
    display: flex;
    flex-direction: column;
}

聊天头部：高60px，显示当前聊天对象名称，右侧包含操作按钮（目前只有一个省略号按钮）；按钮具有悬停效果，颜色会变为微信绿。

.chat-header {
    height: 60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.chat-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.chat-actions {
    display: flex;
    gap: 15px;
}
.action-btn {
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: color 0.3s;
}
.action-btn:hover {
    color: #07c160;
}

消息显示区域：使用滚动条处理大量消息；接收消息（.received）左对齐，使用白色气泡；发送消息（.sent）右对齐，使用绿色气泡（#95ec69）；消息气泡最大宽度为60%，避免过宽。

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f5f5f5;
}
.message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}
.message.sent {
    justify-content: flex-end;
}
.message-bubble {
    max-width: 60%;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}
.message.received .message-bubble {
    background-color: #fff;
    margin-left: 10px;
}
.message.sent .message-bubble {
    background-color: #95ec69;
    margin-right: 10px;
}

消息输入区域包含：

工具按钮：表情、附件、图片等（目前仅添加图标）
文本输入框：多行文本域，支持换行输入
发送按钮：绿色按钮，具有悬停效果

.chat-input {
    height: 120px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.input-tools {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tool-btn {
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: .3s;
}
.tool-btn:hover {
    color: #07c160;
}
.input-box {
    flex: 1;
    display: flex;
    gap: 10px;
}
.input-box textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    padding: 5px;
}
.send-btn {
    width: 80px;
    height: 30px;
    background-color: #07c160;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-end;
    transition: background-color 0.3s;
}
.send-btn:hover {
    background-color: #06a050;
}

添加基础交互功能

新增JavaScript交互代码

// 模拟发送消息
document.querySelector('.send-btn').addEventListener('click', function() {
  const textarea = document.querySelector('.input-box textarea');
  const message = textarea.value.trim();
  if (message) {
    const messagesContainer = document.querySelector('.chat-messages');
    const newMessage = document.createElement('div');
    newMessage.className = 'message sent';
    newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
    messagesContainer.appendChild(newMessage);
    textarea.value = '';
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
});
// 回车发送消息
document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    document.querySelector('.send-btn').click();
  }
});

功能实现解析

发送按钮点击事件：为发送按钮（.send-btn）添加了点击事件监听器，当用户点击发送按钮时会触发消息发送逻辑。

document.querySelector('.send-btn').addEventListener('click', function() {
  // ...
});

消息发送处理逻辑：首先获取输入框中的文本内容，并去除首尾空白字符。只有当消息内容不为空时才进行后续处理。

const textarea = document.querySelector('.input-box textarea');
const message = textarea.value.trim();
if (message) {
  // 处理消息发送
}

创建并添加新消息：当有有效消息时，获取消息显示区域（.chat-messages），创建新的消息元素，并设置类名为 message sent（表示发送的消息），设置消息内容为用户输入的文本，将新消息添加到消息显示区域。

const messagesContainer = document.querySelector('.chat-messages');
const newMessage = document.createElement('div');
newMessage.className = 'message sent';
newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
messagesContainer.appendChild(newMessage);

清空输入框并滚动到最新消息，确保最新消息可见。

textarea.value = '';
messagesContainer.scrollTop = messagesContainer.scrollHeight;

回车发送消息功能：为文本输入框添加了键盘事件监听器，当用户按下回车键（但不按Shift键）时阻止默认行为（避免在文本框中插入换行符），触发发送按钮的点击事件，实现快速发送消息。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿微信桌面聊天界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #d9d9d9;
            margin: 0 auto;
        }
        .container {
            width: 910px;
            height: 640px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            display: flex;
            border-radius: 4px;
            position: relative;
        }
        /* 功能区样式 */
        .sidebar {
            width: 60px;
            background-color: #2e2e2e;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        }
        .sidebar-item {
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
            background-color: #3a3a3a;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s;
            color: #fff;
            font-size: 20px;
        }
        .sidebar-item:hover {
            background-color: #4a4a4a;
        }
        .sidebar-item.active {
            background-color: #07c160;
        }
        /* 会话列表样式 */
        .chat-list {
            width: 240px;
            background-color: #f5f5f5;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        .chat-list-header {
            height: 60px;
            background-color: #f5f5f5;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e0e0e0;
        }
        .search-box {
            flex: 1;
            height: 35px;
            background-color: #fff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border: 1px solid #e0e0e0;
        }
        .search-box input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
        }
        .chat-item {
            height: 70px;
            padding: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.3s;
        }
        .chat-item:hover {
            background-color: #e8e8e8;
        }
        .chat-item.active {
            background-color: #e0e0e0;
        }
        .avatar {
            width: 45px;
            height: 45px;
            background-color: #07c160;
            border-radius: 4px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
        }
        .chat-info {
            flex: 1;
            overflow: hidden;
        }
        .chat-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #333;
        }
        .chat-preview {
            font-size: 14px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .chat-area {
            width: 610px;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            height: 60px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }
        .chat-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        .chat-actions {
            display: flex;
            gap: 15px;
        }
        .action-btn {
            cursor: pointer;
            color: #666;
            font-size: 18px;
            transition: color 0.3s;
        }
        .action-btn:hover {
            color: #07c160;
        }
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f5f5f5;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }
        .message.sent {
            justify-content: flex-end;
        }
        .message-bubble {
            max-width: 60%;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.5;
        }
        .message.received .message-bubble {
            background-color: #fff;
            margin-left: 10px;
        }
        .message.sent .message-bubble {
            background-color: #95ec69;
            margin-right: 10px;
        }
        .chat-input {
            height: 120px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }
        .input-tools {
            height: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .tool-btn {
            cursor: pointer;
            color: #666;
            font-size: 18px;
            transition: .3s;
        }
        .tool-btn:hover {
            color: #07c160;
        }
        .input-box {
            flex: 1;
            display: flex;
            gap: 10px;
        }
        .input-box textarea {
            flex: 1;
            border: none;
            outline: none;
            resize: none;
            font-size: 14px;
            padding: 5px;
        }
        .send-btn {
            width: 80px;
            height: 30px;
            background-color: #07c160;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
            transition: background-color 0.3s;
        }
        .send-btn:hover {
            background-color: #06a050;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 功能区 -->
      <div class="sidebar">
        <div class="sidebar-item active"><i class="fa-solid fa-comments"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-user-group"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-folder"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-gear"></i></div>
      </div>
      <!-- 会话列表 -->
      <div class="chat-list">
        <div class="chat-list-header">
          <div class="search-box">
            <input type="text" placeholder="搜索">
          </div>
        </div>
        <div class="chat-item active">
          <div class="avatar">A</div>
          <div class="chat-info">
            <div class="chat-name">Alice</div>
            <div class="chat-preview">你好，最近怎么样？</div>
          </div>
        </div>
        <div class="chat-item">
          <div class="avatar">B</div>
          <div class="chat-info">
            <div class="chat-name">Bob</div>
            <div class="chat-preview">明天见！</div>
          </div>
        </div>
        <div class="chat-item">
          <div class="avatar">C</div>
          <div class="chat-info">
            <div class="chat-name">Carol</div>
            <div class="chat-preview">文件已经发给你了</div>
          </div>
        </div>
      </div>
      <!-- 聊天区 -->
      <div class="chat-area">
        <div class="chat-header">
          <div class="chat-title">Alice</div>
          <div class="chat-actions">
            <i class="fa-solid fa-ellipsis-h action-btn"></i>
          </div>
        </div>
        <div class="chat-messages">
          <div class="message received">
            <div class="avatar">A</div>
            <div class="message-bubble">你好，最近怎么样？</div>
          </div>
          <div class="message sent">
            <div class="message-bubble">我很好，谢谢！你呢？</div>
          </div>
          <div class="message received">
            <div class="avatar">A</div>
            <div class="message-bubble">我也挺好的，周末有空一起喝咖啡吗？</div>
          </div>
          <div class="message sent">
            <div class="message-bubble">好啊，周六下午怎么样？</div>
          </div>
        </div>
        <div class="chat-input">
          <div class="input-tools">
            <i class="fa-regular fa-face-smile tool-btn"></i>
            <i class="fa-solid fa-paperclip tool-btn"></i>
            <i class="fa-solid fa-image tool-btn"></i>
          </div>
          <div class="input-box">
            <textarea placeholder="输入消息..."></textarea>
            <button class="send-btn">发送</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 模拟发送消息
    document.querySelector('.send-btn').addEventListener('click', function() {
      const textarea = document.querySelector('.input-box textarea');
      const message = textarea.value.trim();
      if (message) {
        const messagesContainer = document.querySelector('.chat-messages');
        const newMessage = document.createElement('div');
        newMessage.className = 'message sent';
        newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
        messagesContainer.appendChild(newMessage);
        textarea.value = '';
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
      }
    });
    // 回车发送消息
    document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        document.querySelector('.send-btn').click();
      }
    });
  </script>
</html>

转自https://juejin.cn/post/7535350468588683318

该文章在 2025/8/8 10:53:28 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。