Ant Design Mobile of React移动应用开发：基础页面制作介绍和示例代码-灵析社区

一、前言

使用Ant Design Mobile of React（AMR）开发移动应用页面，基础页面主要有九种页面。它们是：登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页。这些页面都属于通用页面和构成移动应用的基本页面。这些页面有机整合在一起构成一个手机app应用的基本框架，具有基础作用。

二、移动应用基础页面介绍和使用方式说明

登录页：

登录表单：使用AMR的Form和Input组件来创建登录表单，包括用户名、密码输入框和登录按钮。

表单验证：AMR提供了表单验证规则，可以用于验证用户输入的用户名和密码。

错误提示：通过Toast或Message组件可以显示登录失败的错误信息。

2. 注册页：

注册表单：使用AMR的Form和Input组件来创建注册表单，包括用户名、密码、确认密码和注册按钮。

密码强度校验：AMR提供了密码强度校验的规则，可以用于提示用户设置更安全的密码。

注册成功提示：通过Toast或Message组件可以显示注册成功的提示信息。

3. 主页：

导航菜单：使用AMR的TabBar和TabBarItem组件来创建主页的导航菜单，可以切换不同的页面。

页面内容：根据需要，使用AMR的各种组件来创建主页的内容，如轮播图、卡片列表、新闻列表等。

4. 个人中心：

用户信息展示：使用AMR的List和ListItem组件来展示用户的头像、昵称、个人资料等信息。

功能列表：使用AMR的List和ListItem组件来展示个人中心的功能列表，如修改密码、退出登录等。

5. 列表页：

列表展示：使用AMR的List和ListItem组件来展示列表页的数据列表，可以包含标题、描述、图标等。

分页功能：通过AMR的Pagination组件实现列表页的分页功能，方便用户浏览更多内容。

6. 详情页：

详情展示：使用AMR的Card和List组件来展示详情页的内容，可以包含标题、描述、图片等。

折叠展开：通过AMR的Accordion组件实现详情页内容的折叠展开效果，提供更多详细信息。

7. 设置页：

表单设置：使用AMR的Form和Input组件来创建设置页的表单，包括个人信息、偏好设置等。

多选项：通过AMR的Checkbox组件实现设置页的多选项，用户可以选择或取消多个选项。

8. 搜索页：

搜索输入框：使用AMR的SearchBar组件来创建搜索页的搜索输入框，方便用户输入搜索关键词。

搜索结果展示：通过AMR的List和ListItem组件展示搜索页的搜索结果列表，提供相关信息和操作。

9. 升级页：

版本信息：使用AMR的List和ListItem组件展示当前应用的版本信息。

升级按钮：通过AMR的Button组件创建升级按钮，提供应用升级的操作。

以上是对于登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页在AMR中的一些使用方式介绍。你可以根据具体需求使用相应的组件和样式来构建各个页面。请确保参考AMR的官方文档，了解每个组件的详细使用方法和样式效果。

三、移动应用基础页面开发示例代码

以下是Ant Design Mobile of React（AMR）基础页面登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页的分别示例代码：

登录页示例代码：

import { Form, Input, Button, Toast } from 'antd-mobile';

const LoginForm = () => {
  const handleSubmit = (values) => {
    // 处理登录逻辑
    if (values.username === 'admin' && values.password === '123456') {
      Toast.success('登录成功');
    } else {
      Toast.fail('用户名或密码错误');
    }
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input type="password" placeholder="密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">登录</Button>
    </Form>
  );
};

2. 注册页示例代码：

import { Form, Input, Button, Toast } from 'antd-mobile';

const RegisterForm = () => {
  const handleSubmit = (values) => {
    // 处理注册逻辑
    if (values.password === values.confirmPassword) {
      Toast.success('注册成功');
    } else {
      Toast.fail('两次输入的密码不一致');
    }
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input type="password" placeholder="密码" />
      </Form.Item>
      <Form.Item name="confirmPassword" rules={[{ required: true, message: '请确认密码' }]}>
        <Input type="password" placeholder="确认密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">注册</Button>
    </Form>
  );
};

3. 主页示例代码：

import { TabBar } from 'antd-mobile';

const HomePage = () => {
  const [selectedTab, setSelectedTab] = useState('home');

  return (
    <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
      <TabBar tabBarPosition="bottom">
        <TabBar.Item
          title="首页"
          key="home"
          selected={selectedTab === 'home'}
          onPress={() => setSelectedTab('home')}
        >
          {/* 主页内容 */}
        </TabBar.Item>
        {/* 其他TabBar.Item */}
      </TabBar>
    </div>
  );
};

