ios客户端发现_世界杯送流量活动项目总结

世界杯如火如荼的进行，视频网站类似于门户网站，需要快速根据外部环境更新内容。产品经理需要策划活动，并安排实施。这个活动就是在这样背景下产生的，爱奇艺与运营商合作，实现双赢。爱奇艺可以通过运营商向海量用户发送短信的方式，提高用户数，运营商通过爱奇艺视频平台给用户更多种多样的福利，提高用户黏性。

总的来说：运营商有用户，视频网站有内容。用户需要内容，有内容的需要用户，有用户的需要满足用户内容的需求。两者优点突出、需求明显合作水到渠成。另外爱奇艺将运营商作为大客户管理，保证了协同作战的机动性。

书归正传，这个“看世界杯送流量”的项目正是在运营商和爱奇艺双赢的局面下，借着世界杯的东风产生的。活动的形式用户每天看半小时视频会获得虚拟啤酒一罐，每次打开啤酒会有中流量包的机会，如果没有打开也会有个能量积攒的过程，如果能量足够多也可以获得流量包。获取流量包会跳转到手机号输入页面，而我正是负责这个页面的开发。上线界面效果。

本项目重构方向主要从引入simpleModal插件，对原有遮罩代码进行替换，simpleModal插件可以自动化设置遮罩。文档遵循jQuery插件通过设置html类与js参数设置遮罩状态，并设有回调方法。此项目并没有设置回调方法。仅是写好遮罩数据结构与样式部分，并设置默认隐藏。设置Modal方法即可自动水平垂直居中，减少了大量代码的书写。

重构后代码地址:http://download.csdn.net/detail/yingyiledi/8319317







项目介绍

（一）．“看世界杯送流量活动手机号验证开发”


本活动页面开发的主要需求：

1.内容
根据原型图可以将内容分为两块：



手机号输入框和按钮



弹出框



2.结构（HTML）：
根据分析内容构造HTML：



将上述两部分内容放入一个外层div中，每个部分内容再加div包裹，添加语义化标签。

3.样式（CSS）:


此处的样式是这次项目遇到最大的问题，前一个项目没有考虑移动端适配的问题。而这个项目暴露了这个问题，首先讲解适配的使用，其次是遮罩层的特效讲解。

适配初步

顾名思义，使得设计的内容适应不同设备屏幕尺寸。

<strong><span style="font-family:FangSong_GB2312;font-size:18px;"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"/></span></strong>

ViewPort <meta>标记用于指定用户是否可以缩放Web页面。如可以，那么最大、最小缩放比例。使用ViewPort <meta>标记还表示文档针对移动设备进行了优化。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。

上述为对页面是否可缩放的设置，接下来一个更重要的概念是媒体查询，媒体查询这个链接是对媒体查询比较详细的描述。总而言之：媒体查询是通过设置在不同媒体条件下，显示不同样式，从而达到不同的渲染效果。即针对不同设备条件，写了多份css代码，以适应不同的显示需求。由媒体查询概念的使用，催生了响应式布局这门技术，这篇链接文章是对响应式布局[b]核心内容的大体介绍。[/b]

实习单位也有自己的响应式布局css适配文件，这里看一部分代码内容：

@media only screen and (max-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:320px}
}
@media only screen and (max-width: 360px) and (min-width: 320px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:360px}
}

如上对单位给定的这个适配文件媒体查询的分析可以得出如下结论：

（1）此文件给出的媒体查询根据屏幕宽度来查询媒体，并进行不同的样式设置。

（2）这里媒体查询根据不同设备宽度设置字体的大小和可是区域的大小。同时应用此媒体查询应该将包裹所有内容的最外层div设置成viewport类。

（3）设置各个标签宽度时，除非根据不同媒体设置不同宽度，否则不能使用像素宽，而是使用百分比。即布局有两种方法①.根据不同媒体设置不同宽度
②.统一用百分比表示宽度。

<div id="viewport" class="viewport">
     </div>

上述两图为分别在chrome上模拟ipad和ipnoe上显示的效果，从css栏中可以看出，根据媒体的不同，媒体查询出相应的样式进行了渲染。

弹出窗特效

弹出窗特效的原理：

(1)弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见，display:none）。

(2)当用户执行某个动作时,我们将之前设置好的隐藏层显示在所有页面元素的最上层（将使用JS操作实现）。

(3)在弹出DIV窗口中设 置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

