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

phoneGap+jquery mobile项目经验相关推荐

  1. 转载:用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发

    转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dr ...

  2. jquery mobile项目(一款“运动”移动web)

    包含功能: 登录页 注册页 首页 社区 我的运动 消息 我 该文章只列出部分代码,项目的所有代码将上传到资源,免费下载. 下载地址:https://download.csdn.net/download ...

  3. 移动web前端框架一、jQuery Mobile

    简述:jQuery Mobile是 jQuery发布的针对手机和平板设备.经过触控优化的Web框架.它基于jQuery,在不同移动设备平台上可提供统一的用户界面.该框架基于渐近增强技术,并利用HTML ...

  4. jQuery Mobile中文手册:开发入门

    jQuery Mobile 以"Write Less, Do More"作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流 ...

  5. web上渐进使用jQuery Mobile中animate相关CSS

    一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...

  6. jQuery Mobile 高级设计模板

    来自:http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html 下载: template_1 ...

  7. html实现在线新闻浏览器,使用JQuery Mobile实现手机新闻浏览器

    [IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...

  8. jquery mobile android浏览器,我们怎样使用jQuery Mobile实现手机新闻浏览器

    大家是否还对这部分知识存在疑问呀,让我来为大家详细解答一下. Mobile项目是jQuery项目下的在方面的又一力作.swift 教程在本文中,笔者将带你一步步更深入学习使用jQuery Mobile ...

  9. jquery mobile android浏览器,使用JQuery Mobile实现手机新闻浏览器

    [IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...

最新文章

  1. openssl 模块 安装 centso Ubuntu
  2. SGS 0.9.7 协议解析
  3. vc++怎么可以直接刷掉MBR?搞笑的吧
  4. 灵活运用 SQL Server 数据库的 FOR XML PATH
  5. typeorm_Nestjs 热更新 + typeorm 配置
  6. 替换Quartus 自带编辑器 (转COM张)
  7. 零基础教你玩转ESP8266(一) 重识ESP8266
  8. sql server 群集_部署SQL Server以使用群集共享卷进行故障转移群集–第1部分
  9. T-SQL命令性能比较– NOT IN与SQL NOT EXISTS与SQL LEFT JOIN与SQL EXCEPT
  10. C语言程序设计专项练习——PTA
  11. 第一性原理分子动力学(AIMD)结果分析教程
  12. odoo14 Botton按钮标签属性详解及按钮图标使用
  13. Mac OSX 升级python six模块版本
  14. Invalid header signature; read 0x3C0A0D0A0DBFBBEF, expected 0xE11AB1A1E011CFD0
  15. 用友NCC产品API使用指南
  16. 浅说北仑有趣的地名之霞浦篇
  17. 你所不知的Redis三个特殊类型
  18. PyCharm关闭更新提示
  19. 全网通报:数模国赛作弊的后果
  20. Ajax的简历技能如何写,web前端简历专业技能填写样本

热门文章

  1. react 禁止微信调整字体大小
  2. cisco设备运维常用命令 总结-1
  3. oracle安装问题: 11g安装未填写hosts导致弹窗错误
  4. 51 nod 机器人走方格
  5. GDI+编程说明及小结
  6. 简单的dns解析过程
  7. 对于shell脚本获取参数的一些小技巧
  8. WCF(Sender) to MSMQ to WCF(Receiver)
  9. C#之Action和Func的用法(转自 https://www.cnblogs.com/LipeiNet/p/4694225.html)
  10. 2018.12.5 区块链论文翻译