4. 个人中心示例代码：

import { List } from 'antd-mobile';

const ProfilePage = () => {
  return (
    <List>
      <List.Item thumb="avatar.png">用户名</List.Item>
      {/* 其他个人信息项 */}
      <List.Item arrow="horizontal">修改密码</List.Item>
      <List.Item arrow="horizontal">退出登录</List.Item>
    </List>
  );
};

5. 列表页示例代码：

import { List } from 'antd-mobile';

const ListPage = () => {
  return (
    <List>
      <List.Item>列表项1</List.Item>
      <List.Item>列表项2</List.Item>
      <List.Item>列表项3</List.Item>
      {/* 更多列表项 */}
    </List>
  );
};

6. 详情页示例代码：

import { Card, List, Accordion } from 'antd-mobile';

const DetailPage = () => {
  return (
    <Card full>
      <Card.Header title="详情页标题" />
      <Card.Body>
        <List renderHeader={() => '基本信息'}>
          <List.Item>详情项1</List.Item>
          <List.Item>详情项2</List.Item>
          <List.Item>详情项3</List.Item>
          {/* 其他详情项 */}
        </List>
        <Accordion>
          <Accordion.Panel header="更多信息">
            {/* 更多详细内容 */}
          </Accordion.Panel>
        </Accordion>
      </Card.Body>
    </Card>
  );
};

7. 设置页示例代码：

import { Form, Input, Checkbox } from 'antd-mobile';

const SettingsPage = () => {
  return (
    <Form>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="email" rules={[{ required: true, message: '请输入邮箱' }]}>
        <Input type="email" placeholder="邮箱" />
      </Form.Item>
      <Form.Item name="notifications">
        <Checkbox>接收通知</Checkbox>
      </Form.Item>
      {/* 其他设置项 */}
    </Form>
  );
};

8. 搜索页示例代码：

import { SearchBar, List } from 'antd-mobile';

const SearchPage = () => {
  return (
    <div>
      <SearchBar placeholder="搜索" />
      <List>
        <List.Item>搜索结果1</List.Item>
        <List.Item>搜索结果2</List.Item>
        <List.Item>搜索结果3</List.Item>
        {/* 更多搜索结果 */}
      </List>
    </div>
  );
};

9. 升级页示例代码：

import { List, Button } from 'antd-mobile';

const UpgradePage = () => {
  return (
    <List>
      <List.Item extra="v1.0.0">当前版本</List.Item>
      <List.Item>
        <Button type="primary">检查更新</Button>
      </List.Item>
    </List>
  );
};

以上是对于登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页的示例代码。你可以根据具体需求进行修改和定制，以满足你的应用界面的需求。请确保在使用AMR组件时参考官方文档，了解每个组件的详细使用方法和属性。如果有任何问题，请随时提问。

四、页面跳转切换路由综合示例

当涉及到多个页面之间的切换或导航时，可以使用React Router库来实现路由管理。以下是一个综合示例，展示如何在Ant Design Mobile of React（AMR）中使用React Router实现这九个基础页面的切换和导航：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { TabBar } from 'antd-mobile';

const HomePage = () => {
  return <h1>主页内容</h1>;
};

const LoginPage = () => {
  return <h1>登录页内容</h1>;
};

const RegisterPage = () => {
  return <h1>注册页内容</h1>;
};

const ProfilePage = () => {
  return <h1>个人中心内容</h1>;
};

const ListPage = () => {
  return <h1>列表页内容</h1>;
};

const DetailPage = () => {
  return <h1>详情页内容</h1>;
};

const SettingsPage = () => {
  return <h1>设置页内容</h1>;
};

const SearchPage = () => {
  return <h1>搜索页内容</h1>;
};

const UpgradePage = () => {
  return <h1>升级页内容</h1>;
};

