Closed xiaohuoni closed 6 years ago
注意initial-scale=1 会导致失效,可以使用以下的mate
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
.wrapper {
height: 500px;
:global {
.am-button-text {
padding: 6px;
}
}
}
layouts/index.js 里用 withRouter 包以下。参考 https://github.com/umijs/umi-dva-user-dashboard/blob/master/src/layouts/index.js
export default withRouter(connect(({}) => ({}))(Layout))
注意先后顺序
几个方案供选择:
* 改用 hashHistory,在 `.umirc.js` 里配 `hashHistory: true`
* 静态化,在 `.umirc.js` 里配 `exportStatic: true`
* 服务端配置路由 fallback 到 index.html
在webpackrc中配置publicPath:"/static/",
简单用法
export default {
'/api/hello'(req, res) {
res.end(`hello ${Math.random()}`);
},
...require('./mock/user'),
};
可以用下面的方法,写到别的文件里面去。
const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
Object.assign(mock, require('./mock/' + file))
})
module.exports = mock
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<title></title>
</head>
<style>
body{
user-select:none;
}
</style>
<body >
<div id="root"></div>
</body>
</html>
配置模板[https://umijs.org/docs/zh-Hans/html-tpl.html](配置 HTML 模板)
import { Helmet } from 'react-helmet';
<Helmet>
<title>UMI DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href={xxx} type="image/x-icon" />
<script src={xxx} />
<link rel="stylesheet" href={xxx} />
</Helmet>
在混合应用中,iOS修改不了。可以使用react-document-title
先安装依赖,
$ npm install @babel/polyfill --save
新建 src/global.js
,内容如下:
import '@babel/polyfill';
推荐使用umi-plugin-polyfill
页面需要部署
最简单的方式是
$npm i serve -g
在dist目录下
$ serve
将旧的roadhog或者dva项目,转移到umi时 如果有babel-runtime依赖和配置了babel-plugin-transform-runtime插件,需删除,因为已内置处理,
路由跳转用这个 import router from 'umi/router'; router.push('/login') 抛事件用window.g_app._store.dispatch
在开发环境下,有效。 build之后,发现ant的样式会覆盖写在gobal.less中的样式
暂时的处理是给样式强制 !important
config.js
const openPages: ['/login','/plan','/home',"/"];
module.exports = {
openPages:openPages
}
layouts/index.js
import config from "config.js";
const { openPages } = config;
if (openPages && openPages.includes(pathname)) {
return (
<div>
{children}
</div>
);
}else{
//something
}
import { HashLink } from "react-router-hash-link";
const router ="main";//当前的路由,重复跳转到当前路由不会触发页面更新
const anchorHref="#api";//这个是定位的锚点 如<div id="api"></div>
<HashLink to={`/${router}${anchorHref}`}>点击跳转</HashLink>
上述方法不好用,涉及到路由携带参数,会有问题。 使用下面方法
handleQuickJump(id, e) {
if (e) {
e.preventDefault();
}
const node = document.querySelector(id);
if (node) {
node.scrollIntoView(true);
}
}
习惯使用VUE的朋友(或其他别的框架使用者),对嵌套的state使用不习惯的。 方法1:使用Umi
export default {
plugins: [
['umi-plugin-dva', { immer: true }],
],
};
方法2:自己写的react组件
$ npm install immer --save
import produce from "immer"
/**
* Classic React.setState with a deep merge
*/
onBirthDayClick1 = () => {
this.setState((prevState)=>({
user: {
...prevState.user,
age: prevState.user.age + 1
}
}))
}
/**
* ...But, since setState accepts functions,
* we can just create a curried producer and further simplify!
*/
onBirthDayClick2 = () => {
this.setState(produce(draft => {
draft.user.age += 1
}))
}
用的组件都是immer
umi-antd-pro,现在的都是在antd-design-pro的基础上修改的,觉得有点乱,保留antd-design-pro的组件和页面逻辑,一点点整理的。地址:https://github.com/xiaohuoni/umi-antd-pro
umi-dva-user-dashboardUser dashboard example with combination use of umi and dva. umi-antd-admin A admin dashboard application demo built upon Ant Design and Umi with-dva umi with dva with-dva-and-immer umi with dva and immer umi-examples umi examples
umi-antd-pro umi-antd-pro,所有的组件和页面逻辑保留 Ant Design Pro的设计。 dva-umi a scaffolding for dva-umi (已在项目中使用) dva-umi-mobile a scaffolding for dva-umi-mobile (已在项目中使用) umi-pro 基于umi, 大部分代码重用 ant design pro 使用react-intl支持多语言 (已在项目中使用)
@sorrycc 你觉得怎么处理这个问题比较好哦? 1、在umirc.js中增加配置 2、增加一个Compiling.js返回一个react dom。目录层级和dva.js一起 我比较想用第二种方法,不知道还有没有别的方案
@xiaohuoni 很赞,这里面提到的问题,开发过程有很多都碰到过。
@chenfengyanyu 欢迎补充,后续让大佬把这里整理一下,可以放到FAQ里面。
@xiaohuoni 有遇到环境变量的问题嘛,我有几套环境,需要不同的API地址:
"release": "cross-env NODE_ENV=production umi build",
"dev": "cross-env NODE_ENV=development umi build",
像上面这样,只要我一运行 npm run dev,NODE_ENV 就会变成 production ,所以区分不了环境。不知道你是如何处理的?
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
.Logo {
background-image: url(./logo.png);
}
@chenfengyanyu 我自己定义了一个环境变量SERVER=PROD SERVER=TEST
@daqi 谢谢啦,我也是换了环境变量
@xiaohuoni 大佬你好,请问一下,引入了@babel/polyfill之后会在Dvacontainer文件里报错,引入了umi-plugin-polyfill会报错缺少')',这个怎么才能解决
@daqi 可以分享下怎么配置的吗~谢谢!
@axu6705
package.json
里面大概是这样
{
"scripts": {
"start": "SERVER=dev umi dev",
"build": "SERVER=prod umi build",
"build:test": "SERVER=test umi build",
"upload": "export SERVER=prod && node upload.js",
"upload:test": "export SERVER=test && node upload.js"
},
...
}
config/index.js
let config = require('./'+process.env.SERVER+'.js')
module.exports = config
.webpackrc.js
const publicPath =
process.env.SERVER === 'prod'
? 'http://img0.abc.com/abc-h5/'
: process.env.SERVER === 'test' ? 'http://static.abc.com/abc-h5/' : '/static/'
export default {
publicPath: publicPath
}
常见 FAQ 在 https://umijs.org/guide/faq.html 继续维护,可以提 PR 到这里。
@xiaohuoni 关于项目图标 https://juejin.im/post/59bb864b5188257e7a427c09 作者提供的方案感觉比较优雅,可否提供一个配置方案
参考 https://github.com/zuiidea/antd-admin 并做一些优化
具体步骤如下
1、 .webpackrc.js 作如下配置
urlLoaderExcludes: [
path.join(__dirname, 'src/icons')
]
2、添加 webpack.config.js 文件(需添加svg-sprite-loader依赖)
const path = require('path');
export default function (webpackConfig) {
webpackConfig.module.rules.push({
test: /\.svg$/i,
include: [path.join(__dirname, 'src/icons')],
use: [
{
loader: require.resolve('svg-sprite-loader')
}
]
});
return webpackConfig
};
3、添加svg文件
请在src/icons/svg 目录下添加svg文件
4、 新建src/icons/index.js
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./svg', false, /\.svg$/);
requireAll(req);
5、在global.js 引入
import './icons/index';
6、新建SvgIcon组件
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import styles from './index.less';
class Index extends Component {
static propTypes = {
className: PropTypes.string,
icon: PropTypes.string
};
static defaultProps = {
className: '',
icon: ''
};
render() {
const { className, icon } = this.props;
const clsString = ClassNames(className, styles.main);
return (
<svg className={clsString} aria-hidden="true">
<use xlinkHref={`#${icon}`} />
</svg>
)
}
}
export default Index;
@chenfengyanyu 我自己定义了一个环境变量SERVER=PROD SERVER=TEST
是如何做到自己定义环境变量的呢?我自己定义过后,但是无法获取变量,无论如何都是undefined
@wangxingkang 感谢分享,今天才看到你的这个回复。
请问有遇到过在layout中使用cloneelement给children传递方法,children获取undefined么
请问有遇到过在layout中使用cloneelement给children传递方法,children获取undefined么
提供一下你的使用规则呗 这种问题一般都是react用法问题哦
@freedomljt 在umi中,layout的children并不是你的page,而是路由,所以你传递的属性并没有加入到你的页面中,你可以打印一下layout的children看看
这个太长了,打开浪费太多时间。有问题重发iss吧
现在文档比较少,好几个朋友都遇到一样的问题,在这里记录一下。大家还有遇到什么问题,可以在这里补充,我会尽量帮忙搞到解决方案