|
|
最近一个月，一直在用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")。