今日根本总结下呢新品牌开发之2单h5推广。今天着重总结下吧新品牌开发之2只h5推广。

序言:2016例外不多又过了大体上呀,最近涉足了店铺某些单h5项目(严格来说,也不得不算推广页面活动)。主要是新品牌的拓宽用,当然也生被庄以前总客户做的案例。今天关键总结下呢新品牌开发之2单h5推广;就根本的下技术,页面优化,以及在的短板做总结。

序言:2016差不多以过了大体上呐,最近介入了号某些单h5项目(严格来说,也只好算推广页面活动)。主要是新品牌的放亟需,当然也出深受公司以前一直客户做的案例。今天关键总结下呢新品牌开发的2独h5推广;就重点的采取技术,页面优化,以及在的短板做总结。

相同、主题以及统筹;

同、主题与设计;

 2独h5主题主要及4.1愚人节与5月底妈节做对应;然后如比含蓄自然地吧新品牌作铺垫,自然推广是根本的目的,但是以休能够那么直白明显;所以2单h5分别选择了虚拟产品介绍及游乐与吧计划思路;主要设计图如下:

 2独h5主题主要跟4.1愚人节与5月底生母节做对应;然后要于含蓄自然地吧新品牌作铺垫,自然推广是主要的目的,但是以不可知那么直白明显;所以2个h5分别选择了虚拟产品介绍及游乐与也宏图思路;主要设计图如下:

 愚人节:图片 1 
   图片 2 
扫描体验图片 3

 愚人节:图片 4 
   图片 5 
扫描体验图片 6

母亲节:图片 7 
 图片 8 
只能微信扫描体验图片 9

母亲节:图片 10 
 图片 11 
只能微信扫描体验图片 12

2个h5
分别因流程显示和玩互动与为操作主线展开,在最后经时的特征(愚人节自是整蛊咯,母亲节则是好情感)导向品牌网站。个人对UI的一体化规划要于认可的。

2单h5
分别因流程显示暨玩互动与为操作主线展开,在末经时的特点(愚人节本是整蛊咯,母亲节则是友善情感)导向品牌网站。个人对UI的一体化统筹要于认可的。

 

 

同等、主要的技术点与长;

平等、主要的技术点与亮点;

 两只h5的UE交互比较相似,所以于技巧面上也于适中。整体没有最好的难度,与事先开发之H5互动页面技术利用出入不生;不过创意总是最的,根据设计师的设计意见,并和的交流后确定的彼此展示方式毕竟得达是这2个h5的等同生亮点。围绕功能指向利用的技艺作分析总结。

 两只h5的UE交互比较相似,所以当技巧层面达到啊正如方便。整体没有最好好的难度,与事先支付之H5互动页面技术运用出入不老;不过创意总是顶的,根据设计师的宏图意见,并和的交流后确定的相展示方式竟得上是立即2独h5的同等不胜亮点。围绕功能指向以的技艺作分析总结。

 

 

1.重力感应动画效果,摇一摇;

1.重力感应动画效果,摇一摇;

  项目里曾无是第一破下html5手机api,时至今日,几乎拥有智能手机都死好地支持了DeviceOrientation
和DeviceMotion
这个2个手机接口;根据计划配合了css3的transform动画,营造了视觉差之力量;代码实现啊是比较简单,单纯地调用接口代码即可;至于摇一摇动能,之前的文章吧发生涉及了,so,不复赘述。

  项目里已经非是率先坏以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) ');
        };        
    };
});
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;

2.帧动画,css
spite,css animation;

  页面被之卡通效果主要还是出于css3
的animation组成,比较直观可控;由于设计之特殊性,需要用到大方虚的现象动画效果,这时候显然是图片输出为主,尽管css
sprite动画也得以得,不过对大帧数的效能,一个是不利导出整张图片,存储大小过那个,另外一些便是不便民网页加载速度;所以用js控制images替换的帧动画于恰当。当然,提前预加载图片,时间决定,与节奏的合啊是得专注的底细。

  页面中之卡通效果主要还是由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);
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>的使用;

