制作html5微信页面的经验总结。

先罗列一下我遇到的问题：

用户可选择图片上传，但是图片比较大（基本都是2M以上），而且还得异步上传。
由于操作上比较多的设计都是隐性的例如滑动之类，需要手势动画作提示。
块内元素滚动时不流畅，或不能滚动问题。
由于设计师设计的布局复杂度高，会出现比较多的元素需使用绝对定位。
如果页面是推广页面，绝大部分用户都是首次进入，而设计中的元素前端不能复现只能使用图片时，会产生加载时间较长的问题。

问题有这么多，我来一个个说。

问题1的解决方案是上传前预压缩，其实就是将原来的图片大小缩小到你可以接受的程度，再上传给服务器。使用的是canvas的接口和FileReader对象来进行操作，具体实现就不说了看这《使用HTML5的两个api，前端js完成图片压缩。》。其次是文件的异步上传，可以使用FormData把要提交的内容整合就可以了，减少很多麻烦，代码如下：

$(document.forms['ajax']).submit(function(e){
    var formData = new FormData(this)；
    $.ajax({
        ...
        type: 'post',
        data: formData,
        /*
         * 由于jquery会默认处理提交数据，所以必须关闭。
         * XMLHttpRequest会对 formdata 进行正确的处理
         */
        processData: false, 
        //原理同上，XMLHttpRequest会自动加上正确的Content-Type
        contentType: false,
        ...
    })
});

最近有空把图片压缩的代码做成插件了。可以看这：

https://coding.net/u/packy/p/ImageCompress/git

问题2，这个写个动画库通用了就好XD，解决方法很多。

问题3，块内滑动问题，由于我这个卡内滑动元素还是一个fixed了的块，所有我参考了bootstrap的modal模块是如何处理的，至于百度出来的大多数并没什么卵用╮(╯_╰)╭。先上代码：

/*可滚动的块：*/
 overflow-x: hidden;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch; 

 /*块内加上一个div：*/
 -webkit-transform: translate(0, 0);
 width: auto;

到底什么机制导致能解决这个问题目前还没时间去深究，如果看文章的你知道请务必和我说说！

问题4，该如何解决呢？这个其实得和设计师沟通互相理解，具体看会项目成本和耗时，不得就改设计吧！但是还是会有必须那样设计的问题，所有这里建议使用sass来处理不同手机尺寸的处理，能大大减少手写代码。上我先的一段处理（各位看官轻喷，我就看了一上午sass文档）。

//各手机尺寸，和比例。比例这里因设计给的是ip6的，所有就拿它来做基准。
$iPhone5: 320px 523px 0.85;
$iPhone6: 375px 622px 1;
$iPhone6-P: 414px 691px 1.1;
$screens: $iPhone5 $iPhone6 $iPhone6-P;

//用于套屏幕处理的
@mixin max-screen($res){
  @media only screen and ( min-width: $res )
  {
    @content;
  }
}

$btnImgSize: 191px 89px, 228px 94.5px, 128px 48.5px, 170px 67.5px, 308px 48px, 308px 48px, 308px 48px, 121.5px 129.5px;
@for $i from 1 through 8 {
    .ui-img#{$i} {
        background-image: url(images/btn-img#{$i}.png);
    }
}
//循环屏幕数组
@each $screen in $screens {
    //套用上面预设的屏幕代码
    @include max-screen(nth($screen,1) - 1) {
        @for $i from 1 through 8 {
            .ui-img#{$i} {
                width: nth(nth($btnImgSize,$i),1) * nth($screen,3);
                height: nth(nth($btnImgSize,$i),2) * nth($screen,3);
            }
        }
    }
}

问题5，这个尽量和设计师谈妥，不行就得处理图片加载了，如果大图多而且都是用到img标签的得写个预加载功能，不然还要动画什么的首次加载基本看不出，因为图片都没加载完你动画能看的出来么╮(╯_╰)╭ ，这里就不说预加载了（看官请看这Javascript实现图片的预加载功能）。还有单页面使用到background里的尽量弄成雪碧图，但是单元面里分成多页显示的，有先后次序的，还是每页的图片分开打包吧，浏览器会异步加载的了。

下周压力略大要弄个打地鼠游戏，虽然之前用egret写过游戏，但是对于egret新知识不了解，想提高工作效率还得去学，祝我顺利吧。

制作html5微信页面的经验总结。

相关推荐