By

Contents
  1. 1. 前言
  2. 2. 项目分析
    1. 2.1. 项目一（下简称“长条页”）
    2. 2.2. 项目二（下简称“视频页”）
  3. 3. 开始制作
  4. 4. 测试
  5. 5. 总结
  6. 6. Reference

前言

组长开了个小会，发现现在后端开发项目不多，前端任务繁重，正巧碰上之前离职的一个前端现在还没招到。于是组长很客气的要求我帮前端同事分担一下工作，分给我两个静态移动端页面。

项目分析

项目一（下简称“长条页”）

  1. psd里是一个一长条的页面，里面有十几个按钮分为可点击和不可点击状态，这表示这些地方需要单独切出来。
  2. 另外页面的图形标题属于设计可能会频繁修改的地方，也单独切。
  3. 还把一长条的背景划分成了三等分，以减少载入时可能出现的空白。

项目二（下简称“视频页”）

  1. 图形标题和背景参照项目一
  2. 这个项目需要嵌入4个视频，视频的头图和播放按钮与视频框需要分开。
  3. 嵌入视频使用video.js

开始制作

先使用Photoshop分别从psd里把每个项目里所有独立的元素单独存出来。
由于psd的宽度是750所以在meta标记里把宽度设定好。
<meta name=viewport content="width=750,target-densitydpi=device-dpi,user-scalable=no">
向前端同事请教了下，决定使用绝对定位的方式来布局。

长条页和视频页的背景图为了减少加载时间都分成了三等分，使用img标签的话，每张图之间会有一道细细的白线。经过前端同事的指点，将背景图由img标签换成为body设css的加载方式，分开计算每张图top的距离，消除了白线。

1
2
3
4
5
6
body{
	...
	background: url("../images/bg-1.jpg") top left no-repeat,
    	url("../images/bg-2.jpg") left 599px no-repeat,
    	url("../images/bg-3.jpg") left 1198px no-repeat;
}

视频页用PM压的视频通过videojs+半透明遮罩层做出来了，但是PM遇到了问题，其中有2个视频的时长都是二十分钟左右，而且客户还要求保证清晰度。而在保证码率250的情况下，近二十分钟的视频压出来都有五十多M，服务器肯定扛不住。
于是转用腾讯视频iframe嵌入的方式，在放视频的地方放入iframe标签。

1
2
3
<iframe class="video_iframe" id="vf" style="z-index:1; display: none"
	src="http://v.qq.com/iframe/player.html?vid=VID&amp;width=400&amp;height=253&amp;auto=0" 
	allowfullscreen="" frameborder="0" height="253" width="400"></iframe>

客户的视频也上传到腾讯视频里https://v.qq.com/x/page/VID.html，从链接中取出VID后放入src内。这样既保证视频的清晰度又不占用我们服务器的资源。

测试

  1. 在测试长条页的时候，发现iphone在点击图片链接时，图片链接会出现一层膜一样的层，经过查找后发现设置一个css可以解决。
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  2. 把页面交给AC测了以后，AC提出制作出来的页面和设计不符，立刻惊出一身冷汗。原来psd里面的bg层是整图，切图的时候要把微信浏览器的上部带title的高度去掉。本来想重切然后分别调每个的定位，前端同事看了下让我把body的css中top的高度改为负数，顺便把margin-top也改为相同的负数，这样可以避免调整其他的样式。
    background: url("../images/bg-1.jpg") top -130px left no-repeat,
    margin-top:-130px

总结

通过制作完这两个页面，学习到了一些前端的基本知识。

  1. 通过meta标签来设置width，适用于按照固定大小的psd来制作页面。
  2. css中background的url值可以填写多个，由逗号隔开。
  3. 通过设置css去除iphone图片按钮的半透明浮层。
  4. 腾讯视频iframe播放器的用法。

Reference

VideoJs - Github
适应移动端 iPhone & Android 微信页面的一些css属性

Contents
  1. 1. 前言
  2. 2. 项目分析
    1. 2.1. 项目一（下简称“长条页”）
    2. 2.2. 项目二（下简称“视频页”）
  3. 3. 开始制作
  4. 4. 测试
  5. 5. 总结
  6. 6. Reference