注册绑定页面及微信二维码登陆页面开发项目总结

           乐帝来到新的实习单位，也许是之前面试或者在爱奇艺实习的履历，很快被项目组“委以重任”。而不是老套路刚入职，先在架构师那培训两周，专心钻研框架，不问具体业务。乐帝只有几天看框架的时间，当被分配给框架页面时，还是不能得心应手，正如同事所说，学习还得按部就班，写写例子，看代码是不行的。

   目前这家公司类似《走出软件作坊》作者阿朱所在行业，是面向中大型企业，提供人才管理解决方案的软件公司，时髦的词叫SAAS。这类公司层次要比外包公司高，却还有很多外包公司的特点，不像互联网公司有很大的自驱动空间。而一个行业劳累与否，要看这个行业是自驱动需求，还是被客户赶着催工期，总是被动响应，应接不暇。

   由于公司有“外包”性质，也就不免外包式的行事方式，开发流程上比上次实习单位要规范先进不少，但对员工流动性也较高。乐帝目前所在办公工位，对面坐着项目经理，统管技术开发。每日工作除了跟踪项目进度和产品进行关于工期的拉锯战，剩下的就是面试，面试，还是面试。看到项目经理吐槽面试者的水平，各种刷人。乐帝不得不说，自己当初面试，忽悠的水平还是到了一定境界。

   这样的情况就显得有些滑稽，做专业人才管理软件的公司，会因为招不到合适的人而困扰，又有多少软件能够真正解决问题呢？

   乐帝当初选择这家公司而不是腾讯，看重这家公司能给乐帝技术上的提升要好很多。这两周里，验证了当初乐帝在任职要求中的推测。前端团队分为业务团队和架构团队，业务团队基本由公司入职一年左右的同事构成，架构团队则卧虎藏龙。

   处于这样专业的前端开发团队中，不再只依靠百度来解决零星问题，而是有了一个广泛的知识面或者说知识库，遇到的问题，总是可以请教用更短、更优的方式来解决，自身成长也更加快速。下面来谈点干货。

（一）注册绑定页面及微信二维码登陆页面开发

   项目背景：根据原型图及指定页面的格式，开发出注册、绑定和二维码扫描登陆页面。

   请看开发效果图：

        由于注册和绑定的效果图只有文字区别，这里乐帝只贴了一张图，微信登录页的效果图，乐帝采用了微信网页版的样式，不同的是，为了内容表达更明确，将“微信登录”字体放大了。

    从这两个页面开始，乐帝开始了PC端页面开发的工作，这也正是一个前端开发工程师基本的技能。本单位要求兼容IE8、9、10、chrome、firefox。转移到PC端开发，页面上的内容会变得复杂，还要考虑到浏览器兼容性，很多比较先进的标准都需要避免使用。

    (1).首先要处理的是居中布局定宽的问题，电脑屏幕尺寸的变化要远大于移动端尺寸变化，那么首要解决就是定宽和居中。

.login-outsideWrapper{
	position: relative;
	top:0px;
	width:960px;
	margin:0 auto;
}

• 将其设置成定宽960px
• 同时用margin属性构造居中
• 同时设置一个position属性，但不移动，为的是使内部内容绝对位移都是相对于这个外层包裹类，而不是body元素的。

   通过以上三点，为整个页面的构建打下了基础。

   (2).下面看一个经常遇到的问题：

<div class="login-header">
      <div class="login-logo">
        <img src="100003_medias_201464_beisenlogo.png">
      </div>
      <div class="login-rightItem">
        <span><a href="#">招聘首页</a></span>
        <em class="login-itemBorder">|</em>
        <span><a href="#">登录</a></span>
        <em class="login-itemBorder">|</em>
        <span><a href="#">注册</a></span>
      </div>
      <div class="login-clear"></div>
    </div>

.login-rightItem{
	width: 400px;
	<span style="color:#ff0000;">float: right;</span>
	font-size: 12px;
	line-height: 80px;
	margin-right: 65px;
	text-align: right;
}

