计划的任务
- 骑士团首页
实际完成
- 对满屏与不满屏的斟酌（1个番茄）
- 准备工作+底部导航栏（上午2.5小时+下午0.5各种做切换）
- Banner（1.5钟）
- 静态导航栏（1）
- 通知栏+商品列表的导航栏 （1）
- 商品展示（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<div>{this.state.data}</div>，这样就能使得组件与数据双向绑定，每当数据改变，组件自动更改。
有几个点，跳了进去纠结：
1.移动端页面忘了加<mata name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=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...
- 是不是因不熟的原因呢？感觉老是做的比较慢。
- 继续加油！
