製做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);
 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新知識不瞭解，想提升工做效率還得去學，祝我順利吧。