一个H5项目的实践与总结

发布时间:2017-2-21 10:52:52 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"一个H5项目的实践与总结 ",主要涉及到一个H5项目的实践与总结 方面的内容,对于一个H5项目的实践与总结 感兴趣的同学可以参考一下。

一个H5项目的实践与总结

一、背景来源:

  9月份找工作的时候,接到腾讯笔试题,一个H5项目,于是自己花了三天时间去做,交给了面试官后,面试官要求我再优化一下,可惜当时自己不懂事,以为没啥希望,就没有去优化和争取;选择另外一家公司入职了,现在想想后悔不已,如果再给我一次机会,我一定好好珍惜<(▰˘◡˘▰)>。最近两天有时间,重构、优化了下这个项目。发现自己之前写得有点糟糕,当然现在优化得可能还是不够好(/ □ \),看下现在的效果:

二、实践:

1.rem响应式布局:

我之前用媒体查询,html的font-size设置为10px:

/*媒询*/
/* html{
    font-size: 10px;
    height: 100%;
    font-family: "Microsoft Yahei";
    -webkit-text-size-adjust: none;
}


@media screen and (max-width:349px) {
    html {
        font-size: 10px;
        -webkit-text-size-adjust: none;
    }
}

@media screen and (min-width:350px) and (max-width:374px) {
    html {
        font-size: 11px;
        -webkit-text-size-adjust: none;
    }
}

@media screen and (min-width:375px) and (max-width:410px) {
    html {
        font-size: 12px;
        -webkit-text-size-adjust: none;
    }
}

@media screen and (min-width:411px){
    html {
        font-size: 13px;
        -webkit-text-size-adjust: none;
    }
} */
View Code

这个导致的结果是,在chrome浏览器下,一直都是12px,我自己调试的时候发现无论怎么设置图片的rem,图片的宽度都没有变化,所以需要注意:

问:设置html font-size:10px;Chrome下1rem=12px,在火狐下1rem == 10px;为什么?如何让Chrome 1rem=10px?

答:因为谷歌浏览器里,字体最小大小为12px,无法再小了 你可以再css里面加上这句 -webkit-text-size-adjust:none; 这样就可以了,

追答:不管用,这条样式在最新版的chrome里已经弃用了。

 所以后面我用了这种办法来实现rem响应式布局(拿到的设计稿是640px)

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这样在不同移动设备下的font-size为:

iphone5:

iphone6:

(注意:这种情况下,以640px的设计稿为准,对应设计稿的切图,直接以原图大小保存就好,切出来的图片,宽度设置为设计稿中的尺寸除以100。布局时,设计图标注的尺寸除以100得到css中的尺寸)

2.对于第三页布局的重构:

①.画线动画:
<div class="page3_line2">
   <div class="page3_line2_div">
   </div>
</div>
.page3_line2 {
    position: absolute;
    z-index: 55;
    transform: rotate(170deg);
    overflow: hidden;
    top: .35rem;
    right: .5rem;
}
.page3_line2_div  {
    margin-left: -100%;
    width: 3.8rem;
    height: 1px;
    background: #cdb04a;
    transition: all 0.4s 0.6s;
}
.page3_line2_div_move {
    margin-left: 0px;
}

这个.page3_line2_div_move是在js中添加的

