近期H5项目开发小结

前言：2016差不多又过了半啦，最近参与了公司好几个h5项目（严格来说，也只能算是推广页面活动）。主要是新品牌的推广需要，当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广；就主要的运用技术，页面优化，以及存在的短板做总结。

一、主题与设计；

2个h5主题主要与4.1愚人节与5月的母亲节做对应；然后要比较婉转自然地为新品牌作铺垫，自然推广是主要的目的，但是又不能那么直白明显；所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路；主要设计图如下：

愚人节：       扫描体验；

母亲节：     只能微信扫描体验

2个h5 分别以流程展示和游戏互动参与为操作主线进行，在最后通过时节的特点（愚人节自然是整蛊咯，母亲节则是温馨情感）导向品牌网站。个人对UI的整体设计还是比较认可的。

一、主要的技术点与亮点；

两个h5的UE交互比较相似，所以在技术层面上也比较贴切。整体没有太大的难度，与之前开发的H5互动页面技术采用差别不大；不过创意总是无限的，根据设计师的设计理念，并与之交流后确定的交互展示方式算得上是这2个h5的一大亮点。围绕效果对采用的技术作分析总结。

1.重力感应动画效果，摇一摇；

　　项目里已不是第一次运用html5手机api，时至今日，几乎所有智能手机都很好地支持了DeviceOrientation 和DeviceMotion 这个2个手机接口；根据设计配合了css3的transform动画，营造了视觉差的效果；代码实现也是比较简单，单纯地调用接口代码即可；至于摇一摇动能，之前的文章也有提到过，so，不复赘述。

window.addEventListener('deviceorientation',  function(e) {
    var x = parseInt(e.gamma);
    var w = parseInt(0.4*x);
    if(Math.abs(x) < 80){
        $('.p0_cen').css('webkitTransform',' translate3d('+0.8*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) ');
        $('.p0_tip').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) ');

        if($('.p1').hasClass('on')){ //p1
            $('.p1_bg').css('webkitTransform','translate3d('+1.5*w+'px,0px,-100px) rotate3d(0,1,0,' + 0.8*w + 'deg) scale(1.5)');
            $('.p1_tit1').css('webkitTransform',' translate3d('+1.4*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) ');
            $('.p1_tit2').css('webkitTransform',' translate3d('+1*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) ');
            $('.p1_tit3').css('webkitTransform',' translate3d('+1.2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) ');
            $('.p1_tit4').css('webkitTransform',' translate3d('+.7*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) ');
            $('.p1_bot').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 0.6*w + 'deg) ');
        };
    };
});

2.帧动画，css spite，css animation；

　　页面中的动画效果主要还是由css3 的animation组成，比较直观可控；由于设计的特殊性，需要用到大量仿真的场景动画效果，这时候显然是图片输出为主，尽管css sprite动画也可以做到，不过对于大帧数的效果，一个是不易导出整张图片，存储大小过大，另外一点就是不利于网页加载速度；所以用js控制images替换的帧动画比较合适。当然，提前预加载图片，时间控制，与音频的同步也是需要注意的细节。

var barTimer = setInterval(function(){

            if(num < 52){
                var path = 'res/img/p5/all_000'+num+'.jpg';
                $('.p5_anigla').attr('src',path);
                num++;
            }else{
                 clearInterval(barTimer);
            };

        },50);

3.html5 <video>的使用；

　　由于母亲节设计的原因，在初始loading完资源后会涉及到视频的自动播放，好的一点是在微信内置浏览器里，可以自动播放，外置浏览器比如safari还是需要用户交互才能执行，所以根据项目的运行环境还是需要做不同的事件处理；

　　另外一点值得注意的就是，在微信内置浏览器里非wp.weixin.com域名下的视频资源，在安卓下引用会出现各种各样的播放组件（比如播放完后会出现播放按钮，视频下方的进度条等；），ios暂无此等问题；所以，在运用视频的时候就需要针对安卓用户考虑是否接受这样一个效果体验；否则，还是做平台的不同处理吧。

4.移动自适应的优化；

　　此次还有一点就是针对以前的页面适配问题再次作了一次普遍的优化；由于市面上的各种显示屏大小，分辨率的存在，间可能减少在码css的时候针对分辨率做媒体查询；所以，结合网上的一些代码案例，将之前的纯rem，依靠screen width适配的方案进行了提升：

　　1）约定了基础设计图纸的大小；

　　2）根据屏幕高度采取了比例缩放，使得布局不再仅仅依据屏幕宽度做调整；

