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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了注册绑定页面及微信二维码登陆页面开发项目总结_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6249字，纯文字阅读大概需要9分钟。

内容图文

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

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

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

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

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

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

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

请看开发效果图：

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

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

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

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

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

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

      
              
      
        招聘首页        |        登录        |        注册      
      
    

.login-rightItem{	width: 400px;	float: right;	font-size: 12px;	line-height: 80px;	margin-right: 65px;	text-align: right;}

(3).绝对定位

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

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

（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(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慢的同比例放大}//在图片载入前就对图片处理，而不走轮播效果

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

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

（四）小小的思绪

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

开源的意义

内容总结

以上是互联网集市为您收集整理的注册绑定页面及微信二维码登陆页面开发项目总结_html/css_WEB-ITnose全部内容，希望文章能够帮你解决注册绑定页面及微信二维码登陆页面开发项目总结_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端