登録バインディングページとWeChat QRコードログインページ開発概要 project_html/css_WEB-ITnose

来帝

は、おそらく前回の面接かイキイー インターンシップの履歴書を持って新しいインターンシップ ユニットに来て、プロジェクト チームによってすぐに「責任者」になりました。これまでのように、入社すればOKというルーチンではなく、まずは建築家と一緒に2週間研修し、具体的な業務については聞かずにフレームワークの勉強に集中してください。 Leti はフレームワークのページに割り当てられたとき、まだ数日しかフレームワークを扱うことができませんでした。同僚が言ったように、学習はサンプルを作成し、コードを確認しながら段階的に行う必要があります。十分ではありません。

現在、この会社は「Out of the Software Workshop」の著者であるA Zhu氏の業界に似ており、中規模および大規模企業に人材管理ソリューションを提供するソフトウェア会社です。 。このタイプの企業は、アウトソーシング企業よりもレベルが高いですが、自動運転の余地が大きいインターネット企業とは異なり、アウトソーシング企業の特徴が多くあります。業界が疲弊しているかどうかは、その業界が自らの需要を推進しているのか、それとも顧客に主導されて納期を守ろうとしているのか、常に受動的に対応し圧倒されているのかによって決まります。

会社の「アウトソーシング」の性質上、開発プロセスは前回のインターンシップ部門よりもはるかに標準化され、高度なものになっていますが、従業員の流動性も高くなります。 Le Di 氏は現在オフィスにおり、彼の向かいには技術開発を担当するプロジェクト マネージャーが座っています。プロジェクトの進捗状況と製品を追跡し、建設期限をめぐって争うことに加えて、残りの毎日の仕事はインタビュー、インタビュー、インタビューです。プロジェクトマネージャーが面接官のレベルについて文句を言うのを見て、彼はさまざまな方法で人々を無視し始めました。レ・ディ氏は、インタビュー中の欺瞞のレベルが一定のレベルに達したと言わざるを得なかった。

この状況は少しおかしいように思えます。専門的な人材管理ソフトウェアを開発している企業は、適切な人材を採用できないために問題を抱えているでしょう。本当に問題を解決できるソフトウェアがどれだけあるでしょうか。

Ledi が元々 Tencent ではなくこの会社を選んだのは、この会社が Ledi のテクノロジーをより良く改善できると信じていたからです。過去 2 週間で、Le Di 氏の職務要件に関する当初の推測が検証されました。フロントエンドチームはビジネスチームとアーキテクチャチームに分かれており、ビジネスチームは基本的に入社1年程度の同僚で構成されており、アーキテクチャチームはしゃがみ虎、隠れ竜です。

このような専門的なフロントエンド開発チームに所属することで、散発的な問題を解決するために Baidu に依存するだけでなく、問題が発生した場合にいつでも短い知識ベースを使用してアドバイスを求めることができます。 , 問題を解決するためのより良い方法と、より迅速な成長。ドライなことについて話しましょう。

(1) 登録バインドページと WeChat QR コードログインページの開発

プロジェクトの背景: プロトタイプ図と指定されたページの形式に従って、登録、バインド、QR コード スキャン ログイン ページを開発しました。

開発レンダリングをご覧ください:

登録レンダリングとバインドレンダリングはテキストが異なるだけなので、Leti がここに投稿した画像は 1 枚だけです。WeChat ログイン ページのレンダリングです。Leti のスタイルWeChat Web版を採用している点は、内容をよりわかりやすく表現するために「WeChatログイン」のフォントを大きくしている点です。

この 2 つのページから、Leti はフロントエンド開発エンジニアの基礎スキルでもある PC ページ開発の作業を開始しました。本機はIE8、9、10、chrome、firefoxとの互換性が必要です。 PC の開発に移行すると、ページのコンテンツはより複雑になり、ブラウザの互換性も考慮する必要があります。

(1)。最初に対処する必要があるのは、中央揃えのレイアウトの固定幅です。コンピューターの画面サイズの変化はモバイル サイズの変更よりもはるかに大きいため、最初の解決策は幅と中央を固定することです。 。

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

Leti のここのクラスは、すべてのページ コンテンツをラップするクラスです。

960pxの固定幅に設定します

同時にmargin属性を使用して中心を構築します

同時にposition属性を設定しますが、移動しないでください、内部コンテンツの絶対変位が相対的なものになるように、この外側のラッピング クラスは body 要素ではありません。

以上の3点により、ページ全体の構築の基礎が整いました。

(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 には固定幅がなく、内側の 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固有缺陷：

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

    以上代码中用到的思路受启发于这里，这里用到了with作用于的内容，这里指出了documentElement 和 body的区别，即html根节点和dom树根节点body的区别。

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

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

（四）小小的思绪

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

开源的意义