移动网页制做经验

时间 2019-11-18

标签移动网页制做经验栏目无线繁體版

原文原文链接

大概四个月前作了个比较常见的手机端的项目，日子久了，可贵有心情来总结下css

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

前言：html5

　　页面依赖zepto和iSlider,自适应布局(使用rem)，适应终端最小宽度为320px，要用一段用了很久的代码css3

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

一、页面加载：web

移动端不一样网页，考虑到网速问题，通常须要加载完全部图片资源再进入页面（受修改豆豆游戏的经验）：数组

脚本以下浏览器

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的数组记录资源位置，而后再下载什么的，下载完以后抛个事件出来app

加载资源要配个小动画，纯css3实现，喜欢的话可拿去，不限版权dom

.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使用了好屡次了，单好像每次都要查资料，老是不记得格式，估计是英文水平很差。。。。ide

格式为：

//定义
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

二、页面切换

　　原本本身写了一个，后面不怎么好兼容国内的无良浏览器，就换了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了一把~

三、声音播放

声音播放其实很简单，不过是本身查资料写的，因此也贴上来吧：

调用的话只须要传入资源路径就行了

 1 var audio = (function(){
 2     var exports ={};
 3     var ctrlHtml = '<span class="ui-music-btn pa"></span>';
 4     var  _audio = new Audio;
 5     var $hand;
 6     exports.init = function(resourcePath){
 7         $("body").append(ctrlHtml);
 8          var e = {loop: !0,preload: "auto",src: resourcePath,autoplay:false};
 9         for (var i in e){
10             e.hasOwnProperty(i) && (_audio[i] = e[i])
11         }
12         $hand = $(".ui-music-btn");
13         $hand.on("touchstart",function(){
14             if(_audio.paused){
15                 _audio.play();
16                 window.userSetAudioOn=true;
17             }else{
18                 _audio.pause();
19                 window.userSetAudioOn=false;
20             }
21         });
22         $("body").one('touchstart',function(e){
23             if($(e.target).hasClass("ui-music-btn")){
24                 return false;
25             }else{
26                 _audio.play();
27             }
28         });
29         _audio.play();
30     }
31     exports.audio = _audio;
32     $(_audio).on("pause",function(){
33         $hand.addClass("ui-music-btn-off");
34     }).on("playing",function(){
35         $hand.removeClass("ui-music-btn-off");
36     })
37     exports.init();
38     exports.$hand=$hand;
39     return exports;
40 })()

移动开发在html5API使用上仍是挺好的，本身查查就能用，不用使用过多的脚本hack低版本浏览器。

不过有一点：有些产品想要一进入页面就能播放声音，却在大多数手机的浏览器都不成功

不管是使用代码直接调用audio.play()，仍是在事件绑定了audio.play()，而后调用事件，都不成功，

最后在查资料才发现出于用户友好，须要用户本身触发事件才能调用音频、视频，因此之后遇到这种需

求仍是直接拒绝好了。

大概就只记得这些了，之后作了东西仍是早点写笔记的好