!function(win, option) {
      var count = 0,
          designWidth = option.designWidth,
          designHeight = option.designHeight || 0,
          designFontSize = option.designFontSize || 20,
          callback = option.callback || null,
          root = document.documentElement,
          body = document.body,
          rootWidth, newSize, t, self;
      //返回root元素字体计算结果
      function _getNewFontSize() {
        var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
        return parseInt( scale * 10000 * designFontSize ) / 10000;
      }
      !function () {
        rootWidth = root.getBoundingClientRect().width;
        self = self ? self : arguments.callee;
        //如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试20次，否则使用win.innerWidth计算
        if( rootWidth !== win.innerWidth &&  count < 20 ) {
          win.setTimeout(function () {
            count++;
            self();
          }, 0);
        } else {
          newSize = _getNewFontSize();
          //如果css已经兼容当前分辨率就不管了
          if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {
            root.style.fontSize = newSize + "px";
            return callback && callback(newSize);
          };
        };
      }();
      //横竖屏切换的时候改变fontSize，根据需要选择使用
      win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        clearTimeout(t);
        t = setTimeout(function () {
          self();
        }, 200);
      }, false);
    }(window, {
      designWidth: 640,
      designHeight: 1136,
      designFontSize: 100,
      callback: function (argument) {
        /*console.timeEnd("test")*/
      }
    });

三、缺陷与短板；

由于开发时间与进程等各种原因，几个h5堆积起来也是蛮紧张的，即时基础模板与样式库大同小异，不过还是聊下在各种调整与优化中出现的不足；

1.css3 3D动画

　　1）很早之前的h5使用css3 3D animation的时候已经提出过这个问题，就是在ios系统上的ratateX，Y系列总会与页面元素之间出现穿透遮挡的问题，一直没有找到代码层面的原因，究其根本还是浏览器自身的支持与解析造成的吧，总之安卓上webkit内核是没有这种情况出现的；

不过问题还是要处理掉的，方法无非就是外层容器溢出隐藏：overflow:hidden;另外就是在z距上的translate ，再相应地scale缩放。

　　2）对3D变换的更深理解：不可或缺的perspective，意为透视，视角；正确使用将会给使用者在视觉上造成3D的视觉，主要表示的就是观察者距离屏幕的px距离；正为前方观察，负值为后方；

-webkit-perspective:620px;

　　自然，你可以将这个属性单独设置到舞台容器上，也可以针对不同视觉效果单独给元素添加；

　　3）还是那个老问题，针对低端安卓机，即使开启了硬件加速，也会或多或少地出现动画卡顿不流畅的情况，所以根据以后h5的设计趋势，动画效果占比越来越大，css3的动画应该尽量少用，转为canvas；

2.音视频的控制

　　以后的H5几乎都会有音视频的加入吧，也算是一个整体流行趋势，不管是吴亦凡H5 还是前段时间的宝马M2，视频的运用已经比较普遍；但是兼容性还是存在各种问题，比如（安卓不能同时播放2个多媒体，自动全屏播放，预加载，不同网络状况下的处理等等）；

所以考虑到以后的优化手段与开发效率，需要一些动画库来管理与处理，比如以前开发中使用过的craftyJs一类的动画框架，最近也在研究腾讯TGideas的几个 动画H5，个人觉得creatJs这个类库也是方案很好的解决途径之一。

3.图片处理

　　图片上传显示也算是在移动网页上，尤其是一些互动性h5常见的功能点，此次为了配合最后的大头贴功能，也着实是对图片压缩适配做了不少工作；包括截取的自适应，热区感应，位置对齐等，不过经过前几个h5的经验，最后还是比较完美地处理；不过手机浏览器对input的限制也是大不相同；有的安卓依旧不能选择摄像头即时拍照；编辑卡顿的现象。不过这也是很少在手机移动端出现图片大功能编辑的原因之一，总之还是根据实际功能需求来调整。

结束语：现在的移动端H5热潮差不多是一个稳定的阶段，通俗一点就是烂大街了，不过依旧会有大厂的神来之笔出现让人眼前一亮；微信衍生出来的这个移动平台也极大地推广了移动web的发展；各种技术与创意也是层出不穷。

即使前段时间 腾讯放出的H5推广浏览率分析，有点让人开发者心灰意冷；但是也很好地说明了，技术与创新结合，想象力与设计，给用户新颖舒适的体验才能催发更优秀的作品。