这段时间在做移动WebApp开发,基于PhoneGap+Jquery Mobile,遇到不少问题,下面进行部分总结。


1.webStorage有大小限制(5M),Chrome出现”QUOTA_EXCEEDED_ERR: DOM Exception 22″错误,极有可能因为webStorage缓存的问题。


2.localStorage只能存字符串,不能存对象。


3.Jquery的Html(str)函数会将str里的内容进行过滤,遇到显示有问题,可使用(“.show”)[0].innerHTML=str代替。


4.对于xml字符串,如果用jquery操作,需转换为xml对象,$.parseXML(source)。对于从接口返回的xml,Jquery可以设置指定返回xml对象。


5.Jquery Mobile在不同的页面切换,Android有明显的卡顿及闪屏感觉。


$.mobile.showPageLoadingMsg()不生效。


A1.Android有明显的卡顿及闪屏感觉,据说是因为其对CSS3支持不好。


A2.Jquery Mobile在不同的页面切换,需要Loading效果的可以试下以下代码:


function w2mTransitionHandler( name, reverse, $to, $from ) {
    $(".ui-loader").css({"display": "block", "top": "252px !important" });
    var deferred = new $.Deferred(),
    reverseClass = reverse ? " reverse" : "",
    viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
    doneFunc = function() {

        $to.add( $from ).removeClass( "out in reverse " + name );

        if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
            $from.removeClass( $.mobile.activePageClass );
        }
        
        $to.parent().removeClass( viewportClass );
        $(".ui-loader").css({ "display": "none" });
        deferred.resolve( name, reverse, $to, $from );
    };

    $to.animationComplete( doneFunc );

    $to.parent().addClass( viewportClass );

    if ( $from ) {
        $from.addClass( name + " out" + reverseClass );
    }
    $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );

    return deferred.promise();
}
$.mobile.defaultTransitionHandler = w2mTransitionHandler;


A3.$.mobile.showPageLoadingMsg()有时会不生效,考虑以下代码:


$(":button").click(function(){   
    //position:fixed;top: 252px !important; display: block;
    $(".ui-loader").css({"top": "252 !important","position":"fixed"});
    $(".ui-loader").show("normal", function () {
        var list = new ListData(channelid, num, channelname);
        list.getData();
        if(list.list.length==0)
        {
            alert("已是最后一页");
        }
        else
        {
            list.showData();
            num++;
        }
        $(".ui-loader").hide("normal");
    });
})