ios用戶端發現_動畫屋後期頁面重構與懸浮評論分享模組開發項目總結

標籤：android   style   blog   http   java   color   

         從“看世界盃送流量”項目，遇到響應式布局問題之後，專門鑽研了這方面專業的書籍，同時閱讀了相關文章。響應式布局簡單的說就是使開發的頁面在不同裝置上都有友好的效果。而最開始“暑期動畫屋”的項目，當時並沒有採用響應式布局，雖然ipad上可用，其他裝置則會有顯示問題。這也暴露了，目前所在移動業務事業部前端的問題：

   1.考慮到響應式布局在不同裝置上，UI設計師只給了一套UI原型圖，而在不同裝置上的顯示只是根據前端工程師的理解或個人偏好來完成布局。從產品經理的角度以及測試的角度，也並沒有對此有極致的要求，準系統滿足即可。這一點需要與UI溝通。

   2.從移動化大趨勢來考慮，公司設立移動業務事業部方向正確，在執行細節問題上並沒有“移動化”。前端工程師的測試機僅限於自己的手機或者產品經理的ipad或iphone，而具體愛奇藝使用者分布並沒有資料來支撐，以至於在產品面向ipad或者產品面向iphone上搖擺不定。所以開發前，搞清楚目標使用者是哪些，申請足夠的測試機。

  重構：

項目介紹

（一）．“暑期動畫屋活動”中後期頁面的開發

    本項目是對之前沒有適配，項目的重構。以前曾有文章指出，看自己的半年前的代碼無法閱讀。而這個項目與自己之前寫代碼相隔不久，而從重構的角度考慮，並不能輕鬆的移植。於是採取了比較極端的重構方法：重寫。這次重寫也是應用響應式布局技巧、獨立適配的第一個項目。

    整個布局架構寫好後，在寫樣式表時，主要需要考慮以下幾點：

    1.由於此項目的架構的外層構造都用div標籤而且流線型構造。故採取了如下代碼：

div{width:100%;}

   用以保證，每個div都根據媒體查詢設定的可見地區的寬度填充滿可視地區。此處沒有固定寬度，是在媒體查詢屬性中，根據劃分媒介不同設定了不同可是寬度基礎上進行的。

    2.項目中目前處理背景圖並不能得心應手，故將背景圖設定成img標籤，給予“bg”的id。此處對圖片的處理也值得以後項目借鑒。

#bg img{width:100%;}

這裡將背景圖，延伸到整個viewport寬度地區，從而滿足響應式需求。

相應的下載按鈕則是從絕對位置角度設定具體位置，大小則是根據視窗大小設定了一個百分比。

#download img{width:25%;position:absolute;top:60%;left:70%;}

從響應式角度考慮，不同機型，寬度都是按照百分比設定的，故絕對位置left參數不會變，只需根據不同機型，調整top的值即可。

   3.設定好圖片和div後，剩下的就是按照不同機型對字型大小和按鈕top參數的調整適配。

/*ipad*/@media only screen and (max-width: 1024px) and (min-width: 710px){#download img{top:44%;}}/*iphone4*/@media only screen and (max-width: 360px) and (min-height: 480px) {#download img{top:22%;}#font1{font-size: 38px}#font2{font-size: 26px}#font3{font-size: 20px}}/*iphone5*/@media only screen and (max-width: 320px) and (min-height: 568px) {#download img{top:19%;}#font1{font-size: 38px}#font2{font-size: 26px}#font3{font-size: 20px}}

    整個項目重構完成了。整個響應式設計基本要領即是對div或者其他布局元素百分比的設定，圖片的width設定，以及根據不同配置調整位置或者字型大小，使頁面可讀。後期頁面的開發在這個中期頁面的基礎上，對獲獎使用者的格式進行了處理，其他直接套用此項目即可。

                           （二）．活動中“分享評論模組”的開發

如下：

   1.項目的需求

   開發一個可以應用到各種活動的分享和評論的模組，適用於手機，不用於平板顯示。

   2.結構非常簡單，主要新的地方在樣式上。

.share_floatShare{width: 100%;margin-left:auto;margin-right: auto;height:100px;position:fixed;bottom:0;z-index:9999;opacity:0.5;background-color:#000000;}

   以上需要注意的主要是position的fixed定位，定位到頁面底部，並通過設定z-index保證，真箇模組在頁面的最上層。同時對opacity屬性的設定，構造了半透明化的效果。

  3.互動方面主要處理兩方面問題：

  進入頁面，從後台取出評論數返給右側按鈕。

  單擊左右按鈕，調取相應的介面，這裡面涉及到對安卓和ios裝置的檢測。代碼如下：

  

var deviceAgent = navigator.userAgent.toLowerCase();  var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);if(agentID.indexOf("iphone")>=0){          }    if(agentID.indexOf("android")>=0){}

   這裡採用userAgent屬性探測裝置類型，從而跳轉不同的頁面。

  4.模組化

  既然要模組化就要涉及模組引用的便利性和穩定性。

  （1）便利性做的主要是用js原生代碼產生html結構，並產生link標籤引入相應的css檔案。即最後模組的引入只需在目標頁面中插入一個js指令碼塊即可。

  （2）穩定性則主要涉及引入css檔案與當前頁面不會引發命名衝突，這裡將涉及到的id與class都用share_首碼進行了處理，刪除了多餘內容。