# @bitjson/qr-code 中文文档

规范地址：https://npmcn.com/package/%40bitjson/qr-code/

版本：1\.0\.2
npm 元数据更新时间：2023-02-28T01:09:31.755Z
中文译文更新时间：2026-11-08T04:29:36.195Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bitjson/qr-code
原文对照：https://npmcn.com/package/%40bitjson/qr-code/?lang=original
项目主页：https://qr.bitjson.com/
源码仓库：https://github.com/bitjson/qr-code

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：456 kB，39 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2023-02-27T10:21:04.234Z
- 最新版本发布：2023-02-28T01:09:31.644Z
- 近 30 天下载量：8204（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

QR 代码网络组件

## 安装

```sh
npm install @bitjson/qr-code
```

也可以使用：`pnpm add @bitjson/qr-code`、`yarn add @bitjson/qr-code`、`bun add @bitjson/qr-code`

## README

[![npm](https://img.shields.io/npm/v/@bitjson/qr-code)](https://www.npmjs.com/package/@bitjson/qr-code) [![npm downloads](https://img.shields.io/npm/dm/@bitjson/qr-code)](https://www.npmjs.com/package/@bitjson/qr-code) [![Follow Bitjson on Twitter](https://img.shields.io/badge/follow-bitjson-1DA1F2?logo=twitter)](https://twitter.com/bitjson) [![GitHub stars](https://img.shields.io/github/stars/bitjson/qr-code.svg?style=social&logo=github&label=Stars)](https://github.com/bitjson/qr-code)

# [`@bitjson/qr-code`](https://qr.bitjson.com/)

一个没有框架的,可定制的,可动的, `<qr-code>` HTML 元素。 只是一个自成一体 [网络组件](https://developer.mozilla.org/en-US/docs/Web/Web_Components)。 。 。 .

[https://user-images.githubusercontent.com/904007/221692053-1f4ab516-0f63-40e4-b1da-1922ba906963.mp4 (中文(简体) )](https://user-images.githubusercontent.com/904007/221692053-1f4ab516-0f63-40e4-b1da-1922ba906963.mp4)

尝试此交互式演示 : [qr.bitjson.com (中文(简体) )](https://qr.bitjson.com/)

# 使用量

导入 `@bitjson/qr-code` 使用您的构建系统或框架(例如). `npm install @bitjson/qr-code`),或者在 HTML 中使用独立的脚本 `<head>` 元素 :

```html
<script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script>
```

然后在 HTML 中任意使用组件 `<body>` 元素 :

```html
<qr-code contents="https://bitjson.com"></qr-code>
```

## 完整示例

以下是使用大多数特性的纯 HTML 示例 :

```html
<qr-code
  id="qr1"
  contents="https://bitjson.com/"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70c559"
  mask-x-to-y-ratio="1.2"
  style="
    width: 200px;
    height: 200px;
    margin: 2em auto;
    background-color: #fff;
  "
>
  <img src="assets/1.2-x-to-y-ratio-icon.svg" slot="icon" />
</qr-code>

<script>
  document.getElementById('qr1').addEventListener('codeRendered', () => {
    document.getElementById('qr1').animateQRCode('MaterializeIn');
  });
</script>
```

## 动画

激活 激活用户交互, 如 URL 点击或检测到支付, 或当 QR 代码交互完成时激活 .

有几个预设动画可供使用, 只需用元素的运行即可 `animateQRCode` 方法 :

```js
document.getElementById('qr1').animateQRCode('RadialRipple');
```

可用的内置预设 :

-   `FadeInTopDown`
-   `FadeInCenterOut`
-   `MaterializeIn`
-   `RadialRipple`
-   `RadialRippleIn`

你也可以设计自己的自定义动画! 只要传递一个函数给 `qr-code`是因为 `animateQRCode` 方法,例如:

```js
document
  .getElementById('qr1')
  .animateQRCode((targets, _x, _y, _count, entity) => ({
    targets,
    from: entity === 'module' ? Math.random() * 200 : 200,
    duration: 500,
    easing: 'cubic-bezier(.5,0,1,1)',
    web: { opacity: [1, 0], scale: [1, 1.1, 0.5] },
  }));
```

这个 [内建预设在内部使用此 API](https://npmcn.com/package/%40bitjson/qr-code/src/components/qr-code/animations.ts)以便你们观察那些教诲和启示。 欢迎拉出新的预设!

## 动画预览器

这个 **动画预览器使动画的微调容易得多**:通过克隆此重播并运行活装包脚本来尝试:

```
git clone https://github.com/bitjson/qr-code.git
cd qr-code
npm ci
npm start
```

然后在动画中工作 `src/index.html` 使用动画预览器(位于窗口右下方)以各种速度测试上次运行的动画,手动刷取,或倒置播放.

## 生产建设

禁用 `just-animate` 播放器在 [`src/components/qr-code/qr-code.tsx`](https://npmcn.com/package/%40bitjson/qr-code/src/components/qr-code/qr-code.tsx),然后构建:

```bash
npm run build
```

您可以将脚本指向 [`index.html`](https://npmcn.com/package/%40bitjson/qr-code/index.html) 改为 `dist/qr-code.js` 然后通过本地文件系统打开页面.

## 常见问题

### @bitjson/qr-code 是什么？

QR 代码网络组件

### 如何安装 @bitjson/qr-code？

在项目目录运行 npm install @bitjson/qr-code，或使用 pnpm add / yarn add / bun add。

### @bitjson/qr-code 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bitjson/qr-code 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bitjson/qr-code 可以商用吗？

@bitjson/qr-code 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bitjson/qr-code 的下载量有多少？

根据 npm 官方下载统计，@bitjson/qr-code 在 2026/10/08 – 2026/11/06 这 30 天内被下载 8,204 次，日均约 273 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bitjson/qr-code 还在维护吗？

最新版本 1\.0\.2 发布于 2023/02/28（3 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/02/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。