製作html5微信頁面的經驗總結。

帕奇式發表於2015-07-19
HTML

先羅列一下我遇到的問題：

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

相關文章