##介紹 最近開發了一個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的一些理解
- 在dva 專案通常都是要單獨寫一個
models，然後所有的models寫在裡面。 用了 umi 後，可以在pages同級下寫一個models來管理所有的models也可以在每個頁面的資料夾下寫一個models資料夾來放當前頁面需要用的models，好處是結構更加清晰了，刪除起來方便不需要去刪除好幾個地方，且會自動註冊 models - 有約定式路由去掉了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' },
]
複製程式碼- 好用的動態路由（好用在頁面間的傳值和取值）
- 比如要實現從列表跳轉到訂單詳情，那一般需要帶一個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
複製程式碼- 減少了配置檔案，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',
});
}
});
},
},
};
複製程式碼