3.html5
<video>的使用;

  由于母亲节设计的原因,在初始loading完资源后会涉嫌到视频的自动播放,好的少数凡于微信内置浏览器里,可以自动播放,外置浏览器比如safari还是要用户交互才会履行,所以基于项目之运转环境要得做不同之事件处理;

  由于母亲节设计的由,在初始loading完资源后会涉嫌到视频的自动播放,好的一些是当微信内置浏览器里,可以自动播放,外置浏览器比如safari还是要用户交互才会行,所以基于项目之运作环境或得举行不同的事件处理;

  另外一些值得注意的尽管是,在微信内置浏览器里非wp.weixin.com域名下的视频资源,在安卓下引用会面世各种各样的播放组件(比如播放完后会见油然而生播放按钮,视频下方的快慢条等;),ios暂无夫等问题;所以,在采取视频的时候便需对安卓用户考虑是否接受这样一个功能体验;否则,还是做平台的不等处理吧。

  另外一些值得注意的便是,在微信内置浏览器里非wp.weixin.com域名下的视频资源,在安卓下引用会并发形形色色的播音组件(比如播放完后见面面世播放按钮,视频下方的快条等;),ios暂无夫等题材;所以,在使用视频的时光就是需要对安卓用户考虑是不是接受这样一个职能体验;否则,还是做平台的不等处理吧。

4.走于适应之优化;

4.倒于适应之优化;

  此次还有少数不怕是对准以前的页面适配问题再次发作了平不行大的优化;由于市场上之各种显示屏大小,分辨率的存,间可能回落在码css的时段针对分辨率做媒体询问;所以,结合网上的片段代码案例,将前的纯rem,依靠screen
width适配的方案展开了晋级:

  此次还有一些纵是对准以前的页面适配问题还发作了平破大规模的优化;由于市场上的各种显示屏大小,分辨率的留存,间可能回落在码css的时刻针对分辨率做媒体询问;所以,结合网上的一对代码案例,将前的纯rem,依靠screen
width适配的方案展开了晋升:

  1)约定了根基设计图纸的深浅;

  1)约定了根基设计图纸的轻重;

  2)根据屏幕高度采取了百分比缩放,使得布局不再单纯依据屏幕宽度做调整;

  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")*/
      }
    });
!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堆积起来也是蛮紧张的,即时基础模板与样式库大同小异,不过还是聊下在各种调整以及优化中起的供不应求;

由开发时间跟经过等各种原因,几独h5堆积起来也是格外紧张之,即时基础模板与样式库大同小异,不过要聊下在各种调整与优化中出现的不足;

1.css3
3D动画

1.css3
3D动画

  1)很早前的h5使用css3 3D
animation底上都提出了是题材,就是在ios系统及之ratateX,Y系列总会与页面元素中出现通过外露遮挡的题材,一直无找到代码层面的来头,究其从来要浏览器自身之支撑与析造成的吧,总之安卓上webkit内核是没有这种景象出现的;

  1)很早前的h5使用css3 3D
animation的时候已经提出过这题目,就是于ios系统上的ratateX,Y系列总会暨页面元素中出现过外露遮挡的题目,一直从未找到代码层面的由来,究其向要浏览器自身的支持以及析造成的吧,总之安卓上webkit内核是没有这种情景出现的;

唯独问题或要处理掉的,方法就就是是外围容器溢起藏:overflow:hidden;另外就是是当z距上的translate
,再相应地scale缩放。

然而问题还是要处理掉的,方法就就是是外围容器溢起藏:overflow:hidden;另外就是是在z距上的translate
,再相应地scale缩放。

  2)对3D变换的又可怜理解:不可或缺的perspective,意为透视,视角;正确运用将会给使用者在视觉及造成3D的视觉,主要代表的便是观察者距离屏幕的px距离;正也前线观察,负值为大后方;

  2)对3D变换的双重甚理解:不可或缺的perspective,意呢透视,视角;正确采取将会晤受使用者在视觉上导致3D的视觉,主要代表的就是观察者距离屏幕的px距离;正为前线观察,负值为后;

