JQueryMobile + PhoneGap 经验总结
1. pageinit & pageshow
JQM的官方手册重点提醒了使用$(document).bind(‘pageinit’)代替$(document).ready()。
但当你需要对某一个页面(page)编写其独享的Javascript脚本时, 选择器应该选择的是该page层, 而不是document, 并使用live()
添加事件处理器。这在ajaxEnable=true的情况下尤为重要。
JS :
$(document).bind('pageinit',function(){
console.log('任意一个页面初始化时响应');});
$(document).bind('pageshow',function(){
console.log('任意页面被显示时响应')});
$("#hello").live('pageinit',function(){
console.log('只响应id为hello的页面初始化');});
$("#hello").live('pageshow',function(){
console.log('只响应id为hello的页面被显示');});
Html :
<body><divid='hello'data-role='page'><divdata-role="content"><ahref="#world"data-role="button">Next</a></div></div><divid='world'data-role='page'><divdata-role="content"><ahref="#hello"data-role="button">Previous</a></div></div></body>
关于JQM事件的总结可以参考JQM脚本的引用及脚本写法经验。
2. refresh
通过脚本修改JQM页面数据时, 通常需要再进行一次refresh。可以根据不同的类型选择以下对应的方法。
$('div#id').trigger('refresh');
$('ul#id').listview('refresh');
$('button#id').button('refresh');
$('input#id[type=checkbox]').checkboxradio('refresh');
还有更多的可以参考JQM的界面数据刷新。
3. tap
JQueryMobile在Android设备上的tap事件会出现多次触发的问题, 对此可以参考Ghost Click。
我们的解决方案是使用Google FastButton,
将原来需要用tap的地方改用fastbutton处理。
4. taphold
检查jquery.mobile-1.2.0.js, 1722行。
timer = setTimeout(function(){
triggerCustomEvent( thisObject,"taphold", $.Event("taphold",{ target: origTarget }));}, $.event.special.tap.tapholdThreshold );
在触发taphold事件时没有清除handlers, 所以当taphold事件后, 本不应该被触发的tap事件也被触发了。
暂时修复的方案是在1722行添加:
timer = setTimeout(function(){
clearTapHandlers();// <---- + 这一行
triggerCustomEvent( thisObject,"taphold", $.Event("taphold",{ target: origTarget }));}, $.event.special.tap.tapholdThreshold );
这个bug存在于JQM1.2.0及以下版本。
5. swipe
JQM的swipe响应也是非常慢/诡异, 如果需要使用swipe事件, 建议寻找其他代替的方案, 如TouchSwipe。
6. popup
你可以选择在脚本中生成popup, 并通过popup('open')
及popup('close')
进行打开/关闭, 借此可以实现很多实用的功能。
如以下模拟confirm的效果:
var confirm =function(content, title, response){var html ="<div data-role='popup' id='mToast_confirm' data-theme='d' data-overlay-theme='b' style='max-width:340px;overflow:hidden;'><div class='ui-header ui-bar-a ui-corner-top'><h1 class='ui-title'>"+ title +"</h1></div><div class='ui-content'><p></p>"+ content +"<p></p><a data-role='button' data-inline='true' data-rel='back' data-mini='true'>取消</a><a id='mToast_confirm_response' data-role='button' data-theme='b' data-icon='check' data-inline='true' data-mini='true'>确定</a></div></div>",
previous = $(".ui-popup-active div[data-role=popup]"),
divConfirm = $("div#mToast_confirm");
previous.popup('close');if(divConfirm.length >0){
divConfirm.remove();}
divConfirm = $(html).appendTo("div[data-role=page]:first");
divConfirm.trigger('create')// <-- 生成popup.trigger('refresh').popup().find("#mToast_confirm_response").on('fastClick',function(){
divConfirm.popup('close');
previous.popup('open');
response();});
divConfirm.popup('open');// -->};
confirm('are you sure?','Confirm',function(){
alert('sure');});
需要注意的是popup('open')
前需要对div进行.trigger('create').trigger('refresh').popup()
。
此外, $.mobile.popup.active
也非常实用, $.mobile.popup.active.element[0]
将返回当前显示的popup层对象。
7. data-rel=back
当你发现使用data-rel=back
的返回按钮响应速度难以忍受的时候, 可以为这个按钮单独绑定一个事件处理器。
如以下脚本将加快header上的返回按钮响应速度:
$(document).bind('pageinit',function(){
$("div[data-role=page] > div[data-role=header] > a[data-rel=back]").bind("fastClick",function(event){
$.mobile.back();returnfalse;});});
但这并不是一个好的解决方案, 如果你对back-rel=back
的处理感兴趣可以查看jquery.mobile-1.2.0.js : 4141行。如果有更好的解决方案请告知我^_^。
8. BackButton (PhoneGap + JQM)
在PhoneGap+JQM的方案下, 发现Android手机上的返回硬键无效或者对popup的处理不正确时(多为ajaxEnable=false的情况), 加入以下脚本:
document.addEventListener("deviceready", backKeyListener,false);function backKeyListener(){
document.addEventListener("backbutton", onBackKeyDown,false);function onBackKeyDown(){try{if($.mobile.popup.active){var popupDiv = $.mobile.popup.active.element;
popupDiv.each(function(){if($(this).parent().hasClass('ui-popup-active')){
$(this).popup('close');returnfalse;}});}else{
$.mobile.back();returnfalse;}}catch(e){
console.log('BackButton Listener Catch : '+ e);}}}
如果这段脚本不起作用, 请再参考第十条经验, 对phonegapNavigation进行设置。
9. $.mobile.loading
建议把$.mobile.showPageLoadingMsg()
以及$.mobile.hidePageLoadingMsg()
的脚本改为$.mobile.loading('show')
以及$.mobile.loading('hide')
。
这个方法同样可以配置内容、样式等参数: $.mobile.loading('show', {text : 'test', theme : 'a'});
。
更多的信息参考JQM API – methods中的描述。
10. $.mobile.back()
如果你是使用PhoneGap + JQueryMobile进行开发, 设定了ajaxEnable=false
, 并且发现$.mobile.back()
无效, 那么请尝试设定phonegapNavigationEnable=true
。
当该值为true时, $mobile.back()会使用nav.app.backHistory();
, 否则使用window.history.back();
。
但这个参数也 仅 建议在ajaxEnable=false的情况下进行设置。
更多的信息可以参考JQM API – globalConfig中的描述。
11. ajaxEnable
如果希望使用PhoneGap将应用打包为app, 我的建议是, 尽量使用ajaxEnable=true
, 否则体验十分不好, 而且你还会遇到更多的问题。
此外应该给每一个page设定id, 并遵循第一条建议。
12. 页面跳转
请使用$.mobile.changePage()
代替window.location.href
。
如果要刷新当前页面呢? 我的方法是:
$.mobile.changePage($.mobile.activePage.jqmData('url'),{reloadPage :true});
但这理应不是最好的方法, 如果你有更好的方法请告知我^_^。
13. 慎重选择JQueryMobile
如你所见, 使用JQM + PhoneGap进行WebApp开发会遇到许多问题。
但JQM目前还是只适合做简单的WebApp, 如果坚持做复杂, 其效率将会十分堪忧。
当然, 如果你选择了一个正确的方式, 那其中大部分都可以避免。
此外, Github上有许多项目对基于JQM的开发会有很大的帮助。
The-M-Project的UI基于JQM, 但其拥有更好的结构, 并实现了一些你可能会需要的功能。其文档也十分健全, 你可以查看其更详细的介绍。你不一定使用这个框架, 但在JQM的开发上, 这个项目有许多值得借鉴的地方。
离线数据的库, 这里有一个结合JQM的Demo。
3. artTemplate
出自腾讯CDC的javascript模板引擎。
Tagged with: jquerymobile, phonegap
JQueryMobile + PhoneGap 经验总结的更多相关文章
- phongap+ jquery + asp.net +android,我把我遇到的问题和处理方法的连接总结一下
这些都是最基本的问题,在实际的运用中都会用到 第1章.搭建Android的开发环境-跟我学编程 Win7旗舰版中的IIS配置asp.net的运行环境 - 追夢 - 博客园 vs2012下asp.net ...
- 【App FrameWork】框架的页面布局
之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...
- 一个必用的javascript框架:underscore.js - wine的思考 - ITeye技术网站
AngularJS+JqueryMobile+PhoneGap 打造APP « Dogeek AngularJS+JqueryMobile+PhoneGap 打造APP
- 多本Web前端深度修炼书籍(提供网盘下载链接)
书籍介绍:这本书涵盖了html5新增标签和功能,而且提供了jquerymobile,Phonegap,Sencha Touch框架的介绍和应用,最后还带了一个移动web应用的样例,绝对是移动web开发 ...
- 用phonegap和jquery-mobile写android应用
今天纪录的是学习用phonegap和jquery-moblie来写android的过程.环境搭建. 我的习惯是直接上官网看文档,看get-started guide之类的文档.然后在看参考手册.然后就 ...
- phoneGap+jquery mobile项目经验
最近一个月,一直在用phoneGap+jquery mobile来开发一项目. 下面谈谈自己在开发过程中遇到的一些问题以及解决方法. 开始选择框架时,曾试过采用其他框架做UI,例如chocol ...
- Html5 移动应用软件开发框架 JqueryMobile SenchaTouch 介绍
一.JqueryMobile 介绍 jQuery Mobile 是 jQuery 在手机上和平板设备上的版本. jQuery Mobile 不仅会给主流移动平台带来 jQuery 核心库,而且会发布一 ...
- Nova PhoneGap框架 第十章 开发环境
10.1 Visual Studio + ReSharper PhoneGap程序由HTML.CSS和JS编写而成,这3种语言的编写你都可以用记事本来完成,但显然效率比较低,出错的概率也比较大.一个强 ...
- android 从 phonegap 到 js webview 交互
像生活类.办公协同类. 动态添加,下载等. 1.phonegap 我这里用了旧的版本,可能新版本变化大了. 创建asset资源文件夹,然后新建index.html copy 相应的js 文件进来. 创 ...
随机推荐
- Magento请求分发与控制器
Magento请求分发与控制器 Magento使用的是MVC结构,模型-试图-控制器结构,这样更好的实现显示逻辑和数据,业务逻辑的分离,更好的适合开发! 下面为传统的mvc结构 URL请求被一个PHP ...
- python 各种控制语句
python的控制语句分为: if: if condition: cmd elif condition:#该块为可选 cmd else:#该块为可选 cmd while: whlie conditio ...
- shell脚本-获取时间
获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以使用 ...
- 理解HMM
hidden markov model markov model: 把一个总随机过程看成一系列状态的不断转移, 其特性主要使用转移概率来表示. HMM:认为模型的状态是不可观测的(hidden), 能 ...
- 精妙无比 8款HTML5动画实例及源码
1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...
- puppet安装配置及使用
puppet安装前准备 一.服务器信息 master端:10.10.10.201 master.fansik.com slave端:10.10.10.156 slave.fansik.com 三台机 ...
- poj2553 强连通
题意:定义了一个图的底(bottom),是指在一个图中能够被所有点到达的点,问途中有哪些点是图的底. 首先是同一个强连通分量中的点都能够互相到达,强连通分量中一个点能到达其他点,也必然代表该强连通分量 ...
- Python 判断一个字符串是否在列表中任何一个字符串中出现过
strlist = ['a1', 'a2', 'b1'] if any("a" in s for s in strlist):
- kuangbin_UnionFind A (POJ 2236)
挺接近模板的一题 接受O操作的时候扫一遍 符合条件的merge进去 done #include <cstdio> #include <cstring> #include < ...
- 【转】完美解除Windows7的驱动程序强制签名限制
原文网址:http://nick.txtcc.com/index.php/nocategory/290 Windows 7很J,很多驱动程序都无法安装,因为Windows 7不像Vista,必须要求所 ...