投稿获客
  1. 创想鸟首页
  2. 用户投稿

如何为HTML表格添加模态框交互？JavaScript怎么实现？

程序猿 • • 用户投稿 • 阅读 0

为html表格添加模态框交互的核心思路是监听点击事件并动态填充显示模态框。2. 实现需html结构、css样式和javascript逻辑三者配合：html提供表格和模态框基础结构，css控制模态框的隐藏、展示和动画效果，javascript实现事件监听、数据填充与交互逻辑。3. 模态框通过数据属性（data-*）获取信息并动态展示，提升了信息展示效率和用户操作体验。4. 触发方式不仅限于点击按钮，还可使用双击或悬停，但需结合业务需求。5. 面对大量数据时采用事件委托减少性能开销，并可通过异步加载数据提升首次加载速度。6. 模态框支持数据更新与提交，涉及表单管理、异步请求（如fetch api）、前端验证、用户反馈、错误处理及安全性措施等技术考量。7. 整体流程包括事件触发、数据填充、用户操作、数据提交及表格同步，形成完整的交互闭环。

如何为HTML表格添加模态框交互？JavaScript怎么实现？

给HTML表格添加模态框交互，用JavaScript来实现，核心思路就是监听表格元素的点击事件，然后根据点击的具体内容，动态地填充并显示一个预先设计好的模态框（或者说弹窗），当用户操作完成后再将其隐藏。这能极大地提升用户体验，让复杂的数据展示变得更清晰、操作更便捷，避免页面跳转或信息过载。

如何为HTML表格添加模态框交互？JavaScript怎么实现？

解决方案

要实现这个功能，我们通常需要HTML结构、CSS样式和JavaScript逻辑三者配合。

首先，我们得有个基本的HTML表格和模态框的结构：

立即学习“Java免费学习笔记（深入）”；

如何为HTML表格添加模态框交互？JavaScript怎么实现？

      
      ID      名称      描述      操作    
        
      1      产品A      简短描述A...          
    
      2      产品B      简短描述B...

接着，CSS是让模态框看起来像个模态框的关键，比如默认隐藏、居中、背景半透明覆盖等：

