Dva+Antd-Mobile项目实践

2023-10-01 23:11:33

1. 项目概述

本项目是一个日历生成器，用户可以在其中输入信息并选择图片，然后生成一个个性化的日历。该项目由两个路由页面组成：一个用户填写信息的页面和一个生成的日历页面。在Dva中，我们使用Redux来管理数据模型，只有一个Store来保存数据。Action：组件通过connect函数包装后会有this.props。Reducer：处理Action，更改State的值。

2. 环境搭建

在开始之前，您需要确保已经安装了以下软件：

Node.js
npm
Dva
Antd-Mobile
create-react-app

您可以在终端中使用以下命令来安装这些软件：

npm install -g create-react-app
npm install dva antd-mobile

3. 创建项目

使用create-react-app创建一个新的React项目：

create-react-app dva-antd-mobile-calendar

进入项目目录：

cd dva-antd-mobile-calendar

4. 安装依赖

在项目目录中，安装Dva和Antd-Mobile：

npm install dva antd-mobile

5. 配置Dva

在src目录下创建models目录，并在其中创建model.js文件。在model.js文件中，定义您的模型，包括状态、reducer和effect。例如：

import { dva } from 'dva';

export default dva.defineModel({
  namespace: 'calendar',
  state: {
    info: {},
    image: '',
  },
  reducers: {
    saveInfo(state, { payload }) {
      return {
        ...state,
        info: payload,
      };
    },
    saveImage(state, { payload }) {
      return {
        ...state,
        image: payload,
      };
    },
  },
  effects: {},
});

6. 配置Antd-Mobile

在src目录下创建components目录，并在其中创建Header.js文件。在Header.js文件中，导入Antd-Mobile的组件并构建头部组件。例如：

import { NavBar } from 'antd-mobile';

const Header = () => {
  return (
    <NavBar
      mode="dark"
      icon={<Icon type="left" />}
      onLeftClick={() => window.history.back()}
    >
      日历生成器
    </NavBar>
  );
};

export default Header;

7. 编写页面

在src目录下创建pages目录，并在其中创建InfoPage.js和CalendarPage.js文件。在InfoPage.js文件中，构建用户填写信息的页面。在CalendarPage.js文件中，构建生成的日历页面。例如：

InfoPage.js

import { connect } from 'dva';
import { Input, Button, WingBlank, WhiteSpace } from 'antd-mobile';

const InfoPage = (props) => {
  const { dispatch } = props;

  const handleChange = (value) => {
    dispatch({
      type: 'calendar/saveInfo',
      payload: value,
    });
  };

  const handleSubmit = () => {
    // ...
  };

  return (
    <div>
      <Header />
      <WingBlank>
        <WhiteSpace size="large" />
        <Input placeholder="姓名" onChange={handleChange} />
        <WhiteSpace size="large" />
        <Input placeholder="生日" onChange={handleChange} />
        <WhiteSpace size="large" />
        <Button type="primary" onClick={handleSubmit}>生成日历</Button>
      </WingBlank>
    </div>
  );
};

export default connect()(InfoPage);

CalendarPage.js

import { connect } from 'dva';
import { Calendar } from 'antd-mobile';

const CalendarPage = (props) => {
  const { info } = props;

  return (
    <div>
      <Header />
      <WingBlank>
        <WhiteSpace size="large" />
        <Calendar
          mode="month"
          defaultValue={new Date()}
          showDate={info.date}
        />
        <WhiteSpace size="large" />
      </WingBlank>
    </div>
  );
};

export default connect(({ calendar }) => ({
  info: calendar.info,
}))(CalendarPage);