从0开始之——预定会议室（webpack）

     发版（代码评审、测试用例、bug修改、文档整理）过后，就开始了react写子应用，第一次认识脚手架等等。虽然不是第一次用react做项目，但是这次是移动端的，webpack构建还真的是从头开始学习的。

     考勤、日程、会议室。这三个应用，我做会议室这个。主要有两个方面：1、webpack的学习和使用。2、实现 移动端的预定会议室（android/ios）。

    webpack是从头开始的，一步一步搭建起来的。环境搭建在相关文章里面已经写了。

    预定会议室：

语言、环境说明：react代码编写、webpack打包。

项目介绍：实现在线预定会议室，一共5个页面、通过路由跳转。

首页、查询会议室页面、会议室列表页面、预定页面、我的会议室页面

1、首页：预定和查询两个按钮，预定会议室和查询我的会议室。

2、查询会议室页面：通过时间条件查询。

3、会议室列表页面：所有的会议室列表。

4、预定页面：预定会议室，填写会议室主题等等关键信息。

5、我的会议室页面：我预定的会议室列表以及我参与的会议室。

     遇到了很多问题，但是一一解决：（请教同事、百度、自己想办法解决）

其中最耗时间的：

1、壳与子应用之间的相互调用。

安卓相对要求低一些，ios必须要有appid,还有最后约定的，跨页面执行，id传root。还有很让我苦恼的是单页应用页面调回来会刷新，导致选人后，回来其他数据丢失。最后，调用壳的，返回后没有数据刷新，一定程度上避免了这个问题。

2、样式的模块化：

之前不知道，样式的处理，全部处理才不会打包报错。

3、时间的处理：

时间戳和时间格式，还有取整问题，那个蚂蚁金服的时间控件，给了个步长，我设定30，但是没办法控制起始时间为整数。

，但是最后还是调整格式解决了：

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

//30  60 整半点显示    IOS 获取有问题 yyyy/MM/dd 解决
const startTime = new Date(now.format("yyyy/MM/dd hh")+":00:00");
const endTime = new Date(now.format("yyyy/MM/dd hh")+":30:00");

4、link传数据：

采用 to ={{pathname:"/path",state:{date:this.state.date}}}   在下一个路由接收：

this.props.history.location.state.date

5、返回：

this.props.history.goBack()   // goBack()  错误   goBack=()=>正确

6、homePage、booking页面样式的调整

修改样式。图片打包 ，配置。

7、资源的引入

import，引入summer、moli等等，一次引入全局使用。

8、react生命周期、还有父子组件之间的传值

props等

9、mock.js

假数据，写入。不用后台，前台可完成大部分工作。

10、数组的遍历

forEach

11、tabbar的切换

active   在a标签里切换

12、和后台对接

接口的调用、header。

react不陌生，但是这也算自己真正一个人独立完成一个小项目吧，以前都是在已有的项目上编写，也算一点进步吧。

也算告一段落，下次任务应该要回到js的开发，好好看看那本红书吧。