为了账号安全,请及时绑定邮箱和手机立即绑定

【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-sizecolor来控制大小和颜色,而且是适量放大的。如果你用 css 背景图片,想修改颜色和大小还是劳烦设计的同事协助,好费劲
  • 目前开源字体图标库中,常用的图标都能找到,直接拿来就用。不用再找设计的同事裁图、切图…… 除非有特殊定制需求
  • 资源足够小,无需担心性能
  • 浏览器支持已经足够全面,特别是移动端浏览器

Font Awesome

css3支持自定义字体图标,开源社区中比较有名气的算是Font Awesome,如果没听过或者只知道没用过,一定要再看到这个视频的近期去恶补一下。作为一名前端工程师,没用过 font-awesome(或者类似的插件)并不是一件多光彩的事儿。

Font Awesome 会一次性全部给你提供好几百个图标,供你选择使用。但是我们做项目时,根本用不了那么多图标,只用十几个就够了,加载过多会影响性能。接着往下看……

icomoon

icomoon是一个字体图标生成器网站,在这里面你可以任意选择你需要的图标,并且打包下载。而且,如果觉得它默认提供的图标不够丰富,还可以添加其他图标库,有些免费有些收费,fontAwesome就在其中。该网站相对于直接用 Font Awesome 的特点是————你用几个就打包几个,用不到的不要管,这样就最大限度的缩小了网页需要加载的字体文件。

至于下载下来之后如何使用,和 Font Awesome 一样(都是一样的东西,来源不一样而已)这里就不在赘述了。

看代码

可以看一下代码中的实现方式。

注意,列表的”加载更多“是模拟的。后端没有太多数据,只能模拟一下效果。

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消