移動網頁制作經驗

大概四個月前做了個比較常見的手機端的項目，日子久了，難得有心情來總結下

地址：http://aola.100bt.com/film/wap/

前言：

　　頁面依賴zepto和iSlider,自適應布局(使用rem)，適應終端最小寬度為320px，要用一段用了好久的代碼

$(window).resize(function(){
    $("html").css("font-size",~~$(window).width()*12/320);
}).resize()

 

1、頁面加載：

移動端不同網頁，考慮到網速問題，一般需要加載完所有圖片資源再進入頁面（受修改豆豆游戲的經驗）：

腳本如下

var source = (function(){
    var exports = {};
    exports.target=$('<div id="sourceLoading-Msg id='+Math.random()+'"></div>');
    var sourceMap = [
        "./style/logo.png?20150720",
        "./style/music.png?20150720",
        "./style/music-off.png?20150720",
        "./style/bg1.jpg?20150720",
        "./style/bg2.jpg?20150720",
        "./style/bg3.jpg?20150720",
        "./style/bg4.jpg?20150720",
        "./style/bg5.jpg?20150720",
        "./style/page1/bulding.png?20150720",
        "./style/page1/font.png?20150720",
        "./style/page1/hand.png?20150720",
        "./style/page1/light.png?20150720",
        "./style/page1/liuxing1.png?20150720",
        "./style/page1/liuxing2.png?20150720",
        "./style/page1/star.png?20150720",
        "./style/page2/dot1.png?20150720",
        "./style/page2/dot2.png?20150720",
        "./style/page2/text.png?20150720",
        "./style/page2/animal.png?20150720",
        "./style/page4/font.png?20150720",
        "./style/page4/font1.png?20150720",
        "./style/page4/font2.png?20150720",
        "./style/page4/icon.png?20150720",
        "./style/page4/img.png?20150720",
        "./style/page5/btn.png?20150720",
        "./style/page5/star1.png?20150720",
        "./style/page5/star2.png?20150720",
        "./style/page5/tip.png?20150720",
        "./style/page5/text.png?20150720",
        "./style/rollingbg/r1.jpg?20150720",
        "./style/rollingbg/r2.jpg?20150720",
        "./style/rollingbg/r5.jpg?20150720",
        "./style/rollingbg/r6.jpg?20150720",
        "./style/rollingbg/r7.jpg?20150720",
        "./style/rollingbg/r8.jpg?20150720",
        "./style/rollingbg/r9.jpg?20150720",
        "./style/rollingbg/r10.jpg?20150720",        
        "./style/rollingbg/t1.png?20150720",
        "./style/rollingbg/t2.png?20150720",
        "./style/rollingbg/t5.png?20150720",
        "./style/rollingbg/t7.png?20150720",
        "./style/rollingbg/t8.png?20150720",
        "./style/rollingbg/t9.png?20150720",
        "./style/rollingbg/t10.png?20150720",
        "./style/rollingbg/d1.png?20150720",
        "./style/rollingbg/d2.png?20150720",
        "./style/rollingbg/d5.png?20150720",
        "./style/rollingbg/d7.png?20150720",
        "./style/rollingbg/d8.png?20150720",
        "./style/rollingbg/d9.png?20150720",
        "./style/rollingbg/d10.png?20150720"
    ];
    exports.loading=function(){
        var len = sourceMap.length;
        var count = 0;
        function checkedLoadComplate(){
            count++
            if(count == len){
                exports.target.trigger("sourceComplate");
            }
        }
        $.each(sourceMap,function(i,v){
            var img = new Image();
            img.onload = function(){
                checkedLoadComplate()
            }
            img.onerror = function(){
                checkedLoadComplate()
            }
            img.src = v;
        })
    }
    return exports;
})()

腳本很簡單，因為頁面主要大體積資源為圖片資源，所以新建了一個sourceMap的數組記錄資源位置，然后再下載什么的，下載完之后拋個事件出來

加載資源要配個小動畫，純css3實現，喜歡的話可拿去，不限版權

.loading{z-index:100;width:3rem;height:3rem;background:#44cae6;left:50%;margin:-1.5rem 0 0 -1.5rem;top:50%;}

@-webkit-keyframes loading{
    0%{-webkit-transform:rotateX(180deg);}
    25%{-webkit-transform:rotateX(360deg);}
    50%{-webkit-transform:rotateY(180deg);}
    100%{-webkit-transform:rotateY(360deg);}
}
.animate_loading{-webkit-animation:loading 2s linear 0ms infinite normal;}

css3的keyframe和animation使用了好多次了，單好像每次都要查資料，總是不記得格式，估計是英文水平不好。。。。

格式為：

//定義
keyframes  name{
   num%{style}
   num%{style}
  ....    
}
//使用
.animation{animation:name  duration timing-function delay  iteration-count direction}

定義的鏈接：http://www.w3school.com.cn/css3/css3_animation.asp

 

2、頁面切換

　　本來自己寫了一個，后面不怎么好兼容國內的無良瀏覽器，就換了iSlider

　　之后經驗得出：qq和uc瀏覽器，在touchStart時需要先調用 event.preventDefault()，不然會在事件響應的時候產生一些問題，

　　詳情可以看這個：http://bbs.uc.cn/thread-4947182-1-1.html，具體情況如下圖：

 

 

后面自己在做一個手勢插件（JTouch:http://www.cnblogs.com/peace1/p/4619380.html）時候也hack了一把~

 

 

3、聲音播放

聲音播放其實很簡單，不過是自己查資料寫的，所以也貼上來吧：

調用的話 只需要傳入資源路徑就好了

var audio = (function(){
    var exports ={};
    var ctrlHtml = '<span class="ui-music-btn pa"></span>';
    var  _audio = new Audio;
    var $hand;
    exports.init = function(resourcePath){
        $("body").append(ctrlHtml);
         var e = {loop: !0,preload: "auto",src: resourcePath,autoplay:false};
        for (var i in e){
            e.hasOwnProperty(i) && (_audio[i] = e[i])
        }
        $hand = $(".ui-music-btn");
        $hand.on("touchstart",function(){
            if(_audio.paused){
                _audio.play();
                window.userSetAudioOn=true;
            }else{
                _audio.pause();
                window.userSetAudioOn=false;
            }
        });
        $("body").one('touchstart',function(e){
            if($(e.target).hasClass("ui-music-btn")){
                return false;
            }else{
                _audio.play();
            }
        });
        _audio.play();
    }
    exports.audio = _audio;
    $(_audio).on("pause",function(){
        $hand.addClass("ui-music-btn-off");
    }).on("playing",function(){
        $hand.removeClass("ui-music-btn-off");
    })
    exports.init();
    exports.$hand=$hand;
    return exports;
})()

移動開發在html5API使用上還是挺好的，自己查查就能用，不用使用過多的腳本hack低版本瀏覽器。

不過有一點：有些產品想要一進入頁面就能播放聲音，卻在大多數手機的瀏覽器都不成功

無論是使用代碼直接調用audio.play()，還是在事件綁定了audio.play()，然后調用事件，都不成功，

最后在查資料才發現出於用戶友好，需要用戶自己觸發事件才能調用音頻、視頻，所以以后遇到這種需

求還是直接拒絕好了。

 

 

大概就只記得這些了，以后做了東西還是早點寫筆記的好