跳到主要内容
前端术语库

UI 组件 · 图片

二维码

QR Code

也叫：二维码图片、扫码、QR 码、QRCode、Scan Code、Scannable Code

一个黑白方格图案，手机扫一下就能打开链接、登录、付款或加好友；旁边要配一句说明，告诉用户用什么扫、扫了能干什么。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在电脑端登录页右侧加扫码登录：一个 180×180px 的二维码，白底、四周 12px 留白，中间放 32px 的品牌 Logo；上方标题「扫码登录」，下方一行 13px 灰字「打开 青禾 App，扫一扫登录」。二维码 2 分钟过期，过期后图案变成 40% 透明，盖上一个白色圆形「↻」按钮和文字「二维码已失效，点击刷新」。手机扫码后，二维码区域换成对勾和「已扫码，请在手机上确认」，确认后自动跳转。旁边给一个「密码登录」的切换入口。在手机浏览器里打开这个页面时不显示二维码，直接显示「在 App 中打开」按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认二维码是不是你要找的。

符合这些情况，用二维码

  • 电脑端的扫码登录、扫码支付，把验证交给手机完成
  • 官网、海报上引导用户下载 App、关注公众号、添加客服微信
  • 把当前页面、活动链接发到手机上打开

是这些情况，换成别的

  • 用户本来就在手机上浏览，给一个「在 App 中打开」按钮或直接跳转，不要让他扫自己的屏幕

  • 需要用户读出或输入的内容（兑换码、订单号），直接显示文字，方便复制

  • 页面上已经有明显的链接或按钮能完成同样的事，没必要再放一个二维码

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    手机网页上也只给一个二维码，让用户「扫码继续」，自己的屏幕根本扫不了

  2. 02

    二维码只有一张图，没有任何说明，用户不知道用哪个 App 扫、扫了会发生什么

  3. 03

    登录二维码过期了图案还照样显示，扫了才报错，也没有刷新按钮

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由方形二维码图案（四周留白，中间可以有 Logo）、上方标题或下方说明文字组成，登录、支付类还带过期遮罩和刷新按钮，以及扫码后的状态提示。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个由黑白小方格组成的正方形图案，三个角上各有一个大方框
  2. 2图案四周有白色留白，中间有时是一个小 Logo
  3. 3下面或旁边一行「扫一扫」「扫码登录」之类的说明文字

04解释

详细解释

二维码把一段网址或文字编码成方格图案，用来把电脑上的事情交给手机：扫码登录、扫码支付、扫码下载 App、扫码关注公众号或加客服微信、把当前页面发到手机上打开。常见样子是一个 120~200px 的正方形图案，四周留白，中间可以放一个小 Logo，下面一行说明「打开微信扫一扫，关注公众号」。登录、支付用的二维码有时效，过期后图案变淡，盖上「二维码已失效，点击刷新」。

它通常就是一张 图片，但比普通图片多几件事要考虑：够不够大、对比度够不够（深色码在浅色底上，四周留白）、过期了怎么办、扫完之后电脑上要不要跟着变化（扫码登录时显示「已扫码，请在手机上确认」）。它常放在 气泡卡片 里（鼠标移到「手机版」上弹出二维码），或者 对话框 里（点「分享」后弹出）。

二维码是给另一台设备扫的：用户如果已经在手机上浏览，让他扫自己屏幕上的码是做不到的，手机端要换成直接跳转的按钮或「保存图片」。尺寸不要小于 100px，不要被裁切、拉伸或压在花哨的背景上。登录码、支付码要有过期和刷新，并写明用哪个 App 扫。可以在图案下方附上链接文字，方便扫不了码的人。

开发者信息
术语 ID
component-qrcode
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-qrcode
  • .t-qrcode
  • .n-qr-code
  • img[alt*="二维码"]
  • img[alt*="qr" i]
  • img[class*="qr" i]
  • img[src*="qrcode" i]
  • img[src*="qr-code" i]
  • canvas[class*="qr" i]
  • :is([class*="qrcode" i], [class*="qr-code" i], [class*="qr_code" i]) > :is(img, canvas, svg)
  • [aria-label*="二维码"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • qrcode
  • qr-code
  • qr
  • qr-img
  • qr-image
  • qrcode-img
  • qrcode-image
  • wechat-qrcode
  • scan-qr
  • scan-code
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • QRCode
  • QRCodeSVG
  • QRCodeCanvas
  • Qrcode
  • VueQrcode
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 图片开头
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30