zoukankan      html  css  js  c++  java
  • 制作html5微信页面的经验总结。

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

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

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

    问题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);
      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- $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} {
                     nth(nth($btnImgSize,$i),1) * nth($screen,3);
                    height: nth(nth($btnImgSize,$i),2) * nth($screen,3);
                }
            }
        }
    }
    

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

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

  • 相关阅读:
    [转载]为 Windows 下的 PHP 安装 PEAR 和 PHPUnit
    作品和案例
    js创建对象的最佳实践
    log4j的PatternLayout参数含义
    Java线程池——ThreadPoolExecutor的使用
    登录mysql 报 Access denied for user 'root'@'localhost' 错误
    CentOS 7下使用yum安装MySQL5.7
    linux下MySQL停止和重启
    Linux 命令 -- chown
    Linux 命令 -- chmod
  • 原文地址:https://www.cnblogs.com/10manongit/p/12672155.html
Copyright © 2011-2022 走看看