弹出窗实现，构造外层div，这里外层div的样式设置非常重要：

.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: none;
  height:100%;
  width:100%;
  background-color: rgba(0, 0, 0, .7);
}

这里dialog类为最外层标签下viewport类下的div，默认隐藏此标签，当脚本触发出现时，通过fixed设置为固定的界面，宽度和高度都为100%即占据全屏幕显示此div。此时用户只能与此div下内容交互，达到了弹出窗的效果。弹出窗内部布局和样式与一般情况无二。区别在于不同浏览器适配弹出框宽和高以及位置的设定上。

.dialog-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 492px;
  height: 458px;

  background-image: url(popup.png);
  background-repeat: no-repeat;
  background-size: contain;

  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

4.交互（js/jQuery）：
根据原型图判断需要实现的用户行为交互。
添加交互：


用户输入手机号提交号码判断是否为举办活动地区的电信手机号，


如果是则提交号码到后台，并弹出提示框。


否则红字显示请输入正确电信手机号。

技术实现：
（1）此项目是电信在多个省份开展活动，所以会涉及到电话号码匹配的问题：需要匹配两项数据一个是运营商是否正确，另外一个则是是否为所在活动省份。
这里产品给了一张excel表格列出了电信号码号段，excel之长无法完全匹配，于是找到个一种更方便的方法：网上有很多电话号码归属地验证的开放接口，这里选用的是淘宝的电话号码归属地接口。通过正则表达式将所有的省份都列出来，判断返回数据是否为电信号码同时也是开展活动的号码实现要求。

var validate = false;

    $.get("http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",{tel:val},
            function(data){
              pattern1 = /电信/;
              pattern2 = /(北京)|(上海)|(江苏)|(湖南)|(浙江)|(江西)|(福建)|(云南)|(贵州)|(青海)|(黑龙江)|(辽宁)|(湖北)|(甘肃)|(重庆)|(广东)|(海南)|(新疆)|(河南)/;
              if(pattern1.test(data["catName"])){
                if(pattern2.test(data["province"]))
                {
                  validate = true;
                }
           },"jsonp");//引用淘宝接口，首先对运营商进行判断，然后对省份进行判断

    
  });//提交电话号码，如果正确生成弹窗，否则重新输入，提供错误信息

（2）这里涉及到跨域访问的问题，解决方法主要是通过构造script标签的src属性值解决，可行的方法是将get方法的类型设置为jsonp。

（二）．“看世界杯送流量”宣传页

这个页面非常简单，需求仅仅是将页面放到居中位置，引入适配；添加一个下载按钮即可。

.viewport img {
	max-width: 100%;
	margin-bottom: 30px;
}

这里用到img适配时的处理方法，即设置max—width;100%即可根据媒体查询适配。

交互方面遇到了一个小bug：在确定下载按钮宽度时，是根据图片宽度确定的，而图片有个加载时间，这就可能造成第一次加载不成功，而第二次因为有缓存，可以加载成功。改进的代码。

$("img").load(function(){
    $("div").text("图像已加载");
  });

即用load函数，当图片加载完，才执行任务。



（三）．发现新功能“我的”宣传页




（四）．爸爸去哪7月第一期宣传页

这两个宣传页仅仅是需要加适配进去，可以套用自己的模板，快速完成。

本周技术心得

（1）拿到原型图力求对界面的边距、长宽、背景色、字体大小及颜色做一个整体的评估。不清楚的地方与视觉设计师沟通解决。
（2）界面的交互行为需要和交互设计师沟通清楚，理清楚交互的流程及效果。并以此作为定义类和属性的依据之一。
（3）对整个项目需要用到的技术有一个明确的估计，判断整个项目的复杂度。
（4）响应式设计宽度和边距问题，需要通过实践分析形成自己的理解。

个人提高方向

（1）首先是写代码的规范上，需要看书和实践中学习。
（2）h5标签和css3的应用，应该多看示例代码，分析代码架构原理。
（3）css+div特效的实现
（4）目前来说写的界面相对简单，js代码也相对局限。接下来应该总结归纳做页面的方法，力求快速标准化完成任务。将更多的精力用于写复杂代码和后端PHP技术的学习上。
（5）每天10点之前，制定每天的工作计划，并通过读书修炼个人技能。
（6）向斌哥和孝芳姐贴身学习，了解他们的开发经验和职业发展感悟。