ios客户端发现_动画屋后期页面重构与悬浮评论分享模块开发项目总结

         从“看世界杯送流量”项目，遇到响应式布局问题之后，专门钻研了这方面专业的书籍，同时阅读了相关文章。响应式布局简单的说就是使开发的页面在不同设备上都有友好的效果。而最开始“暑期动画屋”的项目，当时并没有采用响应式布局，虽然ipad上可用，其他设备则会有显示问题。这也暴露了，目前所在移动业务事业部前端的问题：

   1.考虑到响应式布局在不同设备上，UI设计师只给了一套UI原型图，而在不同设备上的显示只是根据前端工程师的理解或个人偏好来完成布局。从产品经理的角度以及测试的角度，也并没有对此有极致的要求，基本功能满足即可。这一点需要与UI沟通。

   2.从移动化大趋势来考虑，公司设立移动业务事业部方向正确，在执行细节问题上并没有“移动化”。前端工程师的测试机仅限于自己的手机或者产品经理的ipad或iphone，而具体爱奇艺用户分布并没有数据来支撑，以至于在产品面向ipad或者产品面向iphone上摇摆不定。所以开发前，搞清楚目标用户是哪些，申请足够的测试机。

   从六个月后，重构的角度看以上两个问题，第一个问题是不成立的，原型图是展现场景的2倍构建的，采用PS测量将所有数据除以2即为需要展现的大小。UI设计师还是很专业的。第二个问题，貌似HTML5兴起的太突然，大部分公司给前端工程师都没有足够的机型支持度。

  乐帝对项目进行中页面进行了重构。下载地址为：http://download.csdn.net/detail/yingyiledi/8292205

  重构效果图：

项目介绍

（一）．“暑期动画屋活动”中后期页面的开发

          本项目是对之前没有适配，项目的重构。以前曾有文章指出，看自己的半年前的代码无法阅读。而这个项目与自己之前写代码相隔不久，而从重构的角度考虑，并不能轻松的移植。于是采取了比较极端的重构方法：重写。这次重写也是应用响应式布局技巧、独立适配的第一个项目。

   与之前重构项目类似，当初在爱奇艺实习对css的掌握很初级。此次重构主要对项目中涉及到的图片和按钮，都通过背景图来实现。并设置背景尺寸，来保证尺寸上匹配。

.header {
    width: 100%;
    height: 362px;
    background: url(background.jpg) no-repeat 0 0;
    background-size: 100% 362px;
    position: relative;
}

       按钮通过设置父元素相对定位，按钮元素设置绝对定位，构造与父元素的相对关系。

.button {
    display: block;
    width: 167px;
    height: 52px;
    background: url(download.png) no-repeat 0 0;
    background-size: 157px 52px;
    position: absolute;
    top: 228px;
    right: 100px;
}

   对于行内元素span不要设置换行和空格，否则会有间隙。

<div class="content">
            <div class="title-content">获奖结果统计中…</div>
            <div class="time-content">
                2014年6月16日<span class="small-content">公布获奖名单</span>
            </div>
        </div>

                           （二）．活动中“分享评论模块”的开发

   1.项目的需求

   开发一个可以应用到各种活动的分享和评论的模块，适用于手机，不用于平板显示。

   效果图：

   重构后地址如下：http://download.csdn.net/detail/yingyiledi/8293395

   重构对于结构与样式上的修改，仍然将图片设置为背景图，并采用padding-left构造与文字间距。

.share-comment-module .button {
    display: inline-block;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    background-size: 20px;
    padding-left: 28px;
    margin-top: 15px;
}
.share {
    background: url(../images/share-btn.png) no-repeat 0 0;
}

  采用浮动构造出两个块级元素左右分割。

.share-comment-module {
    float: left;
    width: 49%;
    text-align: center;
}

   2.结构非常简单，主要采取fixed定位并设置z-index保证在最上层即可。

.share-comment-module-container {
    color: #FFF;
    width: 100%;
    height: 50px;
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    bottom: 0;
    right:0;
    left:0;
    z-index:9999;
}

  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属性探测设备类型，从而跳转不同的页面。

  主要交互函数如下：

function getCommentNum() {
        $.get("http://api.t.iqiyi.com/qx_api/comment/get_video_comments", {
                qitanid: 8000164,
                qitan_comment_type: 5,
                sort: "add_time",
                need_total: 1
            },
            function(data) {
                commentNum = data["data"]["count"];
                $(".comment-num").html("（" + commentNum + "）");
            }, "json");
    }

    function bindEvent() {
        $(".share").mousedown(function() {
            $(".share").css({
                "color": "#85c210",
                "background-image": 'url(images/share-btn-active.png)'
            });
            if (agentID.indexOf("iphone") >= 0) {
                window.location.href = "iqiyi://share?p=wx&t=1&d=%7B%22text%22%3A%22%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%22%2C%22url%22%3A%22http%3A%2F%2Fwww.baidu.com%22%2C%22pic%22%3A%22http%3A%2F%2Favatar.csdn.net%2FC%2FF%2F8%2F1_volcan1987.jpg%22%7D";
            }
            if (agentID.indexOf("android") >= 0) {
                callJavaMethod(this);

            }

        }).mouseup(function() {
            $(".share").css({
                "color": "#FFF",
                "background-image": 'url(images/share-btn.png)'
            });
        });
        // 字体颜色修改、背景图修改、跳转
        $(".comment").mousedown(function() {
            $(".comment").css({
                "color": "#85c210",
                "background-image": 'url(images/review-btn-active.png)'
            });
            if (agentID.indexOf("iphone") >= 0) {
                window.location.href = "iqiyi-phone://com.qiyi.video/res?pid=9&aid=&tvid=&url=sdfasdf&ftype=1&subtype=22&qitanid=8000164&qitan_comment_type=5";
            }
            if (agentID.indexOf("android") >= 0) {
                window.location.href = "iqiyi-phone://com.qiyi.video/res?pid=9&aid=&tvid=&url=sdfasdf&ftype=1&subtype=2&qitanid=8000164&qitan_comment_type=5";
            }
        }).mouseup(function() {
            $(".comment").css({
                "color": "#FFF",
                "background-image": 'url(images/review-btn.png)'
            });
        });
    }