const App = () => {
  const [selectedTab, setSelectedTab] = useState('home');

  return (
    <Router>
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar tabBarPosition="bottom">
          <TabBar.Item
            title="首页"
            key="home"
            selected={selectedTab === 'home'}
            onPress={() => setSelectedTab('home')}
          >
            <Link to="/">主页</Link>
          </TabBar.Item>
          <TabBar.Item
            title="个人中心"
            key="profile"
            selected={selectedTab === 'profile'}
            onPress={() => setSelectedTab('profile')}
          >
            <Link to="/profile">个人中心</Link>
          </TabBar.Item>
          {/* 其他TabBar.Item */}
        </TabBar>
      </div>
      <Route exact path="/" component={HomePage} />
      <Route path="/login" component={LoginPage} />
      <Route path="/register" component={RegisterPage} />
      <Route path="/profile" component={ProfilePage} />
      <Route path="/list" component={ListPage} />
      <Route path="/detail" component={DetailPage} />
      <Route path="/settings" component={SettingsPage} />
      <Route path="/search" component={SearchPage} />
      <Route path="/upgrade" component={UpgradePage} />
    </Router>
  );
};

export default App;

在上面的示例中，我们使用了React Router来管理不同页面的路由，通过Link组件实现页面之间的导航。在TabBar.Item的onPress事件中，通过setSelectedTab函数来切换选中的Tab，并使用Link组件的to属性来指定要导航到的路径。

每个页面都被定义为一个函数组件，并通过Route组件来匹配对应的路径，并渲染相应的组件。

你可以根据实际需求修改每个页面组件的内容和样式，并根据需要添加其他页面和路由。

希望这个综合示例能够帮助你理解如何在AMR中使用React Router实现页面切换和导航。如果有任何问题，请随时提问。

五、知识点归纳

当涉及到Ant Design Mobile of React（AMR）的基础页面登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页的开发时，以下是一些需要注意的知识点的总结：

组件使用：AMR提供了丰富的组件库，如Form、Input、Button、List、Card、Accordion等，可以根据需求选择合适的组件来构建各个页面。
表单验证：使用AMR的Form组件和表单验证规则来实现对用户输入的验证，确保数据的准确性和完整性。
导航菜单和路由管理：导航菜单，使用AMR的TabBar和TabBarItem组件来创建主页的导航菜单，并通过选中状态切换页面。路由管理：使用React Router库来管理不同页面之间的路由，通过Route组件匹配路径并渲染相应的组件，通过Link组件实现页面之间的导航。
页面布局：使用AMR的Card、List等组件来创建页面的布局结构，包括标题、描述、图标等内容。
表单输入：使用AMR的Input、Checkbox等组件来实现用户的输入，包括用户名、密码、邮箱等。
消息提示：使用AMR的Toast、Message等组件来显示登录失败、注册成功等消息提示。
页面跳转：使用Link组件和React Router的编程式导航来实现页面之间的跳转。
数据展示：使用AMR的List和ListItem组件来展示列表页和搜索页的数据列表，可以自定义内容和样式。
版本管理：使用AMR的List和Button组件来展示当前应用的版本信息，并提供升级功能。
折叠展开：使用AMR的Accordion组件实现详情页内容的折叠展开效果，提供更多详细信息。

以上是对于开发这九个基础页面时需要注意的一些知识点的总结。通过合理运用AMR的组件和React Router的路由管理，你可以构建出美观、功能丰富的移动应用界面。如果有任何进一步的问题，请随时提问。

六、前面提到的知识点的分别示例代码：

组件使用示例：

import { Form, Input, Button, List, Card, Accordion } from 'antd-mobile';

const ExampleComponent = () => {
  return (
    <div>
      <Form>
        <Form.Item>
          <Input placeholder="用户名" />
        </Form.Item>
        <Form.Item>
          <Input type="password" placeholder="密码" />
        </Form.Item>
        <Button type="primary">登录</Button>
      </Form>

      <List>
        <List.Item>列表项1</List.Item>
        <List.Item>列表项2</List.Item>
        <List.Item>列表项3</List.Item>
      </List>

      <Card>
        <Card.Header title="详情页标题" />
        <Card.Body>
          <List>
            <List.Item>详情项1</List.Item>
            <List.Item>详情项2</List.Item>
            <List.Item>详情项3</List.Item>
          </List>
          <Accordion>
            <Accordion.Panel header="更多信息">
              更多详细内容...
            </Accordion.Panel>
          </Accordion>
        </Card.Body>
      </Card>
    </div>
  );
};

2. 表单验证示例：

import { Form, Input, Button, Toast } from 'antd-mobile';

const LoginForm = () => {
  const handleSubmit = (values) => {
    if (values.username === '' || values.password === '') {
      Toast.fail('请输入用户名和密码');
    } else {
      // 处理登录逻辑
      Toast.success('登录成功');
    }
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input type="password" placeholder="密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">登录</Button>
    </Form>
  );
};