<div style="clear:both;"></div>

(3).绝对定位

    构建了以上内容，当构建如果内容靠相对定位（relative）解决，那么相对位移只是视觉上的假象，在页面上还是会占据相应区域，致使对于不同浏览器会出现不同的位移差。这里乐帝采取绝对定位（absolute）来确定构建页面。

.login-outerWrapper{
	<span style="color:#ff0000;">position: absolute;</span>
	top:100px;
	<span style="color:#ff0000;">left:50%;
	width: 513px;
	margin-left:-326px;
	padding: 30px 70px 30px;</span>
	border: 1px solid #c5cace;
	border-radius: 1px;
	background-color: #fff;
}

   （3）.前景图还是后景图
    让很多前端同仁纠结的在于，页面开发完还没完，兼容性测试经得起考验才会避免加班。而乐帝最开始开发注册页面时，涉及到背景图采用了css3的新属性background-size:cover。一拿给IE8检验，就露馅了。IE8根本不支持，这里同事给的建议是采用前景图构建背景，即通过绝对位移（absolute）将表单内容，移到img标签构造的前景图上，这样就能保证了很好地兼容IE8。

    这里学会了兼容性测试一个非常重要的技巧，那就是看一个标签是否起作用，查看浏览器响应标签是否有显示即可，乐帝以后开发就可以尽情采取前景图来构造背景了，但从web标准上来说，这不得不说是一个委曲求全的方案。

   乐帝目前所在项目组可谓PC、移动端都要抓。而公司当初放弃原生app的原因在于原生app固有缺陷：

• app过多用户信息过载，致使用户很少去用app
• app更新困难，特别是HR客户很多都是科技小白

   于是乎web的优势就显现出来了，轻量、服务器修改，立马可显示更新。公司战略在微信同开发移动版。而做出来的移动版页面由于手机屏幕尺寸不同，会导致图片比例失真，影响用户体验。

   乐帝采取了一个短小精悍的解决方案。通过同比例拉伸图片到屏幕尺寸，多出轮播尺寸的图片部分则会被隐藏掉。当然这种方案的问题在于可能用户上传的关键内容被隐藏，不过产品会对客户上传图片进行尺寸要求，也就不会存在这些问题了。

   代码如下：

$(window).load(function()
{
  Show();
});

function Show()
{
    var wrapWidth = ($("#wrapper").css('width'));
    var wrapHeight = ($("#wrapper").css('height'));
    var picHeight = ($("#bgImage").css('height'));
    var picWidth = ($("#bgImage").css('width'));
    var d1 = parseFloat(wrapWidth)/parseFloat(picWidth);
    var d2 = parseFloat(wrapHeight)/parseFloat(picHeight);
    if(d1<d2){
      with(document.documentElement) //为语句设置默认对象
    {
      $("#bgImage").css('width',parseInt(d2*parseInt(picWidth))+"px");
      $("#bgImage").css('height',wrapHeight);
    };
    }else{
      with(document.documentElement) 
    {
      $("#bgImage").css('width',wrapWidth);
      $("#bgImage").css('height',parseInt(d1*parseInt(picHeight))+"px");
    };

    }//比较两个放大的比例，根据放大较大即填充满div慢的同比例放大
}//在图片载入前就对图片处理，而不走轮播效果

（三）为站点添加百度统计

  根据要求有自动安装和手动安装两种方法，但考虑到开发和运维职权分立，乐帝采用教程，找到了项目中所有页面都会引用的页脚文件，将生成的脚本片段加入其中，即可完成安装。

（四）小小的思绪

   目前的实习单位，所有用到的工具都是对开源项目及现有代码的整合优化，“不重复造轮子”，大大提高了开发效率，你没必要为了一个输入框开发自己的文本编辑器，很多问题网上都会有成熟的解决方案或开源软件，很多时候，界定问题比解决方案更重要。

开源的意义

原文：http://blog.csdn.net/yingyiledi/article/details/39120211