phoneGap+jquery mobile项目经验

 

 

最近一个月，一直在用phoneGap+jquery mobile来开发一项目。

下面谈谈自己在开发过程中遇到的一些问题以及解决方法。

开始选择框架时，曾试过采用其他框架做UI，例如chocolatechip，它的UI比jquery mobile做得更加美观，且体验比jqm反应速度快，大家不妨去体会一下。

【1】访问外部url,需要在PhoneGap.plist中ExternalHosts中添加域名，注意，不要把协议和路劲加进来。

【2】若使用第三方phonegap插件（https://github.com/phonegap/phonegap-plugins），需在PhoneGap.plist中Plugins中添加对应项。

【3】iScroll插件：手动刷新更可靠。

var scroll;

function loaded(){

scroll = new iScroll("wrapper",{checkDOMChange:false});

}

document.addEventListener("DOMContentLoaded",loaded,false);

当DOM树改变时，手动刷新scroll.refresh();

页面滚动到顶部：scrollTo(x,y,time,relative)

如scroll.scrollTo(0,0,500);

【4】禁止全屏滚动：document.addEventListener("tochmove",function(e){e.preventDefault();},false);

【5】中间显示Loading进度框

$.mobile.loadingMessage="Loading...";//自定义文字

$.mobile.showPageLoadingMsg();//显示

$.mobile.hidePageLoadingMsg();//隐藏

【6】操作XML文件

我们将配置信息保存在config.xml中，读取内容：

function getConfig(key){

$.ajax({

url:"config.xml",

async:false,//同步

type:"Get",

dataType:"xml",

timeout:1000,

error:function(xml){},

success:function(xml){

  var url;

$(xml).find("item").each(function(i){

if(key==$(this).children("name").text())

url=$(this).children("url").text();

})

return url;

}

})

}

注意，Chrome浏览器设置了安全项，不支持读取本地文件，要加载服务端文件

【7】数据加载：

$.ajax({

url:"http://www.XXX.XXX",

async:true,//异步

cache:false,

type:"Get",

dataType:"json",

timeout:5000,

error:function(data){},

success:function(data){},

complte:function(data){}

})

注意以上都是逗号结尾。

我们在success函数中操作DOM，

function(data){

$.each(data,function(i,field){

$("ul").append("<li>"+filed.name+"</li>");

})

}

最后切记刷新listview: $("ul").listview("refresh")。