⚡

AntDesignMini技能Skill ant-design-mini

此技能提供Ant Design Mini组件库在小程序开发中的全面指南，涵盖安装、组件使用、主题配置、API参考等内容，适用于支付宝和微信小程序。关键词：Ant Design Mini, 小程序, 支付宝小程序, 微信小程序, UI组件, 前端开发, 组件库。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

name: ant-design-mini description: 提供Ant Design Mini组件库在小程序中的全面指导，包括组件、主题和平台支持。当用户询问Ant Design Mini、需要构建小程序应用程序或使用小程序组件时使用。 license: 完整条款在LICENSE.txt中

何时使用此技能

每当用户想要：

  • 在迷你程序项目中安装和设置Ant Design Mini
  • 在支付宝小程序中使用Ant Design Mini组件
  • 在微信小程序中使用Ant Design Mini组件
  • 配置Ant Design Mini（主题、i18n等）
  • 使用表单组件（按钮、输入框、表单等）
  • 使用数据展示组件（列表、卡片等）
  • 使用反馈组件（Toast、Modal等）
  • 使用导航组件（标签页、导航栏等）
  • 自定义组件样式
  • 处理组件事件
  • 理解Ant Design Mini API和方法
  • 解决Ant Design Mini问题

如何使用此技能

此技能按Ant Design Mini官方文档结构组织（https://ant-design-mini.antgroup.com/guide/quick-start, https://ant-design-mini.antgroup.com/components/overview）。在使用Ant Design Mini时：

  1. 从用户请求中识别主题：

    • 快速开始 → examples/getting-started.md
    • 组件 → examples/components/
    • API文档 → api/

  2. 从examples/目录加载相应的示例文件：

    快速开始：

    • examples/getting-started.md - 安装和设置
    • examples/quick-start.md - 快速入门指南

    组件：

    • examples/components/overview.md - 组件概览
    • examples/components/button.md - 按钮组件
    • examples/components/input.md - 输入框组件
    • examples/components/form.md - 表单组件
    • examples/components/list.md - 列表组件
    • examples/components/card.md - 卡片组件
    • examples/components/toast.md - Toast组件
    • examples/components/modal.md - Modal组件
    • examples/components/tabs.md - 标签页组件
    • examples/components/nav-bar.md - 导航栏组件
    • examples/components/picker.md - 选择器组件
    • examples/components/date-picker.md - 日期选择器组件
    • examples/components/switch.md - 开关组件
    • examples/components/checkbox.md - 复选框组件
    • examples/components/radio.md - 单选按钮组件
    • examples/components/stepper.md - 步进器组件
    • examples/components/avatar.md - 头像组件
    • examples/components/badge.md - 徽章组件
    • examples/components/tag.md - 标签组件
    • examples/components/empty.md - 空状态组件
    • examples/components/loading.md - 加载组件
    • examples/components/popup.md - 弹窗组件
    • examples/components/action-sheet.md - ActionSheet组件

  3. 按照该示例文件中的具体指令操作，包括语法、结构和最佳实践

    重要注意事项：

    • Ant Design Mini适用于支付宝小程序和微信小程序
    • 组件使用小程序语法（axml/json）
    • 示例包括支付宝和微信语法
    • 每个示例文件包含关键概念、代码示例和要点

  4. 需要时参考api/目录中的API文档：

    • api/component-api.md - 组件API参考
    • api/props-and-events.md - 属性和事件参考

  5. 使用templates/目录中的模板：

    • templates/installation.md - 安装模板
    • templates/component-usage.md - 组件使用模板

1. 理解Ant Design Mini

Ant Design Mini是支付宝小程序和微信小程序的UI组件库，遵循Ant Design设计规范。

关键概念：

  • 小程序支持：支付宝和微信小程序
  • 设计系统：遵循Ant Design设计语言
  • 丰富组件：按钮、表单、列表、Modal等
  • 主题定制：支持主题定制
  • i18n：国际化支持

2. 安装

使用npm：

npm install antd-mini

使用yarn：

yarn add antd-mini

使用pnpm：

pnpm add antd-mini

3. 基本设置

// app.json（支付宝小程序）
{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

<!-- page.axml -->
<ant-button type="primary" onTap="handleTap">按钮</ant-button>

文档映射（与官方文档一一对应）

指南：

组件：

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都在examples/目录中（参见以上映射）。

使用示例：

  • 从用户请求中识别主题
  • 根据以上映射加载相应的示例文件
  • 按照该文件中的指令、语法和最佳实践操作
  • 将代码示例调整到您的具体用例

使用模板：

  • 参考templates/目录中的模板进行常见脚手架搭建
  • 将模板调整到您的具体需求和编码风格

API参考

详细的API文档在api/目录中，按官方Ant Design Mini API文档结构组织：

组件API（api/component-api.md）

  • 组件属性和事件
  • 组件方法
  • 组件插槽

属性和事件（api/props-and-events.md）

  • 常用属性
  • 常用事件
  • 事件处理

使用API参考：

  1. 识别您需要的API
  2. 从api/目录加载相应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考链接的示例文件以获取详细使用模式
  5. 所有API文件都包含到examples/目录中相关示例文件的链接

最佳实践

  1. 注册组件：在app.json或page.json中注册组件
  2. 使用正确语法：使用axml用于支付宝，wxml用于微信
  3. 处理事件：使用onTap用于支付宝，bindtap用于微信
  4. 定制主题：使用主题变量进行定制
  5. 遵循设计规范：遵循Ant Design设计规范

资源

关键词

Ant Design Mini, ant-design-mini, antd-mini, 小程序, 支付宝小程序, 微信小程序, 组件库, UI组件, Button, Form, List, Modal, Toast, Tabs, NavBar, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