-webkit-perspective:620px;
-webkit-perspective:620px;

   自然,你可用以此特性单独设置到舞台容器上,也可以对不同视觉效果单独为元素添加;

   自然,你可以用是特性单独设置到舞台容器上,也可本着不同视觉效果单独给元素添加;

  3)还是很一味问题,针对低端安卓机,即使被了硬件加速,也会见还是多或掉地起动画卡顿不通畅的情事,所以据悉之后h5的宏图方向,动画效果占比更好,css3的卡通应该尽可能少用,转为canvas;

  3)还是十分一直问题,针对低端安卓机,即使被了硬件加速,也会还是多或者有失地面世动画卡顿不流利的气象,所以依据以后h5的规划方向,动画效果占比较逾老,css3的动画片应该尽量少用,转为canvas;

2.音视频的操纵

2.音视频的支配

  以后的H5几乎都见面来音视频的投入吧,也算是一个完好无损流行势头,不管是吴亦凡H5
还是前段时间的宝马M2,视频的采取就比较常见;但是兼容性还是存在各种题材,比如(安卓不克以播报2个多媒体,自动全屏播放,预加载,不同网络状况下之处理等等);

  以后的H5几乎都见面来音视频的加入吧,也终究一个完好无缺流行势头,不管是吴亦凡H5
还是前段时间的宝马M2,视频的使已经比较常见;但是兼容性还是存在各种题材,比如(安卓不克以播报2个多媒体,自动全屏播放,预加载,不同网络状况下的处理等等);

故此考虑到以后的优化手段与开发效率,需要有动画库来治本及拍卖,比如原先开中采取了之craftyJs一近似的动画片框架,最近为于研讨腾讯TGideas的几只
动画H5,个人认为creatJs这个类库也是方案特别好之化解途径有。

因而考虑到事后的优化手段和开支效率,需要有动画库来保管以及处理,比如原先开中使用过的craftyJs一接近的卡通片框架,最近啊以研腾讯TGideas的几乎单
动画H5,个人觉得creatJs这个类库也是方案非常好的解决途径之一。

3.图纸处理

3.图处理

  图片上传显示为毕竟在活动网页上,尤其是一些互动性h5常见的功能点,此次为配合最后之元宝贴功能,也确确实实是针对图片压缩适配做了广大行事;包括截取的由适应,热区感应,位置对联合等,不过经过前几乎独h5的经历,最后要于完美地处理;不过手机浏览器对input的界定也是大不相同;有的安卓依旧不可知选摄像头就是经常拍;编辑卡顿的气象。不过当下吗是十分少在手机走端起图大成效编辑的原故有,总的还是冲实际效能要求来调动。

  图片上传显示也好不容易在动网页上,尤其是部分互动性h5常见的功能点,此次以配合最后之银元贴功能,也确是对准图纸压缩适配做了过多行事;包括截取的由适应,热区感应,位置对共同等,不过经过前几乎独h5的经历,最后要于完美地拍卖;不过手机浏览器对input的限定也是大不相同;有的安卓依旧不可知选摄像头就是经常拍;编辑卡顿的情景。不过当下为是特别少在手机走端起图大功能编辑的原因有,总的还是因实际作用要求来调动。

 

 

结束语:现在底位移端H5热潮差不多是一个平稳的流,通俗一点即便是腐朽大街了,不过仍然会生大厂的神来之笔出现吃人口前同亮;微信衍生出的是活动平台也大幅度地推广了走web的提高;各种技术以及新意吧是层出不穷。

结语:现在之倒端H5热潮差不多是一个稳定性的等级,通俗一点即使是腐败大街了,不过依然会生大厂的神来之笔出现让丁面前同样亮;微信衍生出来的斯活动平台为极大地拓宽了走web的上进;各种技能和新意吧是层出不穷。

虽前段时间
腾讯放出的H5推广浏览率分析,有硌于人开发者心灰意冷;但是也格外好地说明了,技术与更新结合,想象力和计划,给用户新颖舒适的感受才能够催发更漂亮的著作。

纵使前段时间
腾讯放出的H5推广浏览率分析,有硌被人口开发者心灰意冷;但是也颇好地说明了,技术和更新结合,想象力和规划,给用户新颖舒适的体会才能够催发更尽善尽美之著述。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章