3. 导航菜单和路由管理示例：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { TabBar } from 'antd-mobile';

const HomePage = () => {
  return <h1>主页内容</h1>;
};

const ProfilePage = () => {
  return <h1>个人中心内容</h1>;
};

const App = () => {
  const [selectedTab, setSelectedTab] = useState('home');

  return (
    <Router>
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar tabBarPosition="bottom">
          <TabBar.Item
            title="首页"
            key="home"
            selected={selectedTab === 'home'}
            onPress={() => setSelectedTab('home')}
          >
            <Link to="/">主页</Link>
          </TabBar.Item>
          <TabBar.Item
            title="个人中心"
            key="profile"
            selected={selectedTab === 'profile'}
            onPress={() => setSelectedTab('profile')}
          >
            <Link to="/profile">个人中心</Link>
          </TabBar.Item>
        </TabBar>
      </div>
      <Route exact path="/" component={HomePage} />
      <Route path="/profile" component={ProfilePage} />
    </Router>
  );
};

4. 页面布局示例：

import { Card, List } from 'antd-mobile';

const DetailPage = () => {
  return (
    <Card full>
      <Card.Header title="详情页标题" />
      <Card.Body>
        <List renderHeader={() => '基本信息'}>
          <List.Item>详情项1</List.Item>
          <List.Item>详情项2</List.Item>
          <List.Item>详情项3</List.Item>
        </List>
        <Accordion>
          <Accordion.Panel header="更多信息">
            更多详细内容...
          </Accordion.Panel>
        </Accordion>
      </Card.Body>
    </Card>
  );
};

5. 表单输入示例：

import { Form, Input, Checkbox } from 'antd-mobile';

const SettingsPage = () => {
  return (
    <Form>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="email" rules={[{ required: true, message: '请输入邮箱' }]}>
        <Input type="email" placeholder="邮箱" />
      </Form.Item>
      <Form.Item name="notifications">
        <Checkbox>接收通知</Checkbox>
      </Form.Item>
    </Form>
  );
};

6. 消息提示示例：

import { Toast, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handleButtonClick = () => {
    Toast.success('操作成功');
  };

  return (
    <div>
      <Button onClick={handleButtonClick}>点击按钮</Button>
    </div>
  );
};

7. 页面跳转示例：

import { Link } from 'react-router-dom';

const ExampleComponent = () => {
  return (
    <div>
      <Link to="/profile">跳转到个人中心</Link>
    </div>
  );
};

8. 数据展示示例：

import { List } from 'antd-mobile';

const ListPage = () => {
  const data = ['列表项1', '列表项2', '列表项3'];

  return (
    <List>
      {data.map((item) => (
        <List.Item key={item}>{item}</List.Item>
      ))}
    </List>
  );
};

9. 版本管理示例：

import { List, Button } from 'antd-mobile';

const UpgradePage = () => {
  const handleUpgradeClick = () => {
    // 执行升级操作
  };

  return (
    <List>
      <List.Item extra="v1.0.0">当前版本</List.Item>
      <List.Item>
        <Button type="primary" onClick={handleUpgradeClick}>检查更新</Button>
      </List.Item>
    </List>
  );
};

10.折叠展开示例代码：

import { Accordion, List } from 'antd-mobile';

const ExampleComponent = () => {
  const accordionData = [
    { title: '折叠项1', content: '折叠项1的内容' },
    { title: '折叠项2', content: '折叠项2的内容' },
    { title: '折叠项3', content: '折叠项3的内容' },
  ];

  return (
    <Accordion defaultActiveKey="0">
      {accordionData.map((item, index) => (
        <Accordion.Panel key={index} header={item.title}>
          <List>
            <List.Item>{item.content}</List.Item>
          </List>
        </Accordion.Panel>
      ))}
    </Accordion>
  );
};

在上面的示例中，我们定义了一个包含折叠项标题和内容的数组accordionData。使用Accordion组件包裹Accordion.Panel组件，并通过defaultActiveKey属性设置默认展开的折叠项。

通过map方法遍历accordionData数组，为每个折叠项创建一个Accordion.Panel组件，并传递相应的标题和内容。

在Accordion.Panel内部，我们可以使用其他AMR组件，如List和List.Item来展示折叠项的具体内容。

希望这个示例能够帮助你理解如何使用Accordion组件来实现折叠展开功能。

以上是对于各个知识点的示例代码，希望能够帮助你更好地理解和应用这些知识点。如果有任何问题，请随时提问。