# @badge-sdk/web 中文文档

规范地址：https://npmcn.com/package/%40badge-sdk/web/

版本：0\.4\.1
npm 元数据更新时间：2026-08-25T19:42:15.158Z
中文译文更新时间：2026-11-07T14:41:25.914Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：53.8 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2025-01-18T00:28:48.844Z
- 最新版本发布：2026-08-25T19:42:14.976Z
- 近 30 天下载量：21637（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 3 个）

## 中文简介

在您现有的应用程序中嵌入徽章的移动钱包管理功能 .

## 安装

```sh
npm install @badge-sdk/web
```

也可以使用：`pnpm add @badge-sdk/web`、`yarn add @badge-sdk/web`、`bun add @badge-sdk/web`

## README

![](https://npmcn.com/package/%40badge-sdk/web/logo.png)

# @ badge-sdk/ web (英语)

`@badge-sdk/web` 允许您嵌入徽章 [移动钱包管理功能](https://www.trybadge.com/saas-platform) 在您的网络应用程序中。 完整的SDK文件访问: [https://docs.trybadge.com/docs/sdk (中文(简体) )](https://docs.trybadge.com/docs/sdk)

关于徽章平台的信息,请检查我们的 [网站](https://www.trybadge.com/) 财务报告和审定财务报表 [文档](https://docs.trybadge.com/)。 。 。 .

## 什么是徽章吗?

徽章, 允许平台将徽章的无码 UI 版本嵌入您的网页 应用程序或 SaaS 平台为您的客户提供移动钱包.

有了徽章,您可以提供客户 通过编辑,管理, 和运动不离开你的产品.

## 谁用徽章?

徽章是为各种规模的企业建造的,这些企业想利用 移动钱包.

无论你是一个小生意 寻求增强客户经验还是 大企业试图推动新的收入来源,徽章提供了工具 以及实现你目标的灵活性.

我们提供定制选项和支持,以创建定制钱包 与你的品牌、行业和具体 营销目标.

## 使用量

为了使用SDK,你需要一个 [标签工作空间](https://app.trybadge.com/_/create-account) 还有一个 [SDK 键](https://docs.trybadge.com/docs/sdk-getting-started#create-an-sdk-token)。 。 。 .

有了SDK Token,徽章SDK就可以被初始化:

```ts
import * as badge from "@badge-sdk/web";

const badgeSdk = badge.makeSdk({token: badgeToken});
```

SDK现在可以用来嵌入一个通关模板:

```html
<div id="badge-template" style="height:100%">Loading...</div>
```

```ts
badge.embedTemplatePage(
  badgeSdk,
  window.document.getElementById("badge-template"),
  {
    templateId: templateId,
    features: {
      passList: true,
      templateEditor: true,
    },
  },
);
```

通过设置属性,可以启用多种特性 `features`。更多详情可在 [SDK 配置文件](https://docs.trybadge.com/docs/embed-template-editor-page#features)。 。 。 .

嵌入层外观也可以被定制. 其他细节可以是: 发现于 [SDK 配置文件](https://docs.trybadge.com/docs/styling-the-embed)。 。 。 .

### Bundler 支持系统

货包同时装有ES模块(`dist/index.js`)和一个UMD建筑 (单位:千美元)`dist/index.umd.cjs`),所有依赖关系被捆绑. 捆绑的类型脚本 包括了声明,因此没有单独的 `@types` 需要软件包.

不需要捆绑。 UMD 构建可直接从脚本中加载 通过任何 npm CDN 标记,将 SDK 暴露为全局 `badge`数字 :

```html
<script src="https://unpkg.com/@badge-sdk/web"></script>
<script>
  const badgeSdk = badge.makeSdk({token: badgeToken});
</script>
```

### 浏览器支持

SDK作为ES2020发布,并支持以下最小浏览器 版本 :

-   87+克罗梅
-   边缘88+
-   Firefox 78+ (英语)
-   Safari 14+(包括iOS 14+上的Safari)

基于铬的浏览器如歌剧,勇者,和三星互联网都得到了支持 从对应于Chrome 87. 的释放。 旧浏览器需要您自己的 转接和多填充.

## 许可证

这个寄存器是麻省理工学院许可的.

## 常见问题

### @badge-sdk/web 是什么？

在您现有的应用程序中嵌入徽章的移动钱包管理功能 \.

### 如何安装 @badge-sdk/web？

在项目目录运行 npm install @badge-sdk/web，或使用 pnpm add / yarn add / bun add。

### @badge-sdk/web 支持 TypeScript 吗？

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

### @badge-sdk/web 支持 ESM 还是 CommonJS？

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

### @badge-sdk/web 可以商用吗？

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

### @badge-sdk/web 的下载量有多少？

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

### @badge-sdk/web 还在维护吗？

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