H5开发实战一:概述和基础页面开发|小册免费学

676 阅读6分钟

什么是H5开发

基于 HTML5、CSS3 等网页技术,负责可视化 UI 界面及动效的开发,H5开发的具体内容包括PC网页、移动端页面、H5营销活动和H5小游戏页面的开发。

响应的H5开发需要具备:基础页面开发、响应式页面开发、滑屏应用开发和动画效果开发等基础能力,以及游戏开发高阶的能力。

基础页面开发

基础页面开发:依据设计稿(PSD 或 Sketch)及交互要求,利用 JavaScript、HTML 和 CSS 等技术将设计稿高保真转换为网页的能力。

开发基础页面要做到将设计稿还原成真实的网页。这个过程通常分为以下几步:

步骤1-设计稿审查

  1. 要了解设计稿对开发来说是不是友好,比如开发成本高、或无法实现、或页面显示可能会有缺陷(文本溢出、图片剪切变形)
  2. 拆解设计稿的布局和内容构成。利用模块化的思想将设计稿解构成一个个组件,明确每一个组件的可复用性和复用范围。

排版布局和内容构成可以先抽象简化为线框图,然后确认跨页面可复用的组件(如Header-顶部导航Footer-底部信息)、当前页面可复用组件(如Billboard-信息公告牌Ad-board-商品广告位等)

步骤2-编写页面骨骼框架

  • 盒模型

HTML的每个元素都可以被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用的空间,这个模型称为标准盒模型。 盒模型由margin(外边距)、border(边框)、padding(内边距)、content(内容区域)组成。

为了避免盒模型大小变化影响网页排版,开发中首先要重置样式:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

CSS3的border-box表示盒模型的宽度=元素的width。border-width + padding-width + content-width表示盒子的宽度

盒子的大小由contentpaddingborder构成,加上margin表示盒子占的空间

  • 布局

网页布局方式:

  1. 普通文档流布局:默认的布局方式,由块级元素(display: block)和行内元素(display: inline)等组成(构成"文本流"),元素之间排列顺序从左到右,从上到下。
  2. 浮动布局:浮动布局会脱离普通文档流,分为左右浮动,一般是在普通文档流布局的上面进行界面的布局,想避免浮动布局遮盖普通布局,可以使用清除浮动。
  3. 绝对布局:使用position: absolute属性进行绝对布局,绝对布局的元素会脱离文档流,其定位是参考祖先元素中position为非static值的第一个元素。
  4. 弹性布局: Flex布局,是一个完整的模块(不是单一属性),父元素和子元素上都有可以设置的属性。布局建立在 flex-flow的轴方向上的。
  5. 网格布局:用于制定行与列的二维CSS布局方法,将页面分割成几个主要的区域,或定义组件内部元素间的大小、位置和图层之间的关系。
  • 语义化

HTML语义化就是让标签本身就能体现出其内容的含义,不同的内容选择合适的标签,既便于阅读和维护、也便于搜索引擎的爬虫更好地识别。

HTML5提供了很多语义化标签,比如:<header><nav><aside><article><section><footer>等。

步骤3-填充网页血肉内容

  • 切图

切图用于将设计稿中的素材切出来,用于填充到页面中。

Photoshop常见的方便切图技巧:

  • Extract Assets 资源生成器(Photoshop CC 2014)
    • 打开 PSD 文件
    • 打开 「生成 > 图像资源」
    • 更改图层或图层组的文件名
  • Export Artboards, Layers, and more(Photoshop CC 2015)
    • 右键点击所需要导出的图层或图层组,点击弹出菜单中的 Export As导出为
  • PS 动作切图
    • Extract Assets只能切画布范围内的资源,超出画布的部分会直接被裁减掉。
    • 可以用原始的「导出图层」的方式来切图
      • 右键点击图层或图层组
      • 选择转换为智能对象
      • 编辑内容
      • 导出图片
    • 可以用 PS 录制一个切图的动作

步骤4-美化网页皮肤装饰——CSS润色

  • CSS命名规范——BEM

BEM是一种基于组件的命名方法,基本思想是将用户界面划分成独立的模块,即使是复杂的用户界面,也能让开发过程变得简单、快速。并且可以在一定程度上提高代码的可复用性。

BEM即:模块(Block,定义一类模块)、元素(Element,当前模块的子元素项)、修饰符(Modifier,模块或元素的状态),这种命名方式让类名有实际意义且能自我解释,开发友好性较高。让前端代码更容易阅读和理解,更容易协作和控制,更加健壮和明确,以及更加严密。

主要连接符为:

- 中划线 :仅作为连字符使用,用于某个模块或者某个子元素的多单词之间的连接。

__ 双下划线:双下划线用来连接块和块的子元素

-- 双中划线:双中划线用来表示一个块或者块子元素的状态

比如下面示例:

<!-- S Search Bar 模块 -->
<div class="search-bar search-bar--hidden">
  <input class="search-bar__input search-bar__input--focus"/>
  <!-- / input 输入框子元素 -->
  <button class="search-bar__button search-bar__button--on"></button>
  <!-- / button 搜索按钮子元素 -->
</div>
<!-- E Search Bar 模块 -->

模块语义化,便于后期的维护,而且减少了CSS样式的层层嵌套,提升了网页的渲染效率。

当需要明确关联性的模块关系时,应当使用 BEM 格式;但是对于一条公共的单独的样式,就没有使用BEM格式的意义,比如:

.hide {
    display: none !important;
}

BEM命名有个糙点是:命名冗长,书写不雅。因此通常会搭配SCSS等预处理语言,解决这些繁琐:

.search-bar {
  &__input { ... }
  &__button { ... }
}

对于嵌套层级很多的项目,BEM命名的类名可能会很长,因此可以根据实际,调整BEM的命名规则,避免冗长繁琐。

步骤5-兼容性测试

主要关注两点:

  1. 页面在各个浏览器以及不同分辨率下是否能正常显示(HTML / CSS 兼容性)
  2. 网页的功能是否能在各个浏览器中正常使用(JavaScript 兼容性)

兼容性的处理分为:渐进增强与优雅降级(平稳退化)。

  • 渐进增强(Progressive Enhancement:一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

  • 优雅降级(Graceful Degradation:一开始就构建站点的完整功能和高级效果,然后针对浏览器测试和修复。即一开始使用CSS3的特性构建,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

它们分别相当于传统开发中的向上兼容向下兼容

对于兼容性问题,首先要确认什么场景产生的?比如哪个浏览器、什么版本、什么情况下出现;然后找出问题原因;确定解决的办法。

本文正在参与「掘金小册免费学啦!」活动, 点击查看活动详情