【总结】2016.12.12

计划的任务

1. 骑士团首页

实际完成

1. 对满屏与不满屏的斟酌（1个番茄）
2. 准备工作+底部导航栏（上午2.5小时+下午0.5各种做切换）
3. Banner（1.5钟）
4. 静态导航栏（1）
5. 通知栏+商品列表的导航栏 （1）
6. 商品展示（2）

总结

• 是否为满屏宽
  完全取决于页面在iPad中需要呈现的效果。如果是不需要满屏，仅仅是居中状态，就可以用定宽 + margin:auto。如果是需要满屏的，就需要定 margin的宽，任由元素宽度自由伸展。
  另外还有个字体大小问题，主要是在iPad上呈现效果有异。如果用rem，iPad上的字体就会特别大。所以有字体大小会有两种方案：1.字体用px值，2.字体用rem值。
• 骑士团首页
  基本完成首页的呈现，一开始没有用淘宝的flexible计算移动端font-size和基值，导致后面整体都有点乱，没有完全按照设计稿的比例，只是想要熟悉用react来进行页面渲染。其实不外乎几个逻辑，A组件中获取数据，以属性方式传到B组件，B以this.props.data来获取数据，传入this.state.data中，用state中的data进行页面渲染return
  {this.state.data}
  ，这样就能使得组件与数据双向绑定，每当数据改变，组件自动更改。
  有几个点，跳了进去纠结：
  1.移动端页面忘了加,在页面缩放得很小的情况下，还是忘了。
  2.React的Class组成的标签，要大写！！！
  3.在this.state.data.map(function(item,index){})函数中使用this，老是报错，这时候this已经改变了指向进入函数的数组的了。特别是onclick事情，要是需要用的话，就在函数外把this的值先赋给其他变量。
  4.使用外部插件时怎么去initial插件？其实就是在componentDidMount函数中new就可以了，今天是因为用的那个Swiper是Jquery版本的导致什么也没出来，捆绑我好一阵子。。
  5.弹性盒布局换行控：要设定父元素宽度和子元素宽度吗，再加上flex-wrap: wrap。
  6.Http-proxy解决跨域问题
  在webpack.config.js中配置
  devServer: {
  historyApiFallback: true,
  progress: true,
  port: PORT,
  host: IP,
  proxy: {
  '/api/': { / 匹配规则，所有能匹配该规则的URL的域名都将会被更改 /
  target: '', / 域名 /
  changeOrigin: true,
  secure: false
  }
  }
  }
  在Fetch中
  let testAsync = async function () {
  / 匹配规则就是在URL中使用 */
  let temp = await fetch('/api/xxxxx/yyyyy').then(response => response.json());
  ...
  };

若在域名设置为http://www.baidu.com
那么接下来所有匹配/api/*的URL都会变成 http://www.baidu.com/api/xxxx/yyyyy...

• 是不是因不熟的原因呢？感觉老是做的比较慢。
• 继续加油！