ant-design-mini

适用场景

在用户希望执行以下操作时使用此技能：

• 在小程序项目中安装并设置 Ant Design Mini
• 在支付宝小程序中使用 Ant Design Mini 组件
• 在微信小程序中使用 Ant Design Mini 组件
• 配置 Ant Design Mini（主题、i18n 等）
• 使用表单组件（Button、Input、Form 等）
• 使用数据展示组件（List、Card 等）
• 使用反馈组件（Toast、Modal 等）
• 使用导航组件（Tabs、NavBar 等）
• 自定义组件样式
• 处理组件事件
• 了解 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 文档 → api/

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

   入门（快速开始）：

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

   组件：

   • examples/components/overview.md - 组件概览
   • examples/components/button.md - Button 组件
   • examples/components/input.md - Input 组件
   • examples/components/form.md - Form 组件
   • examples/components/list.md - List 组件
   • examples/components/card.md - Card 组件
   • examples/components/toast.md - Toast 组件
   • examples/components/modal.md - Modal 组件
   • examples/components/tabs.md - Tabs 组件
   • examples/components/nav-bar.md - NavBar 组件
   • examples/components/picker.md - Picker 组件
   • examples/components/date-picker.md - DatePicker 组件
   • examples/components/switch.md - Switch 组件
   • examples/components/checkbox.md - Checkbox 组件
   • examples/components/radio.md - Radio 组件
   • examples/components/stepper.md - Stepper 组件
   • examples/components/avatar.md - Avatar 组件
   • examples/components/badge.md - Badge 组件
   • examples/components/tag.md - Tag 组件
   • examples/components/empty.md - Empty 组件
   • examples/components/loading.md - Loading 组件
   • examples/components/popup.md - Popup 组件
   • 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 - Props 和事件参考

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

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

1. 了解 Ant Design Mini

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

核心概念：

• 小程序支持：支付宝和微信小程序
• 设计系统：遵循 Ant Design 设计语言
• 丰富的组件：Button、Form、List、Modal 等
• 主题自定义：支持自定义主题
• i18n：支持国际化

2. 安装

使用 npm：

npm install antd-mini

使用 yarn：

yarn add antd-mini

使用 pnpm：

pnpm add antd-mini

3. 基本设置

// app.json (Alipay Mini Program)
{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

<ant-button type="primary" onTap="handleTap">Button</ant-button>

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

指南：

• 查看 examples/guide/ 或 examples/getting-started/ 中的指南文件 → https://ant-design-mini.antgroup.com/guide/quick-start

组件：

• 查看 examples/components/ 中的组件文件 → https://ant-design-mini.antgroup.com/components/overview

示例和模板

此技能包含详细示例，按照官方文档结构组织。所有示例都位于 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 设计规范

资源

• 官方文档：https://ant-design-mini.antgroup.com/
• 快速开始：https://ant-design-mini.antgroup.com/guide/quick-start
• 组件：https://ant-design-mini.antgroup.com/components/overview
• GitHub 仓库：https://github.com/ant-design/ant-design-mini

关键词

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