【React.js模仿大众点评webapp】实战教程(7)开发首页 【作废】
源码地址:https://github.com/wangfupeng1988/react-simple-o2o-demo/tree/stage1-home-page
首页开发介绍首页的开发过程。
分析页面结构React(或者 vue angular 等)是基于组件化的开发思路,因此首先要分析页面构成部分的结构。拿到页面效果图,从上到下详细分析:
特别提醒:再分析之前,我们首先要回忆下之前讲过的page - subpage - components
以及“智能组件”、“木偶组件”的相关知识。如果对此还一知半解,建议暂停视频,再回顾之前讲述的这块内容。
- 首先,首页肯定是作为一个单独的页面存在的,它应该放在
./app/container/Home
中 - 最上面是一个header,其实就是三个链接。第一个链接到选择城市页面,第二个跳转到搜索页面,第三个跳转到用户中心页面。其中不会涉及到数据处理,可以做成一个组件,放在
./app/components
中。 - 再往下是一个轮播图,显示了商户的各个类型,点击每一个类型就会进入搜索页面,而且这些类型是相对固定的,轻易不会变动。因此,也不会涉及到数据处理,可以做成一个组件,放在
./app/components
中。 - 再往下是一组广告,广告的数据肯定是后台控制的,要从后台获取数据。既然涉及到数据处理了,那么我们就把广告这一块当做一个小页面处理(而不是单纯的组件了),放在
./app/container/Home/subpage
中。 - 最后一个下拉加载的数据列表,和上面的广告一样,数据也来自服务器端,我们也将它当做一个
subpage
处理,放在./app/container/Home/subpage
中。不过这个列表比较负责,其本身有可以查分成多个组件,接下来会看到。
接下来就是整个页面的层次结构划分。接下来可根据源代码来看看如何实现的。
补充:在css中使用字体图标这项知识我们之前一直没讲过,因为单独拿出来讲的话内容比较少,而且放在哪一个章节都不合适。因此就计划,什么时候用到它什么时候再讲。
其实在webpack.config.js
中有一句相关的配置(代码如下):
module: {
loaders: [
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
]
},
使用字体图标的好处
建议大家在以后的项目开发过程中,但凡遇到页面中使用小图标的地方,尽量使用字体图标,而不要再用 css 背景图片的那种方式了。除非有特殊环境要求。
- 能像文字一样,用 css 的
font-size
和color
来控制大小和颜色,而且是适量放大的。如果你用 css 背景图片,想修改颜色和大小还是劳烦设计的同事协助,好费劲 - 目前开源字体图标库中,常用的图标都能找到,直接拿来就用。不用再找设计的同事裁图、切图…… 除非有特殊定制需求
- 资源足够小,无需担心性能
- 浏览器支持已经足够全面,特别是移动端浏览器
Font Awesome
css3支持自定义字体图标,开源社区中比较有名气的算是Font Awesome,如果没听过或者只知道没用过,一定要再看到这个视频的近期去恶补一下。作为一名前端工程师,没用过 font-awesome(或者类似的插件)并不是一件多光彩的事儿。
Font Awesome 会一次性全部给你提供好几百个图标,供你选择使用。但是我们做项目时,根本用不了那么多图标,只用十几个就够了,加载过多会影响性能。接着往下看……
icomoon
icomoon是一个字体图标生成器网站,在这里面你可以任意选择你需要的图标,并且打包下载。而且,如果觉得它默认提供的图标不够丰富,还可以添加其他图标库,有些免费有些收费,fontAwesome就在其中。该网站相对于直接用 Font Awesome 的特点是————你用几个就打包几个,用不到的不要管,这样就最大限度的缩小了网页需要加载的字体文件。
至于下载下来之后如何使用,和 Font Awesome 一样(都是一样的东西,来源不一样而已)这里就不在赘述了。
看代码
可以看一下代码中的实现方式。
注意,列表的”加载更多“是模拟的。后端没有太多数据,只能模拟一下效果。
共同学习,写下你的评论
评论加载中...
作者其他优质文章