注册绑定页面及微信二维码登陆页面开发项目总结_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:58:251943浏览
乐帝来到新的实习单位，也许是之前面试或者在爱奇艺实习的履历，很快被项目组“委以重任”。而不是老套路刚入职，先在架构师那培训两周，专心钻研框架，不问具体业务。乐帝只有几天看框架的时间，当被分配给框架页面时，还是不能得心应手，正如同事所说，学习还得按部就班，写写例子，看代码是不行的。
目前这家公司类似《走出软件作坊》作者阿朱所在行业，是面向中大型企业，提供人才管理解决方案的软件公司，时髦的词叫SAAS。这类公司层次要比外包公司高，却还有很多外包公司的特点，不像互联网公司有很大的自驱动空间。而一个行业劳累与否，要看这个行业是自驱动需求，还是被客户赶着催工期，总是被动响应，应接不暇。
由于公司有“外包”性质，也就不免外包式的行事方式，开发流程上比上次实习单位要规范先进不少，但对员工流动性也较高。乐帝目前所在办公工位，对面坐着项目经理，统管技术开发。每日工作除了跟踪项目进度和产品进行关于工期的拉锯战，剩下的就是面试，面试，还是面试。看到项目经理吐槽面试者的水平，各种刷人。乐帝不得不说，自己当初面试，忽悠的水平还是到了一定境界。
这样的情况就显得有些滑稽，做专业人才管理软件的公司，会因为招不到合适的人而困扰，又有多少软件能够真正解决问题呢？
乐帝当初选择这家公司而不是腾讯，看重这家公司能给乐帝技术上的提升要好很多。这两周里，验证了当初乐帝在任职要求中的推测。前端团队分为业务团队和架构团队，业务团队基本由公司入职一年左右的同事构成，架构团队则卧虎藏龙。
处于这样专业的前端开发团队中，不再只依靠百度来解决零星问题，而是有了一个广泛的知识面或者说知识库，遇到的问题，总是可以请教用更短、更优的方式来解决，自身成长也更加快速。下面来谈点干货。
（一）注册绑定页面及微信二维码登陆页面开发
项目背景：根据原型图及指定页面的格式，开发出注册、绑定和二维码扫描登陆页面。
请看开发效果图：
由于注册和绑定的效果图只有文字区别，这里乐帝只贴了一张图，微信登录页的效果图，乐帝采用了微信网页版的样式，不同的是，为了内容表达更明确，将“微信登录”字体放大了。
从这两个页面开始，乐帝开始了PC端页面开发的工作，这也正是一个前端开发工程师基本的技能。本单位要求兼容IE8、9、10、chrome、firefox。转移到PC端开发，页面上的内容会变得复杂，还要考虑到浏览器兼容性，很多比较先进的标准都需要避免使用。
(1).首先要处理的是居中布局定宽的问题，电脑屏幕尺寸的变化要远大于移动端尺寸变化，那么首要解决就是定宽和居中。
.login-outsideWrapper{ position: relative; top:0px; width:960px; margin:0 auto;} 乐帝这里的类是包裹所有页面内容的类。 通过以上三点，为整个页面的构建打下了基础。
(2).下面看一个经常遇到的问题：
<div class="login-header"> <div class="login-logo"> <img src="100003_medias_201464_beisenlogo.png" alt="注册绑定页面及微信二维码登陆页面开发项目总结_html/css_WEB-ITnose" > </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="max-width:90%">float: right;</span> font-size: 12px; line-height: 80px; margin-right: 65px; text-align: right;} 这里问题出在外层div没有定宽，内部div采用了float属性，内部div内容可能超出外层div宽度，造成显示问题，这里的解决方案，正如链接所指出，内层div同级添加一条html代码即可。
<div style="clear:both;"></div>上述代码中text-align: right;保证了表单字体右对齐。
(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;} 注册这个表单类，是通过绝对定位定位到指定位置的，同时代码中还包含了居中的问题。由于整个类是定宽的同时左右内边距也可以计算。在父级元素中居中，仅需要此外层元素右移50%（相对父元素），再相对自己宽度（内容宽+左右内边距）左移50%即可实现居中。 （3）.前景图还是后景图
让很多前端同仁纠结的在于，页面开发完还没完，兼容性测试经得起考验才会避免加班。而乐帝最开始开发注册页面时，涉及到背景图采用了css3的新属性background-size:cover。一拿给IE8检验，就露馅了。IE8根本不支持，这里同事给的建议是采用前景图构建背景，即通过绝对位移（absolute）将表单内容，移到img标签构造的前景图上，这样就能保证了很好地兼容IE8。
这里学会了兼容性测试一个非常重要的技巧，那就是看一个标签是否起作用，查看浏览器响应标签是否有显示即可，乐帝以后开发就可以尽情采取前景图来构造背景了，但从web标准上来说，这不得不说是一个委曲求全的方案。
（二）移动端图片轮播图片等比例展示处理
乐帝目前所在项目组可谓PC、移动端都要抓。而公司当初放弃原生app的原因在于原生app固有缺陷：
于是乎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> <br> <strong>以上代码中用到的思路受启发于这里，这里用到了with作用于的内容，这里指出了documentElement 和 body的区别，即html根节点和dom树根节点body的区别。</strong> <p></p> <p><strong>（三）为站点添加百度统计</strong></p> <p> <strong> 根据要求有自动安装和手动安装两种方法，但考虑到开发和运维职权分立，乐帝采用教程，找到了项目中所有页面都会引用的页脚文件，将生成的脚本片段加入其中，即可完成安装。</strong></p> <p><strong>（四）小小的思绪</strong></p> <p><strong> 目前的实习单位，所有用到的工具都是对开源项目及现有代码的整合优化，“不重复造轮子”，大大提高了开发效率，你没必要为了一个输入框开发自己的文本编辑器，很多问题网上都会有成熟的解决方案或开源软件，很多时候，界定问题比解决方案更重要。</strong></p> <p><strong><br> </strong></p> <p><strong>开源的意义</strong></p> </d2>