客户端发现_观影团活动页面开发与客户端新版跳转测试页面开发项目总结

   这一周过的是我理想的实习状态，手头有项目则忙项目，没项目则提高基础技能。那么下面来看看这周做的活动页面效果吧。

项目介绍

（一）．观影团活动页面的开发

本项目页面的开发基本都是用之前用过的技术，不同之处在于乐帝之前的开发处于懵懂状态，现在回头看还是有些许的提高，对页面每一行代码都知道来龙去脉，弹出窗、对齐、居中布局都从本周阅读《前端开发修炼之道》有了更深层次的认识。css对齐与居中布局都不是单独属性完成的，而是有关联及触发的，而之前写页面不理解的恰恰是属性间的触发关系。

这里拿弹出窗的构造举例。

<div id="popup">
  		<img src="popup_bg.png">
  		<div id="popup_position">
  		<p class="submit header_info">验证手机号后即可报名，方</p>
  		<p class="submit">便小编与您联系</p>
  		<input type="tel" id="tel" value="手机号：">
  		<br>
  		<button class="cupid green" id="confirm">确定</button>
  		<button class="cupid white" id="cancel">取消</button>
  	</div>
	  	<div id="success">
	  		<p>成功参与，耐心等候冰冰的邀约</p>
	  		<button class="cupid green" id="confirm_success">确定</button>
	  	</div>
  </div>
  <div id="mask"></div>

   弹出窗从结构上分为弹出部分即属性为popup代表的部分，另外一部分是属性为mask代表的弹出窗下面的遮罩部分。外层popup利用绝对定位，内层popup_position则用于相对于图片的精确定位。调节适配只需要调整外部绝对位置、内部相对位置、内部元素宽和高所占比例。

@media only screen and (max-width: 800px) and (min-width: 710px) {
#join{
	position:absolute;
	left:25%;
	top:28%;
}
#popup{top:10%;width:90%;left:4%;}
#popup img{width:100%;}
#popup_position{top:-180px;}
.submit{font-size: 16px;}
#tel{height:40px;font-size: 16px;width:80%;}
.cupid{height:40px;font-size: 16px;width:38%;}
}

      交互部分则用jquery实现业务逻辑相对简单，需要单独指出的是遮罩时，页面不能滑动，这里的实现如下：

jQuery(window).scroll(function(){
       if(jQuery("#mask").css("display")!="none"){//弹出窗口时不允许滚动条滚动
       jQuery(window).scrollTop(0);
    }
    });//遮罩出现不允许页面滚动

    在做这个项目的时候，整个团队遇到了一些协作上的问题。从知晓需求到开始动工中间有两天左右空档期，在空档期后则是只有一天的开发时间，第二天活动则要上线。在整个流程上，给开发的时间过少，同时测试分工也不太明确，开发、产品、测试都会涉及到测试的角色，而移动端不同于PC端之处在于适配的多样性，功能测试比较多，而类似适配测试则相对较少。返回头来看，流程是清晰的测试成功后上线，而每个流程具体职责及重点仍缺乏统一沟通确定规则。

    另外一点风险则是开发人员完全按照产品的需求，不能从逻辑合理性角度优化产品逻辑，也会造成后期资源的浪费。

    以上两点是这次遇到的一些问题，我应该向领导反映下完善开发流程，增加适配测试重点，同时及时向产品反馈需求，以优化产品逻辑。

（二）．客户端新版跳转测试页面开发

    此项目主要根据需求提供的接口，构造一些按钮，提供一个测试环境下的测试页面。开发页面很简单，主要的精力用在确定需求即接口参数和按钮数量种类上。主要与后端（ios和android）与测试沟通上花费了比较长的时间。

    本次项目确定了与谁沟通后，下次安排接口问题就能够快速完成需求。不得不感叹团队的效率不在技术开发，而在沟通上。

（三）．个人提高的一些感悟

   在空闲时间，这周主要研读《前端开发修炼之道》与《PHP程序设计经典300例》，读前者能在没有导师的情况下，确定整个前端的开发流程及常见的开发模式，特点是从原理讲起，而不会有太多浮华的例子。后者则是php开发后端常用到的逻辑代码，能为今年网站的计划奠定技术储备的基础。

IEtest神工具：

然后看一个比较好玩又有高端的css sprites例子：

   通过将以下图片设置为某标签的背景并把背景多余部分隐藏，设置此标签的宽度和高度，然后通过对背景图的移动实现背景部分显示，达到我们要的效果。

span{display:block;width:18px;height:20px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}
.up1{background-position:-58px -20px;}

上图是乐帝自制的方片4

这个页面有详细制作一幅扑克的方法，还有可以拖动的代码，代码中不清楚一些浏览器尺寸特性可以点这个页面。处理这些css
sprites工作量最大的就是生成相应坐标了，这里有个简单的工具：bg2css_v3.2.1.air，另外还有在线的工具。

客户端发现_观影团活动页面开发与客户端新版跳转测试页面开发项目总结,布布扣,bubuko.com