ios用戶端發現_動畫屋活動獲獎展示和獲獎模組開發總結

標籤：style   blog   http   color   java   os   strong   io   

   最近在看《web2.0策略指南》，開篇即對flicker的DVD租賃業務模型進行分析，目前看來這樣的商業模型仍然很強大，而自去年紙牌屋後，flicker又引領了一股自有內容的熱潮，湖南衛視未來如爸爸去哪兒、快樂大本營等節目、央視世界盃獨播、愛奇藝的曉說，劉春加盟後未可知的big thing的節目。熱潮後，是人為對影音入口的切割，這個入口漸次增多，對使用者和對各方入口都不太算是好事，影音入口又進入了戰國時代，不要多久這種模式的風險就會顯現，只靠自有內容留住使用者還遠遠不是終點，或許國內的入口可以繼續看看flicker下一步怎麼走。

   樂帝實習單位工位旁坐著一位功能客服妹子，每日工作內容按照使用者投訴，與使用者溝通，對bug進行，反饋到技術那邊，技術那邊能否解決都再給使用者進行回訪，說明原因或者提醒使用者更新版本。樂帝所從事的工作是移動端發現活動頁面的活動頁面的開發工作，每周都會有活動上線，回饋VIP使用者、普通使用者以及特定合作電訊廠商的使用者。且不論客服最終報障反饋結果好壞、活動策劃執行的好壞。每天、每日這樣積累反饋，你從心底還是對這樣的公司有正面評價的，因為他們重視使用者、不斷改進業務品質、提升使用者體驗。這是自製內容之外的突圍方法。

   書歸正傳，樂帝這周主要做的有三塊：

• 動畫屋活動獲獎展示頁面
• 新活動華為愛奇藝手機活動兩個頁面
• 獲獎展示模組開發
• 
  

項目介紹

（一）．動畫屋活動獲獎展示頁面的開發

    動畫屋這個活動項目，是樂帝來到實習單位，單獨完成的第一個項目了，從活動開始、獲獎統計、到如今獲獎展示都是樂帝獨立開發並測試完成。由於之前結束頁面已經開發完成，產品那邊給出獲獎結果後，樂帝只需按照產品提供的資料尋找出獲獎使用者的使用者名稱和頭像進行格式化展示即可。樂帝這裡自己寫了兩個取出目標對象的方法。

function userObject(data,userUid){    var userObj = [];    for(j = 0;j <userUid.length;j++){    userObj[j]=searchUid(data,userUid[j]);    }    return userObj;}//通過輸入uid數組，返回各自對應的評論對象數組

function searchUid(data,uid){var comments = data['data']['comments'];var len = comments.length;for(i = 0;i < len;i++){if(comments[i]['userInfo']['uid'] == uid){return comments[i]['userInfo'];}}}//擷取對應uid下的評論對象

    首先樂帝獎獲獎使用者id儲存到一個數組中。然後調用以上函數，將通過ajax取得評論json對象，並在對象中尋找使用者id與獲獎id相同的使用者資訊對象，儲存到目標數組中，再調用評論模組進行展示。

   這個項目重點加深了樂帝對緩衝的瞭解。並形成了進一步的發布、測試解決方案。由於ios系統本身不帶緩衝清理。伺服器也會對舊內容有緩衝，新發布內容可能不能立即展現。

 所以線上修改頁面需要從四方面著手看是否起作用。

• 卸載app重裝
• 關閉app進程
• 伺服器端清理緩衝
• 用alert函數查看是否有即時修改

   通過以上四個方法，基本能保證修改能夠生效。

   另外我瞭解到這個活動是專門針對ipad的活動，所以之前調節其他手機適配沒有必要，以後的活動要注意詢問，活動適用範圍。從斌哥那瞭解到，他做適配只對iphone和ipad適配，這次樂帝專門在調節適配的時候記錄了各種適配手機的解析度，基本處於320-480之間，iphone處於320-360並且這也是主流機型所處範圍，ipad解析度在1024以上，正常引用adapter即可，無需再單獨調節。從此看只調iphone和ipad是很有道理的。

（二）．獲獎展示模組的開發

    開發過程中，特別是目前移動端活動頁面的開發，做久了會發現頁面的模式非常固定，可以省去編寫底層代碼，而直接模組化“拿來主義”，只需要做點定位工作。獲獎展示這個模組經常用到，於是單獨拎出來，寫了一個函數。為了防止命名衝突，這裡在命名上做了一些特定的格式。

