一个H5项目的实践与总结

ripr9642 5年前
   <h3>一、背景来源:</h3>    <p>9月份找工作的时候,接到腾讯笔试题,一个H5项目,于是自己花了三天时间去做,交给了面试官后,面试官要求我再优化一下,可惜当时自己不懂事,以为没啥希望,就没有去优化和争取;选择另外一家公司入职了,现在想想后悔不已,如果再给我一次机会,我一定好好珍惜<(▰˘◡˘▰)>。最近两天有时间,重构、优化了下这个项目。发现自己之前写得有点糟糕,当然现在优化得可能还是不够好(/ □ \),看下现在的效果:</p>    <p><img src="https://simg.open-open.com/show/8286e94ad2d45d1c535b29ee5882ed24.gif"></p>    <h3>二、实践:</h3>    <p>1.rem响应式布局:</p>    <p>我之前用媒体查询,html的font-size设置为10px:</p>    <pre>  <code class="language-html">  /*媒询*/  /* 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</code></pre>    <p>这个导致的结果是,在chrome浏览器下,一直都是12px,我自己调试的时候发现无论怎么设置图片的rem,图片的宽度都没有变化,所以需要注意:</p>    <p>问:设置html font-size:10px;Chrome下1rem=12px,在火狐下1rem == 10px;为什么?如何让Chrome 1rem=10px?</p>    <p>答:因为谷歌浏览器里,字体最小大小为12px,无法再小了 你可以再css里面加上这句 -webkit-text-size-adjust:none; 这样就可以了,</p>    <p>追答: 不管用,这条样式在最新版的chrome里已经弃用了。</p>    <p>所以后面我用了这种办法来实现rem响应式布局(拿到的设计稿是640px)</p>    <pre>  <code class="language-html">(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);  </code></pre>    <p>这样在不同移动设备下的font-size为:</p>    <p>iphone5:</p>    <p><img src="https://simg.open-open.com/show/9e5d6c36c79ffa8912993d110f020d6a.png"></p>    <p>iphone6:</p>    <p><img src="https://simg.open-open.com/show/7c9456559051594229999f2479bdecf4.png"></p>    <p>(注意:这种情况下,以640px的设计稿为准,对应设计稿的切图,直接以原图大小保存就好,切出来的图片,宽度设置为设计稿中的尺寸除以100。布局时,设计图标注的尺寸除以100得到css中的尺寸)</p>    <p>2.对于第三页布局的重构:</p>    <p><img src="https://simg.open-open.com/show/77ab9de5a568499987d2456783c85e3a.png"></p>    <p>①.画线动画:</p>    <pre>  <code class="language-html"><div class="page3_line2">     <div class="page3_line2_div">     </div>  </div>  </code></pre>    <pre>  <code class="language-html">.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;  }  </code></pre>    <p>这个.page3_line2_div_move是在js中添加的</p>    <pre>  <code class="language-html">  //第三页,需要画线          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</code></pre>    <p>动画的先后出现顺序都是通过</p>    <pre>  <code class="language-html">transition: all 0.4s 0.6s;</code></pre>    <p>最后一个参数(0.6s)来控制的。</p>    <p>②.移动设备适配性问题:</p>    <p>这里要注意下布局的技巧,或者说是布局的规范,为了实现画线过程中,点与线衔接,需要在这些元素外面额外加一个div,设置为position:relative;然后里面的点与线的div都设置为position:absolute;以父级div位置作为参考,然后再对里面的点与线布局,这样就能保证他们的位置始终是契合的。</p>    <p>我的页面布局为:</p>    <pre>  <code class="language-html">     <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</code></pre>    <p>把最外层div设置为position: relative;</p>    <pre>  <code class="language-html">.page3_point_line_wrap {      position: relative;  }  </code></pre>    <p>里面的元素根据设计图位置布局。</p>    <p>测试后,发现这种做法适配了移动端各种设备。之前我的布局没有考虑到这些,直接布局,导致出现不同移动端设备下,出现布局混乱的情况。</p>    <p>3.hammer.js的应用:</p>    <p>滑动效果的实现是用了hammer.js;作业交过去后,面试官提出,滑动效果不太顺畅,看了下代码,发现可能的原因是这里:</p>    <pre>  <code class="language-html">        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);          }  </code></pre>    <p>滑动Y轴偏移量少于一定最少距离,保留在当前页,之前是没有self.toNext(e)这个方法。后面我添加这个方法试了下,好像是会顺畅些。滑动页面还要注意有动画效果:</p>    <pre>  <code class="language-html">.page_animate_0d5s {      height: 100%;      position: relative;      transform: translate3d(0px, 0px, 0px);      transition: all 700ms ease;  }  </code></pre>    <h3>三、总结:</h3>    <p>可取之处:</p>    <p>1.代码的命名;(以页面为准,每页的命名加个page(1-7),这样方便自己维护代码;图片的命名也比较规范,属于哪一页的图,会在前面加个page(1-7) )。</p>    <p>2.注释及代码格式;(自己重构的过程中,不会觉得混乱,可能是因为是自己写过的代码 ( ̄工 ̄lll) )。</p>    <p>不足之处:</p>    <p>1.缺乏思考;之前有参与公司的移动端项目,不过也是别人搭好的框架(用的是媒体查询),然后写了几个简单的页面,没有从整体去思考,移动端该怎么布局,比如内容页面需要设置一个最大宽度max-width。</p>    <p>2.对自己写的代码要求过低,代码不够规范;工作中,也有负责过一个简单H5项目,没有涉及到什么动画及点线组合,现在想想当时自己写的应该也是有适配性问题,惭愧 ( # ▽ # ) 。</p>    <p>3.多去学习,实践;响应式布局,我还只会用这个方法的rem布局,不会淘宝的做法( <strong>lib-flexible</strong> ),hammer.js这个好像还有更好的替代者( <strong>AlloyFinger</strong> ),我暂时都没用过 (┬_┬) 。</p>    <p>4.再想想,也不是想要自己学太多;希望自己能理解自己用到的,然后把代码写好 (◕ˇ∀ˇ◕) 。</p>    <p>最后:</p>    <p>我的这个H5项目可以在这里看: <a href="/misc/goto?guid=4959725722811795422" rel="nofollow,noindex">线上效果</a> 。</p>    <p>代码在: <a href="/misc/goto?guid=4959725722903829328" rel="nofollow,noindex">源代码</a> (这个弄得有点尴尬⊙﹏⊙‖∣)</p>    <p> </p>    <p>来自:http://www.cnblogs.com/wj204/p/6078776.html</p>    <p> </p>