用戶端發現_觀影團活動頁面開發與用戶端新版跳轉測試頁面開發項目總結，跳轉開發項目

用戶端發現_觀影團活動頁面開發與用戶端新版跳轉測試頁面開發項目總結，跳轉開發項目

   這一周過的是我理想的實習狀態，手頭有項目則忙項目，沒項目則提高基礎技能。那麼下面來看看這周做的活動頁面效果吧。

項目介紹

（一）．觀影團活動頁面的開發

    本項目頁面的開發基本都是用之前用過的技術，不同之處在於樂帝之前的開發處於懵懂狀態，現在回頭看還是有些許的提高，對頁面每一行代碼都知道來龍去脈，彈出窗、對齊、置中布局都從本周閱讀《前端開發修鍊之道》有了更深層次的認識。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開發後端常用到的邏輯代碼，能為今年網站的計劃奠定技術儲備的基礎。
    平常處理開發頁面由於面向移動端，沒有考慮到瀏覽器安全色的問題，上述前端這本書，也詳細的介紹了這些內容，首先看看相容的利器吧。
    IE瀏覽器情況下的適配多個IE版本的方法：

    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，另外還有線上的工具。