function h5_winnerArea( winnerObject,total){//參數為數組對象與需要展示的條數if(!(arrayObject instanceof Array)){return};var viewport = $(".viewport")[0];var length =  winnerObject.length;//獲獎對象長度        winnerObject = winnerObject.slice(0,total);//截取對象數組數目用來展示    var h5_winner = $("<div class='h5_winner'></div>");        h5_winner.appendTo(viewport);//選取第一個viewport，追加此段獲獎代碼到其後    var h5_winnerUser = $("<div class='h5_winnerUser'><span>一共有</span><span>"+length+"</span><span>名使用者中獎</span></div>");        h5_winnerUser.appendTo(h5_winner);var h5_winnerArea = $("<div></div>");h5_winnerArea.attr("class","h5_winnerArea");h5_winnerArea.appendTo(h5_winner);var h5_winnerArea_list = $("<div></div>");h5_winnerArea_list.attr("class","h5_winnerArea_list");h5_winnerArea.append(h5_winnerArea_list);var h5_winnerArea_header = $("<div></div>");    h5_winnerArea_header.attr("class","h5_winnerArea_header");    h5_winnerArea_list.append(h5_winnerArea_header);var h2 = $("<h2>最近獲獎使用者</h2>");    h5_winnerArea_header.append(h2);var h5_winnerArea_item = $("<div></div>");    h5_winnerArea_item.attr("class","h5_winnerArea_item");    h5_winnerArea_list.append(h5_winnerArea_item);var ul = $("<ul></ul>");    h5_winnerArea_item.append(ul);    //迴圈對象數組用于格式化展示內容$.each(winnerObject,function(i,n){var li = $("<li></li>");    ul.append(li);var h5_winnerArea_item_icon = $("<div></div>");    h5_winnerArea_item_icon.attr("class","h5_winnerArea_item_icon");    li.append(h5_winnerArea_item_icon);var img = $("<img>");    img.attr("src",n.icon);    h5_winnerArea_item_icon.append(img);var h5_winnerArea_item_name = $("<div></div>");    h5_winnerArea_item_name.html(n.nickName);    h5_winnerArea_item_name.attr("class","h5_winnerArea_item_name");    h5_winnerArea_item_name.addClass("h5_winnerArea_textOverflow");    li.append(h5_winnerArea_item_name);var h5_winnerArea_item_prize = $("<div></div>");    h5_winnerArea_item_prize.html(n.rewardName);    h5_winnerArea_item_prize.attr("class","h5_winnerArea_item_prize");    h5_winnerArea_item_prize.addClass("h5_winnerArea_textOverflow");    li.append(h5_winnerArea_item_prize);});}

  對應css樣式：

.h5_winnerUser {text-align: center;margin-top: 40px;font-size: 24px;font-weight: bold;color: #542004;width: 100%;}.h5_winnerArea {margin-top: 30px;width: 100%;}.h5_winnerArea_list {background-color: #ffffff;margin: 0 10px 100px 10px;border-radius: 6px;}.h5_winnerArea_header {padding: 10px 15px 0 15px;}.h5_winnerArea_header h2 {font-size: 24px;font-weight: bold;color: #4d4d4d;border-bottom: 1px solid #e7e7e7;padding-bottom: 10px;}.h5_winnerArea_item ul,.h5_winnerArea_item li {list-style:none}.h5_winnerArea_textOverflow {overflow: hidden;/*溢出元素隱藏*/text-overflow: ellipsis;/*溢出元素隱藏顯示‘…’*/white-space: nowrap;/*不換行，此三個都是對文字的處理*/}.h5_winnerArea_item ul {padding: 0 15px;}.h5_winnerArea_item li {border-bottom: 1px solid #e7e7e7;overflow: hidden;padding: 5px 0 5px 0;line-height: 60px;height: 60px;} .h5_winnerArea_item_icon {float: left;width: 40px;margin-right: 20px;}.h5_winnerArea_item_icon img {border-radius: 20px;width: 40px;height: 40px;} .h5_winnerArea_item_name {float: left;font-size: 24px;font-weight: bold;color: #000000;}.h5_winnerArea_item_prize {float: right;text-align: right;display: inline;font-size: 20px;color: #4d4d4d;}

           這個模組可以根據需要隨時修改內容，從這個模組開發的過程中，從斌哥那裡瞭解到原生代碼針對不同瀏覽器會出現不相容的問題，所以模組盡量採用了jquery架構書寫。

    由於華為愛奇藝手機活動項目還沒有上線。這裡就不介紹開發情況了。這裡特別感謝一下斌哥，斌哥作為資深程式員，能對我耐心指導正常化編程，解決我的一些想不通的問題，非常感激。