包括新建日程 日程列表, 打通微信, 定时推送日程 喜欢的帮忙点个star
- clone 项目
- cd daymanage
- npm i
- npm start
- 访问 /home 路径 作为主路径
.
├── README.md
├── dist // 打包后输出文件目录
├── jest.config.js // 单元测试配置
├── mock // mock数据文件
├── package.json
├── public // 静态文件目录 可以直接```/a.txt```这样访问
│ └── a.txt
├── src
│ ├── components // 公共组件
│ ├── config // 常用配置
│ ├── global.css // 全局css 文件
│ └── pages // 页面
├── test // 测试文件目录
│ └── index.test.js
├── tsconfig.json // ts配置
└── typings.d.ts
- css变量在src/global.css中定义 后续在全局中使用; 如果考虑css变量兼容问题,则可以在.umirc.ts中define定义变量。umi会在编译时自动将所有变量替换
- 开启dva配置:https://umijs.org/zh-CN/plugins/plugin-dva
- request请求库 https://github.com/umijs/umi-request/blob/master/README_zh-CN.md
- mock数据 https://umijs.org/zh-CN/docs/mock#%E7%BC%96%E5%86%99-mock-%E6%96%87%E4%BB%B6
https://umijs.org/zh-CN/docs/ssr
- 服务端请求必须使用绝对的 URL 路径;
开启了 SSR 之后,app.getInitialData 以及 Home.getInitialProps 都会在服务端下执行,服务端发请求必须用绝对路径不能用相对路径,因此这两个方法里如果出现异步请求,请务必使用绝对路径,或者正确设置 request.baseURL
- umijs/umi#446
- 如果你以前没有过单测经验或者对单测了解较少 推荐你阅读下面这便文章: https://juejin.cn/post/6844903798406643725 https://juejin.cn/post/6844903878119424008#heading-26
- TODO: https://v2-pro.ant.design/docs/ui-test-cn 测试参考
本地模拟, 进入根目录
npm run build
// 编译结束后
node server.js
// 浏览器中打开http://localhost:7001
线上其实也是这样,无非加一些进程守护工具当服务挂掉后自动重启;
- 需要chrome插件 打通浏览器弹出消息
- 打通手机日历
- 小米
- 华为
- 苹果
- 降级的兜底方案是发送约会邮件
- localhost请求失败 --> 看看你的host 是否配置了 localhost, 需要配置
- ssr中的getInitialProps没有执行, 查看你的页面是不是用react.memo包裹起来了,不可以包裹
- [SSR] ReferenceError: window is not defined
1, Umi 3 默认移除了 DOM/BOM 浏览器 API 在 Node.js 的 polyfill,如果应用确实需要 polyfill 一些浏览器对象,可以使用 beforeRenderServer 运行时事件 API 进行扩展 2, 你可以使用dynamic异步加载组件的方式
- seLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes
1, https://reactjs.org/link/uselayouteffect-ssr 这里详细记录了产生的原因及解决方案 2, antd中的某些组件会引起这个警告 react-component/overflow#6 3, 很多第三方组件 如果一个一个的解决比较麻烦 有一种比较暴力的方法: React.useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;