Ant Design Mobile 使用指南：从零开始构建高效移动应用

随着移动互联网的蓬勃发展，移动应用已成为我们生活中不可或缺的一部分。为了满足日益增长的移动应用开发需求，涌现出许多优秀的UI组件库，而 Ant Design Mobile (简称 antd-mobile) 便是其中的佼佼者。Ant Design Mobile 是 Ant Design 的移动端版本，由阿里巴巴团队开发和维护，它提供了一套高质量的 React 组件，帮助开发者快速构建美观、高效、可维护的移动应用。

本文将详细介绍 Ant Design Mobile 的使用方法，从环境搭建到组件使用，再到项目实战，手把手教你从零开始构建一个高效的移动应用。

一、Ant Design Mobile 简介

Ant Design Mobile 是一套基于 React 的移动端组件库，它具有以下特点：

• 高质量组件：提供丰富多样的组件，涵盖表单、导航、数据展示、操作反馈等多个方面，满足各种常见的移动应用开发需求。
• 开箱即用：组件设计精良，样式美观，无需过多配置即可直接使用。
• 主题定制：支持灵活的主题定制，可以轻松调整组件的颜色、字体、间距等样式，以适应不同的品牌风格。
• TypeScript 支持：提供完整的 TypeScript 类型定义，方便开发者进行类型检查和代码提示。
• 按需加载：支持按需加载组件，减少打包体积，提高应用加载速度。
• 活跃的社区：拥有庞大且活跃的社区，遇到问题可以快速获得帮助。
• 完善的文档：提供详细的官方文档，包含组件 API、使用示例、常见问题解答等。

二、开发环境搭建

在开始使用 Ant Design Mobile 之前，我们需要先搭建好开发环境。

1. 安装 Node.js 和 npm

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，npm 是 Node.js 的包管理器。Ant Design Mobile 的构建和运行依赖于 Node.js 和 npm，因此我们需要先安装它们。

可以从 Node.js 官网下载对应平台的安装包进行安装。安装完成后，可以在命令行中输入以下命令来验证是否安装成功：

bash
node -v
npm -v

如果能正确显示版本号，则说明安装成功。

2. 安装脚手架工具

为了更方便地创建和管理项目，我们可以使用脚手架工具。推荐使用 create-react-app 或 umi。

(1) 使用 create-react-app

create-react-app 是 Facebook 官方推出的 React 项目脚手架工具，它可以帮助我们快速创建一个基于 React 的项目。

使用以下命令安装 create-react-app：

bash
npm install -g create-react-app

安装完成后，可以使用以下命令创建一个新的项目：

bash
create-react-app my-app
cd my-app

(2) 使用 UmiJS

UmiJS 是蚂蚁金服的可插拔企业级 React 应用框架。它内置了路由、构建、部署等功能，可以帮助我们更高效地开发 React 应用。

使用以下命令安装 UmiJS：

bash
npm install -g @umijs/cli

安装完成后，可以使用以下命令创建一个新的项目：
bash
mkdir myapp && cd myapp
npx @umijs/cli create

选择app 和 antd-mobile
然后运行：
bash
npm install

3. 安装 Ant Design Mobile

进入项目目录，使用 npm 或 yarn 安装 Ant Design Mobile：

“`bash

使用 npm

npm install antd-mobile –save

使用 yarn

yarn add antd-mobile
“`

4. 配置按需加载（可选）

为了减少打包体积，建议配置按需加载。

(1) 使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 Babel 插件。

首先，安装 babel-plugin-import：

bash
npm install babel-plugin-import --save-dev

然后，修改 .babelrc 或 babel.config.js 文件（如果使用 create-react-app，则需要先执行 npm run eject 或 yarn eject）：

javascript
// .babelrc 或 babel.config.js
{
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": "css" // 或者 'less'，如果使用 less
}
]
]
}
如果你是使用less，可以修改config-overrides.js文件（如果使用 create-react-app，则需要配合 react-app-rewired和customize-cra）
“`javascript
const { override, fixBabelImports, addLessLoader } = require(‘customize-cra’);

module.exports = override(
fixBabelImports(‘import’, {
libraryName: ‘antd-mobile’,
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
// modifyVars: { ‘@primary-color’: ‘#1DA57A’ }, //自定义主题
},
}),
);
“`

(2) 使用 UmiJS

如果你是使用UmiJS, 那么就不需要手动配置按需加载了，因为umi已经内置了。

三、组件使用

Ant Design Mobile 提供了丰富的组件，可以满足各种常见的移动应用开发需求。下面介绍一些常用组件的使用方法。