//第三页,需要画线
        if (this._curIndex == 2) {
            setTimeout(function() {
                $(".page3_line1_div").addClass('page3_line1_div_move');
                $(".page3_midstar").addClass('page3_midstar_move');
                $(".page3_line_div").addClass('page3_line1_div_move');
                $(".page3_smallstar").addClass('page3_midstar_move');
                $('.page3_txt1').addClass('txtleft_animate');
                $('.page3_home').addClass('page3_home_move');
                $('.page3_point').addClass('page3_point_move');
                $('.page3_line2_div').addClass('page3_line2_div_move');
                $('.page3_point2').addClass('page3_point2_move');
                $('.page3_prostar').addClass('page3_prostar_move');
                $('.page3_line3_div').addClass('page3_line3_div_move');
                $('.page3_txt2').addClass('txtleft_animate');
                $('.page3_point3').addClass('page3_point3_move');
                $('.page3_fly').addClass('page3_fly_move');
                $('.page3_txt3').addClass('txtleft_animate');
                $('.page3_line4_div').addClass('page3_line4_div_move');
                $('.page3_point4').addClass('page3_point4_move');
                $('.page3_q').addClass('page3_stamp_move');
                $('.page3_stamp').addClass('page3_stamp_move');
            }, 500);
View Code

动画的先后出现顺序都是通过

transition: all 0.4s 0.6s;

最后一个参数(0.6s)来控制的。

②.移动设备适配性问题:

这里要注意下布局的技巧,或者说是布局的规范,为了实现画线过程中,点与线衔接,需要在这些元素外面额外加一个div,设置为position:relative;然后里面的点与线的div都设置为position:absolute;以父级div位置作为参考,然后再对里面的点与线布局,这样就能保证他们的位置始终是契合的。

我的页面布局为:

   <div class="page3_point_line_wrap">
                <div class="page3_point"></div>
                <div class="page3_line2">
                  <div class="page3_line2_div">
                  </div>
                </div>
                <div class="page3_point2"></div>
                <img src="img/page3_star.png"  class="page3_prostar">
                <div class="page3_txt2">已累计获得5星<span>2次</span></div>
                <div class="page3_line3">
                  <div class="page3_line3_div">
                  </div>
                </div>
                <div class="page3_point3"></div>
                <img src="img/page3_fly.png"  class="page3_fly">
                <div class="page3_txt3">超越了<span>92.6%</span>的鹅厂精英</div>
                <div class="page3_line4">
                  <div class="page3_line4_div">
                  </div>
                </div>
                <div class="page3_point4"></div>
                <img src="img/page3_q.png"  class="page3_q">
                <img src="img/page3_stamp.png"  class="page3_stamp">
     </div>
View Code

把最外层div设置为position: relative;

.page3_point_line_wrap {
    position: relative;
}

里面的元素根据设计图位置布局。

测试后,发现这种做法适配了移动端各种设备。之前我的布局没有考虑到这些,直接布局,导致出现不同移动端设备下,出现布局混乱的情况。

3.hammer.js的应用:

滑动效果的实现是用了hammer.js;作业交过去后,面试官提出,滑动效果不太顺畅,看了下代码,发现可能的原因是这里:

        var onEnd = function(e) {
            var deltaY = e.deltaY;

            //滑动Y轴偏移量少于一定最少距离 ,保留在当前页
            if (Math.abs(deltaY) < self.minDis) {
                // debugger;
                self.toNext(e);
            } else {
                if (deltaY < 0) {
                    self.toNext(e);
                } else {
                    self.toPrev();
                }
            }

            //停止动作
            var _distanY = self.winHeight * (self._curIndex);
            self.toPosition(_distanY);
        }

滑动Y轴偏移量少于一定最少距离,保留在当前页,之前是没有self.toNext(e)这个方法。后面我添加这个方法试了下,好像是会顺畅些。滑动页面还要注意有动画效果:

.page_animate_0d5s {
    height: 100%;
    position: relative;
    transform: translate3d(0px, 0px, 0px);
    transition: all 700ms ease;
}

三、总结:

可取之处:

  1.代码的命名;(以页面为准,每页的命名加个page(1-7),这样方便自己维护代码;图片的命名也比较规范,属于哪一页的图,会在前面加个page(1-7) )。

  2.注释及代码格式;(自己重构的过程中,不会觉得混乱,可能是因为是自己写过的代码 ( ̄工 ̄lll) )。

不足之处:

  1.缺乏思考;之前有参与公司的移动端项目,不过也是别人搭好的框架(用的是媒体查询),然后写了几个简单的页面,没有从整体去思考,移动端该怎么布局,比如内容页面需要设置一个最大宽度max-width。

  2.对自己写的代码要求过低,代码不够规范;工作中,也有负责过一个简单H5项目,没有涉及到什么动画及点线组合,现在想想当时自己写的应该也是有适配性问题,惭愧 ( # ▽ # ) 。

  3.多去学习,实践;响应式布局,我还只会用这个方法的rem布局,不会淘宝的做法(lib-flexible),hammer.js这个好像还有更好的替代者(AlloyFinger),我暂时都没用过 (┬_┬) 。

  4.再想想,也不是想要自己学太多;希望自己能理解自己用到的,然后把代码写好 (◕ˇ∀ˇ◕) 。

最后:

  我的这个H5项目可以在这里看:线上效果

  代码在:源代码 (这个弄得有点尴尬⊙﹏⊙‖∣)

上一篇:爬虫登录,立FLAG
下一篇:go build 时报错 cc1.exe: sorry, unimplemented: 64-bit mode not compiled in

相关文章

相关评论