ios客户端发现_动画屋活动获奖展示和获奖模块开发总结

   最近在看《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框架书写。

    由于华为爱奇艺手机活动项目还没有上线。这里就不介绍开发情况了。这里特别感谢一下斌哥，斌哥作为资深程序员，能对我耐心指导规范化编程，解决我的一些想不通的问题，非常感激。

ios客户端发现_动画屋活动获奖展示和获奖模块开发总结