1. Button (按钮)

Button 组件用于触发操作。

“`jsx
import { Button } from ‘antd-mobile’;

function MyButton() {
return (

);
}
``
属性说明：
-type：按钮类型，可选值为primary、default、warning等。
-disabled`: 是否禁用。

2. Input (输入框)

Input 组件用于获取用户输入。

“`jsx
import { Input } from ‘antd-mobile’;
import { useState } from ‘react’;

function MyInput() {
const [value, setValue] = useState(”);

const handleInputChange = (val) => {
setValue(val);
};
return (

);
}
``
属性说明：
-placeholder: 占位符。
-value: 输入框的值。
-onChange`: 值改变时的回调函数。

3. List (列表)

List 组件用于展示列表数据。

“`jsx
import { List } from ‘antd-mobile’;

const data = [
{ title: ‘Item 1’, description: ‘Description 1’ },
{ title: ‘Item 2’, description: ‘Description 2’ },
{ title: ‘Item 3’, description: ‘Description 3’ },
];

function MyList() {
return (

{data.map((item, index) => (

{item.title}

))}

);
}
“`

4. NavBar (导航栏)

NavBar 组件用于页面顶部导航。

“`jsx
import { NavBar } from ‘antd-mobile’;
import { useNavigate } from ‘react-router-dom’; // 如果使用 react-router

function MyNavBar() {
const navigate = useNavigate();
const onLeftClick = () => {
navigate(-1); // 返回上一页
};
return (

My App

);
}
``
属性说明：
-onBack: 点击返回按钮的回调
-backArrow`: 是否显示返回箭头

5. Tabs (标签页)

Tabs 组件用于在多个视图之间切换。

“`jsx
import { Tabs } from ‘antd-mobile’;

function MyTabs() {
return (


Content of Tab 1


Content of Tab 2


Content of Tab 3


);
}
“`

6. Toast (轻提示)

Toast 组件用于显示短暂的提示信息。

“`jsx
import { Toast } from ‘antd-mobile’;

function showToast() {
Toast.show({
icon: ‘success’,
content: ‘操作成功’,
});
}
``
-icon: 图标类型，可以是success,fail,loading等。
-content`: 提示内容。

7. Image (图片)

“`jsx
import { Image } from ‘antd-mobile’

function showImage() {
return(

)
}
``
-src: 图片链接
-alt: 图片加载失败时的替代文本
-width: 图片宽度
-height`: 图片高度

8. Modal(对话框)

“`jsx
import React, { useState } from ‘react’;
import { Button, Modal } from ‘antd-mobile’;

function App() {
const [visible, setVisible] = useState(false);

const showModal = () => {
setVisible(true);
};

const handleOk = () => {
setVisible(false);
};

const handleCancel = () => {
setVisible(false);
};

return (
<>

Open Modal

Some contents…

Some contents…

);
}

``
-visible：控制对话框是否可见。
-title：对话框标题。
-onClose: 对话框关闭回调
-footer`: 底部按钮

这只是 Ant Design Mobile 提供的部分组件，更多组件和详细用法可以参考官方文档：https://mobile.ant.design/zh/components

四、项目实战：构建一个简单的待办事项应用

为了更好地理解 Ant Design Mobile 的实际应用，我们将构建一个简单的待办事项应用。

1. 创建项目

使用 create-react-app 或 umi 创建一个新项目。

2. 安装依赖

安装 antd-mobile 和其他可能需要的依赖（如 react-router-dom）。

3. 编写代码

(1) App.js

“`jsx
import React, { useState } from ‘react’;
import { NavBar, List, Input, Button, Space, Toast } from ‘antd-mobile’;

function App() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState(”);

const addTodo = () => {
if (inputValue.trim() === ”) {
Toast.show({content: ‘请输入待办事项’, icon:’fail’});
return;
}
setTodos([…todos, { text: inputValue, completed: false }]);
setInputValue(”);
};

const toggleTodo = (index) => {
const newTodos = […todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
};

const deleteTodo = (index) => {
const newTodos = […todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};

return (

        }
        style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
      >
        {todo.text}
      </List.Item>
    ))}
  </List>
  <div style={{ padding: 16 }}>
    <Space wrap>
        <Input
          placeholder="请输入待办事项"
          value={inputValue}
          onChange={setInputValue}
          style={{'--prefix-width':'0em'}}
        />
        <Button type="primary" onClick={addTodo}>
            添加
        </Button>
    </Space>
  </div>
</div>