ant-design-mini

适用场景

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

• 使用 Ant Design Mini 组件构建支付宝或微信小程序 UI
• 在小程序中使用表单、数据展示、反馈或导航组件
• 通过 CSS 变量自定义 Ant Design Mini 主题
• 在小程序环境中处理组件事件和生命周期

使用方法

快速入门示例：小程序中的按钮和表单

<ant-button type="primary" onTap="handleClick">Submit</ant-button>

<ant-form onFinish="onFormFinish">
  <ant-form-item label="Name" name="name" required="{{true}}">
    <ant-input placeholder="Enter your name" />
  </ant-form-item>
  <ant-form-item label="Phone" name="phone">
    <ant-input type="number" placeholder="Enter phone" />
  </ant-form-item>
  <ant-button type="primary" form-type="submit">Submit</ant-button>
</ant-form>

// pages/index/index.js
Page({
  handleClick() { my.showToast({ content: 'Clicked!' }); },
  onFormFinish(values) { console.log('Form values:', values); }
});

此技能的组织结构与 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, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