/* 模态框基础样式 */.modal {  display: none; /* 默认隐藏 */  position: fixed; /* 固定定位 */  z-index: 1000; /* 确保在最上层 */  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto; /* 允许滚动 */  background-color: rgba(0,0,0,0.4); /* 半透明背景 */  justify-content: center; /* 水平居中 */  align-items: center; /* 垂直居中 */}.modal-content {  background-color: #fefefe;  margin: auto; /* 自动外边距实现居中 */  padding: 20px;  border: 1px solid #888;  width: 80%; /* 宽度 */  max-width: 500px; /* 最大宽度 */  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);  animation-name: animatetop;  animation-duration: 0.4s}/* 关闭按钮 */.close-button {  color: #aaa;  float: right;  font-size: 28px;  font-weight: bold;}.close-button:hover,.close-button:focus {  color: black;  text-decoration: none;  cursor: pointer;}/* 模态框出现动画 */@keyframes animatetop {  from {top: -300px; opacity: 0}  to {top: 0; opacity: 1}}

最后，就是JavaScript的逻辑了：

如何为HTML表格添加模态框交互？JavaScript怎么实现？

document.addEventListener('DOMContentLoaded', () => {  const table = document.getElementById('myTable');  const modal = document.getElementById('myModal');  const closeButton = modal.querySelector('.close-button');  const modalId = document.getElementById('modal-id');  const modalName = document.getElementById('modal-name');  const modalDesc = document.getElementById('modal-desc');  // 使用事件委托，监听表格内部的点击事件  table.addEventListener('click', (event) => {    // 检查点击的是否是“查看详情”按钮    if (event.target.classList.contains('view-details')) {      const row = event.target.closest('tr'); // 找到最近的父级      if (row) {        // 从数据属性中获取信息        const id = row.dataset.id;        const name = row.dataset.name;        const desc = row.dataset.desc;        // 填充模态框内容        modalId.textContent = id;        modalName.textContent = name;        modalDesc.textContent = desc;        // 显示模态框        modal.style.display = 'flex'; // 使用flexbox来居中      }    }  });  // 关闭模态框的逻辑  closeButton.addEventListener('click', () => {    modal.style.display = 'none';  });  // 点击模态框外部区域关闭  window.addEventListener('click', (event) => {    if (event.target === modal) {      modal.style.display = 'none';    }  });  // 示例：模态框内的编辑按钮点击事件  const editButton = document.getElementById('edit-button');  editButton.addEventListener('click', () => {    alert('你点击了编辑按钮！可以在这里跳转到编辑页面或弹出编辑表单。');    // 实际应用中，这里会加载一个编辑表单或者跳转到编辑页面  });});

这个方案里，我们通过给表格的每一行或特定的操作按钮添加数据属性（data-*），然后在JavaScript中获取这些属性值来填充模态框，这是一种非常灵活且解耦的方式。

为什么需要为表格添加模态框交互？它能带来哪些用户体验提升？

在我看来，为表格添加模态框交互，不仅仅是让页面看起来“动起来”那么简单，它解决了很多实际的用户体验痛点。最直接的好处就是信息展示的效率和清晰度。想想看，如果一张表格有几十列甚至上百列数据，或者某一列的详情内容非常多，直接全部铺开在表格里，那简直是灾难。用户得不停地左右滚动，视觉焦点也很容易迷失。

模态框这时就扮演了一个“放大镜”或者“详情页”的角色。它能让用户在不离开当前表格视图的情况下，聚焦到某一条数据的完整细节。比如，你有一个产品列表，表格里只显示产品名称、价格、库存等概要信息，但如果用户想看某个产品的详细描述、规格参数、图片等，点击一下，模态框弹出来，所有这些额外的信息就都呈现在眼前了。这种方式避免了页面跳转，减少了用户的认知负荷和操作步骤。

我个人觉得，它还提升了操作的直观性。很多时候，我们不希望用户在表格里直接修改数据，因为误操作的风险太高。把“编辑”、“删除”这类操作放到模态框里，结合一个确认步骤，会显得更加安全和专业。用户会觉得整个流程是受控的，而不是在一个杂乱的界面上瞎点。同时，模态框也能提供一个更丰富的交互环境，比如在模态框里嵌入小表单、图片轮播、甚至是一个小图表，这些都是表格单元格里很难直接实现的。它让数据不仅仅是展示，还能进行更深层次的互动。

除了点击行，还有哪些触发模态框的方式？如何处理大量数据时的性能问题？

除了直接点击表格行或者行内的某个按钮来触发模态框，其实还有不少其他的方式，这取决于你的具体业务需求和用户习惯。比如，双击行也是一个常见的触发方式，用户可能会觉得双击表示“深入查看”。再比如，在某些场景下，你可能希望鼠标悬停（hover）在某个特定单元格上时，弹出一个小型的提示框（虽然这更像tooltip而不是完整的模态框，但思路是相通的），提供一些简要的额外信息，只有当用户点击时才弹出完整的模态框。还有一种情况，是在表格的每一行末尾添加一个“更多操作”的下拉菜单，模态框是其中一个选项，这样可以集成更多功能。

至于处理大量数据时的性能问题，这确实是个值得深思的问题。如果表格数据量非常大，比如几千上万条，为每一行都绑定一个独立的事件监听器，那浏览器会不堪重负。这种情况下，事件委托（Event Delegation）就是我们的救星。

我的做法通常是，不给每一行或每个按钮单独绑定事件，而是给它们的共同父元素，也就是整个

或者

元素绑定一个事件监听器。当点击事件发生时，事件会从被点击的那个最小元素（event.target）开始，沿着DOM树向上冒泡，直到被父元素捕获。在事件处理函数里，我们通过 event.target 来判断到底是哪个元素被点击了，再通过 closest() 方法找到它最近的父级行

。

举个例子，就像解决方案里那样：

table.addEventListener('click', (event) => {  if (event.target.classList.contains('view-details')) {    const row = event.target.closest('tr');    // ... 获取数据并显示模态框  }});

这样一来，无论表格有多少行，我们都只需要一个事件监听器，极大地减少了内存占用和性能开销。

另外一个性能考量是关于模态框内容的加载。如果模态框需要展示的数据非常复杂，或者需要从服务器动态获取，那么在点击时才去异步加载（AJAX）这些数据会更高效。而不是在页面加载时就把所有数据的详情都预先加载好。当用户点击“查看详情”按钮时，我们可以向后端发送一个请求，获取当前条目的完整数据，然后填充模态框。这避免了首次加载时过大的数据量，让页面响应更快。

模态框中的数据如何进行更新或提交？涉及哪些前端技术考量？

模态框既然能展示数据，自然也能用来进行数据的更新或提交，这在实际业务中非常常见。最典型的场景就是把模态框变成一个小型表单。用户在模态框里修改数据，然后点击“保存”或“提交”按钮，将修改后的数据发送到后端。

这其中涉及的前端技术考量就多了。

首先是表单元素的管理。你需要在模态框内放置 input、textarea、select 等表单控件，并且在模态框打开时，用当前数据填充这些控件。当用户点击提交时，你需要收集这些表单数据。

接着是数据提交。这通常是通过异步请求（AJAX）来实现的。在现代前端开发中，我们最常用的是 fetch API 或者 XMLHttpRequest 对象来发送HTTP请求。比如，用户点击保存后，你可以构建一个包含所有修改数据的JSON对象，然后通过 fetch 发送一个 PUT 或 POST 请求到你的API接口。

一个简单的 fetch 示例可能长这样：

// 假设模态框里有个保存按钮和一些输入框const saveButton = document.getElementById('modal-save-button');saveButton.addEventListener('click', async () => {  const updatedName = document.getElementById('modal-edit-name').value;  const updatedDesc = document.getElementById('modal-edit-desc').value;  const currentId = document.getElementById('modal-id').textContent; // 从显示ID的元素获取  try {    const response = await fetch(`/api/products/${currentId}`, {      method: 'PUT', // 或 'POST'      headers: {        'Content-Type': 'application/json',        // 'X-CSRF-TOKEN': 'your-csrf-token' // 如果有CSRF保护      },      body: JSON.stringify({        name: updatedName,        description: updatedDesc      })    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const result = await response.json();    console.log('更新成功:', result);    alert('数据更新成功！');    // 成功后，你可能需要更新表格中的对应行数据，并关闭模态框    updateTableRow(currentId, updatedName, updatedDesc); // 假设有这个函数    modal.style.display = 'none';  } catch (error) {    console.error('更新失败:', error);    alert('数据更新失败，请重试。');    // 显示错误信息给用户  }});// 假设的更新表格行数据的函数function updateTableRow(id, newName, newDesc) {  const row = document.querySelector(`tr[data-id="${id}"]`);  if (row) {    // 找到对应的td并更新文本内容    // 这需要你知道td的索引或者给td添加class/id    // 比如：row.querySelector('.product-name-cell').textContent = newName;    // 或者更直接地更新data属性，然后重新渲染（如果你的表格是动态渲染的）    row.dataset.name = newName;    // 刷新页面或者只更新表格中对应的数据，这取决于你的数据管理方式    // 简单粗暴点可以直接更新显示名称的td    // 比如，假设名称在第二个td    row.children[1].textContent = newName;    // 描述在第三个td    row.children[2].textContent = newDesc.substring(0, 10) + '...'; // 更新简短描述  }}

此外，还有一些重要的考量点：

表单验证（Form Validation）：在数据提交前，你肯定需要对用户输入的数据进行前端验证，比如非空检查、格式检查（邮箱、手机号、数字等）。这可以在用户点击保存时进行，也可以在输入过程中实时进行。用户反馈：当数据正在提交时，给用户一个加载中的提示（比如一个旋转的加载图标），避免用户重复点击。提交成功或失败后，也要给出明确的反馈信息（比如绿色的成功提示或红色的错误提示）。错误处理：网络请求可能会失败，服务器可能会返回错误。你需要捕获这些错误，并以友好的方式展示给用户，告诉他们哪里出了问题。状态管理：如果你在用一些前端框架（如React, Vue），那么模态框的数据和表格数据之间的同步会通过框架的状态管理机制来处理。但对于纯JavaScript项目，你需要手动更新DOM，确保表格中的数据和模态框中的修改是同步的。安全性：如果模态框允许用户输入，那么在将这些数据展示回页面时，要警惕XSS（跨站脚本攻击）风险，确保对用户输入进行适当的净化（sanitization）。

这整个流程，从数据获取、填充、修改、验证到提交，再到用户反馈和表格更新，构成了一个相对完整的交互闭环。

以上就是如何为HTML表格添加模态框交互？JavaScript怎么实现？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568417.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
HTML5的IndexedDB怎么用？如何存储大量数据？
上一篇 2025年12月22日 11:45:14
CSS的backface-visibility属性有什么作用？
下一篇 2025年12月22日 11:45:30

相关推荐

  • 修复Django电商项目中AJAX过滤产品列表图片不显示问题 用户投稿

    修复Django电商项目中AJAX过滤产品列表图片不显示问题

    在Django电商项目中，当使用AJAX动态加载过滤后的产品列表时，常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式（如data-setbg属性结合JavaScript库）与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片，确保浏览…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Golang JSON序列化：控制敏感字段暴露的最佳实践 用户投稿

    Golang JSON序列化：控制敏感字段暴露的最佳实践

    本教程探讨golang中如何高效控制结构体字段在json序列化时的可见性。当需要将包含敏感信息的结构体数组转换为json响应时，通过利用`encoding/json`包提供的结构体标签，特别是`json:”-“`，可以轻松实现对特定字段的忽略，从而避免敏感数据泄露，确保api…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 比特币新手教程 比特币交易平台有哪些 用户投稿

    比特币新手教程 比特币交易平台有哪些

    比特币是一种去中心化的数字货币，基于区块链技术实现点对点交易，具有匿名性、有限发行和不可篡改等特点；新手可通过交易所购买，P2P交易获得比特币，常用平台包括Binance、OKX和Huobi；交易流程包括注册账户、实名认证、绑定支付方式、充值法币并下单购买，可选择市价单或限价单；比特币存储方式有交易…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • c++中的SFINAE技术是什么_c++模板编程中的SFINAE原理与应用 用户投稿

    c++中的SFINAE技术是什么_c++模板编程中的SFINAE原理与应用

    SFINAE 是“替换失败不是错误”的原则，指模板实例化时若参数替换导致错误，只要存在其他合法候选，编译器不报错而是继续重载决议。它用于条件启用模板、类型检测等场景，如通过 decltype 或 enable_if 控制函数重载，实现类型特征判断。尽管 C++20 引入 Concepts 简化了部分…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Go语言mgo查询构建：深入理解bson.M与日期范围查询的正确实践 用户投稿

    Go语言mgo查询构建：深入理解bson.M与日期范围查询的正确实践

    本文旨在解决go语言mgo库中构建复杂查询时，特别是涉及嵌套`bson.m`和日期范围筛选的常见错误。我们将深入剖析`bson.m`的类型特性，解释为何直接索引`interface{}`会导致“invalid operation”错误，并提供一种推荐的、结构清晰的代码重构方案，以确保查询条件能够正确…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • css max-height属性怎么用 用户投稿

    css max-height属性怎么用

    max-height 属性设置元素的最大高度。 说明 该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。 注意：max-height 属性不包括外边距、边框和内边距。 立即学习“前端免费学习笔记（深入）”； 值描述none 默认。定义对元素被允许的最大高…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • vscode上怎么运行html_vscode上运行html步骤【指南】 用户投稿

    vscode上怎么运行html_vscode上运行html步骤【指南】

    首先保存文件为.html格式，再通过浏览器或Live Server插件打开预览；推荐安装Live Server实现本地服务器运行与实时刷新，提升开发体验。 在 VS Code 上运行 HTML 文件并不需要复杂的配置，只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器，不直接运行…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • 修复点击时按钮抖动：CSS垂直对齐实践 用户投稿

    修复点击时按钮抖动：CSS垂直对齐实践

    本文探讨了在Web开发中，交互式按钮（如播放/暂停按钮）在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响，我们发现这是由于按钮不同状态下的边框样式和内边距改变，以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性，将其设置为middle…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • 理解编程指令：当结果正确，但实现方式不符要求时 用户投稿

    理解编程指令：当结果正确，但实现方式不符要求时

    本文探讨了在编程实践中，即使程序输出了正确的结果，但若其实现方式未能严格遵循既定指令，仍可能被视为“不正确”的问题。我们将通过具体示例，对比直接求和与累加求和两种实现策略，强调理解和遵守编程规范的重要性，以确保代码的健壮性、可维护性及符合项目要求。 在软件开发过程中，我们经常会遇到这样的情况：编写的…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Golang goroutine与channel调试技巧 用户投稿

    Golang goroutine与channel调试技巧

    使用go run -race检测数据竞争，结合runtime.NumGoroutine监控协程数量，通过pprof分析阻塞调用栈，利用select超时避免永久阻塞，有效排查goroutine泄漏、死锁和数据竞争问题。 Go语言的goroutine和channel是并发编程的核心，但它们也带来了调试上…

    程序猿的头像 程序猿
    2026年5月10日
    000

  • 《魔兽世界》将于6月11日开启国服回归技术测试

    《魔兽世界》将于6月11日开启国服回归技术测试《魔兽世界》将于6月11日开启国服回归技术测试《魔兽世界》将于6月11日开启国服回归技术测试《魔兽世界》将于6月11日开启国服回归技术测试

    《%ign%ignore_a_1%re_a_1%》官方宣布，将于6月11日开启国服回归技术测试，时间为7天，并称可以在6月内正式开服，玩家们可以访问官网下载战网客户端并预下载“巫妖王之怒”客户端，技术测试详情见下图。 WordAi WordAI是一个AI驱动的内容重写平台 53 查看详情 以上就是《…

    程序猿的头像 程序猿
    2026年5月10日 • 用户投稿
    200
  • 使用 Jupyter Notebook 进行探索性数据分析 用户投稿

    使用 Jupyter Notebook 进行探索性数据分析

    Jupyter Notebook通过单元格实现代码与Markdown结合，支持数据导入（pandas）、清洗（fillna）、探索（matplotlib/seaborn可视化）、统计分析（describe/corr）和特征工程，便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南 用户投稿

    如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南

    HTML表单通过标签构建，包含action和method属性定义数据提交目标与方式，常用input类型如text、password、email等适配不同输入需求，配合label、required、placeholder提升可用性，结合textarea、select、button等控件实现完整交互，是…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • 前端缓存策略与JavaScript存储管理 用户投稿

    前端缓存策略与JavaScript存储管理

    根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑，能显著提升前端性能；合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API，结合缓存策略与定期清理机制，可在保证用户体验的同时避免安全与性能隐患。 前端缓存和JavaScript存…

    程序猿的头像 程序猿
    2026年5月10日
    200
  • HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧 用户投稿

    HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧

    首先利用原生touch事件实现滑动判断，再通过preventDefault解决滚动冲突，接着引入Hammer.js处理复杂手势，最后通过优化点击区域、避免事件冲突和增加视觉反馈提升体验。 在移动端浏览器中，HTML5网页可以通过触摸事件实现手势操作，提升用户体验。虽然原生JavaScript提供了基…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 创建指定大小并填充特定数据的Golang文件教程 用户投稿

    创建指定大小并填充特定数据的Golang文件教程

    本文将介绍如何使用Golang创建一个指定大小的文件，并用特定数据填充它。我们将使用 `os` 包提供的函数来创建和截断文件，从而实现快速生成大文件的目的。示例代码展示了如何创建一个10MB的文件，并将其填充为全零数据。掌握这些方法，可以方便地在例如日志系统或磁盘队列等场景中，预先创建测试文件或初始…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Python命令怎样使用profile分析脚本性能 Python命令性能分析的基础教程 用户投稿

    Python命令怎样使用profile分析脚本性能 Python命令性能分析的基础教程

    使用Python的cProfile模块分析脚本性能最直接的方式是通过命令行执行python -m cProfile your_script.py，它会输出每个函数的调用次数、总耗时、累积耗时等关键指标，帮助定位性能瓶颈；为进一步分析，可将结果保存为文件python -m cProfile -o ou…

    程序猿的头像 程序猿
    2026年5月10日
    000

  • 如何插入查询结果数据_SQL插入Select查询结果方法

    如何插入查询结果数据_SQL插入Select查询结果方法如何插入查询结果数据_SQL插入Select查询结果方法如何插入查询结果数据_SQL插入Select查询结果方法如何插入查询结果数据_SQL插入Select查询结果方法

    使用INSERT INTO…SELECT语句可高效插入数据，通过NOT EXISTS、LEFT JOIN、MERGE语句或唯一约束避免重复；表结构不一致时可通过别名、类型转换、默认值或计算字段处理；结合存储过程可提升可维护性，支持参数化与动态SQL。 将查询结果数据插入到另一个表中，可以…

    程序猿的头像 程序猿
    2026年5月10日 • 用户投稿
    300
  • 使用 WebCodecs VideoDecoder 实现精确逐帧回退 用户投稿

    使用 WebCodecs VideoDecoder 实现精确逐帧回退

    本文档旨在解决在使用 WebCodecs VideoDecoder 进行视频解码时，实现精确逐帧回退的问题。通过比较帧的时间戳与目标帧的时间戳，可以避免渲染中间帧，从而提高用户体验。本文将提供详细的解决方案和示例代码，帮助开发者实现精确的视频帧控制。 在使用 WebCodecs VideoDecod…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Discord.py 交互按钮超时与持久化解决方案 用户投稿

    Discord.py 交互按钮超时与持久化解决方案

    本教程旨在解决Discord.py中交互按钮在一段时间后出现“This Interaction Failed”错误的问题。我们将深入探讨视图（View）的超时机制，并提供通过正确设置timeout参数以及利用bot.add_view()方法实现按钮持久化的具体方案，确保您的机器人交互功能稳定可靠，即…

    程序猿的头像 程序猿
    2026年5月10日
    000

发表回复

登录后才能评论
关注微信