umi + dva + ant-design-mobile快速搭建H5项目

##介绍 最近开发了一个react项目，由于以前都是作原生混合H5开发，对redux用的不怎么熟练，此次想要锻炼下而后花几天看了一下redux和看了几个搭建方案，以及看了下公司其余的H5项目（直接用redux的项目）以为很复杂繁琐。用过ant-design-pro 2.0正式版（加入了umi的版本）以为很不错，因此决定从UMI入手搭一个项目来作手机端的H5项目，在去掉大部分业务代码后把这个demo拿来给你们分享一下，但愿对新手搭建umi项目有必定价值。

写这篇文章是为了帮助须要的人更好的理解umi来搭建项目，第一次写文章不足之处望指正 本文的例子的demo在个人 github 地址能够下载参考 github地址 以为对本身理解和上手umi项目有帮助的点个star

##建立项目

• umi 提供了脚手架，能够参考umi官网经过脚手架建立项目部分
• 包管理器我使用的是yarn

yarn是facebook推出的，在一些较新的react书籍和资料中也是推荐使用yarn。与npm相比，yarn主要的优点在于：速度快，离线模式，版本控制。

• 废话太多上代码干，在空文件夹下

yarn create umi
复制代码

会出现一个选择框，我选择了antd，dll，hard source。这几个配置在umi官网快速上手里面有配置的解释。 确保 node 版本是 8.10 或以上

• 安装依赖

yarn
复制代码

• 启动项目

yarn start
复制代码

• 编译打包

umi build
复制代码

##我对umi的一些理解

1. 在dva 项目一般都是要单独写一个 models，而后全部的models写在里面。 用了 umi 后，能够在pages同级下写一个models来管理全部的models也能够在每一个页面的文件夹下写一个models文件夹来放当前页面须要用的models，好处是结构更加清晰了，删除起来方便不须要去删除好几个地方，且会自动注册 models
2. 有约定式路由去掉了router.js，umi 会根据 pages 目录下的页面的js自动生成路由配置。能够参考umi官网路由部分，

• 假设 pages 目录结构以下：

+ pages/
  + users/
    - index.js
    - index.less
  - index.js
复制代码

• 那么，umi 会自动生成路由配置以下：

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
]
复制代码

3. 好用的动态路由（好用在页面间的传值和取值）

• 好比要实现从列表跳转到订单详情，那通常须要带一个id过去，在详情页拿id获取一些数据，那在umi里面咱们怎么作？

+ pages/
  + orderdetail/
    - $id$.js
    - index.less
复制代码

• 那在list跳转上面的orderdetail页面的时候咱们要这么写(假设val.id=15), 记得要从import router from 'umi/router'

router.push('/orderdetail/' + val.id)     
复制代码

• 在orderdetail页面取这个id（能够本身打印一下this.props看看）

this.props.match.params.id  
复制代码

4. 减小了配置文件，umi的 package.json 里会少不少依赖，再好比建立项目的时候选的antd那就包含了

• antd
• antd-mobile
• babel-plugin-import #上demo

运行后的效果

全局layout组件

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，经过 props.children 渲染子组件。

+ layouts/
  + baseLayout/
    - index.js
    - index.less
  - index.js
复制代码

• 首先先看下 layouts 下的 index.js

import React, { Component } from 'react'
import BaseLayout from './baseLayout';  // 底部导航的组件

const ULR_NO_LAYOUT = ['/', '/home', '/class', '/my'];  //判断在哪几个路由下须要出现底部导航
class Index extends Component {
  componentDidMount() {
  }
  renderBody = () => {
    const {location: {pathname}, children } = this.props;
    if (ULR_NO_LAYOUT.includes(pathname)) {
      return  (<BaseLayout {...this.props} />);
    }
    return (
      <React.Fragment>
        {children}
      </React.Fragment>
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.renderBody()}
      </React.Fragment>
    )
  }
}

export default Index;
复制代码

• ULR_NO_LAYOUT变量是为了判断在哪几个路由下须要出现底部导航
• BaseLayout是用 antd-mobile 的 TabBar

mock数据

约定 mock 目录里全部的 .js 文件会被解析为 mock 文件。咱们新建一个home.js

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },

  // GET POST 可省略
  '/api/users/1': { id: 1 },

  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};
复制代码

直接请求/api/users就能拿到 { users: [1, 2] }

request文件

须要根据本身的项目和后台的接收方法对请求方式进行封装

• 例如request的49行和56行,是我对本身项目请求接口时增长的token，能够去掉

// body 添加token
  if (newOptions.body) {
    newOptions.body.__token__ = getToken();
  } else {
    newOptions.body = {
      __token__: getToken(),
    };
  }
复制代码

• 例如request的86行和89行增长对get传值的转换，setUrlEncoded方法,这样处理方便get方法传值的时候也能和post方法同样穿对象，自动转换带在url后面

} else if (newOptions.method === 'GET') {
    new_url = url + '?' + setUrlEncoded(newOptions.body)
    delete newOptions.body
  }

//setUrlEncoded方法
export const setUrlEncoded = (obj) => {
    let urlEncoded = '';
    if(obj && obj instanceof Object) {
        const keys = Object.keys(obj);
        if(keys && keys.length) {
            keys.forEach((key, index) => {
                urlEncoded += `${key}=${obj[key]}`;
                if(index + 1 < keys.length){
                    urlEncoded += '&';
                }
            });
        }
    }
    return urlEncoded;
}
复制代码

• request的110行须要根据本身的项目的返回值来作修改判断是否返回response

获取和验证表单的值

• 推荐使用 rc-form

import { createForm } from 'rc-form';
@createForm()
复制代码

• 调用时 须要从this.props里拿到form里的getFieldProps, getFieldError

render() {
    const {form: {getFieldProps, getFieldError}, regLoading} = this.props;
    <div>
      <InputItem
            {...getFieldProps('name', {
              initialValue: '',
              rules: [{
                  required: true,
                  message: '请输入用户名',
                }],
            })}
            clear
            error={!!getFieldError('name')}
            onErrorClick={() => {
              const err = getFieldError('name').join('、');
              Toast.info(err, 1);
            }}
            placeholder='用户名'
          />
    </div>
}
复制代码

• 提交验证form输入内容的时候，例如

submit(){
    const {form, dispatch} = this.props;
    form.validateFields((error, fieldsValue) => {
      if (error) {
        return;
      }
      dispatch({
        type: 'login/submit',
        payload: {
          // 入参
        },
        callback: (res) => {
          //须要实现什么
        }
      });
    });
  }
复制代码

models调用和models文件

• 例如在home的index.js要调用

import { connect } from 'dva';
@connect(({ home }) => ({ home }))
复制代码

• home的models文件夹home.js, 使用了subscriptions，subscriptions的好处应该就是能够监测全局的变化, 即便和当前页面不相关model里也能够进行数据改动或者请求接口.固然你也能够选择在页面中使用dispatch

import { reg } from 'services/home';
import router from 'umi/router';
export default {
  namespace: 'home',
  state: {
    'list':{
      'productList': '',
      'bannerList': ''
    }
  },
  effects: {
    *reg({ payload, callback }, { call, put }) {
      const response = yield call(reg, payload);
      yield put({
        type: 'setData',
        payload: response.data
      });
    }
  },
  reducers: {
    setData(state, { payload }) {
      return {
        ...state,
        list: payload,
      }
    }
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, search }) => {
        if (pathname == '/home'||pathname == '/') {
          dispatch({
            type: 'reg',
          });
        }
      });
    },
  },
};
复制代码