Phonegap+JqueryMobile问题总结与经验汇总
最近用phonegap+JqueryMobile开发了一个程序,跨android和ios两个平台,这期间遇到了很多问题,在论坛上苦苦搜索以及提问,但好多问题都没有被解决,网上搜的很多答案都是转帖或者不准确的。后来通过自己的研究和探索以及在stackoverflow上的一些资料,终于把项目做完了。现在总结一些实用的技巧:
1 关于载入框的自定义,显示和隐藏
新版本的JM需要这样设置
$.mobile.loadingMessageTextVisible=true;//使载入时文字可见
$.mobile.loadingMessage="载入中..."; //设置文字内容
设置完上面的两行代码后,就可以正常使用了
$.mobile.showPageLoadingMsg();//显示
$.mobile.hidePageLoadingMsg();//处理完成后隐藏
2页面跳转时很实用的changeHash: false功能($.mobile.changePage的可选参数)
(页面跳转后,是否保存此界面的记录)
我认为此条是非常实用且重要的,因此加了红色标题。changeHash:false 是$.mobile.changePage即页面跳转时的可选参数。官方解释为:changeHash
(boolean,default: true) Decides if the hash in the location bar should be updated. 决定在locationbar里的hash值是否更新。简单的说就是是否要把本次打开页面的记录存放到hash表中。下面举个例子说明:有三个界面A,B,C. A界面为首页,B界面为登陆页面,C界面为用户中心。如果点击A界面里的用户中心按钮,先检查用户是否登录,如果没有登录,那么先跳转到B界面。用户填写信息登录成功后跳转至C界面。B界面里的登录js代码在处理成功后,如果你这样写:$.mobile.changePage($("#C"));虽然跳转到了C界面,但是当你点击返回按键时,会返回到B界面,也就是登陆界面。这样显然是不对的。如果加上本参数$.mobile.changePage($("#C"),{changeHash: false}); 那么到C界面后再点击回退按键,回退到的就是A界面了。参数的作用从字面即可理解为,是否要保存hash记录。保存了就会返回到B界面,不保存则返回到B之前的界面也就是A界面了。
3关于phonegap播放音频文件的位置:
Android:如果放在www目录下,应该这样写:
var my_media=new Media("file:///android_asset/www/boot.mp3",function(){});
IOS:写法比较简单,www目录下
Var my_media=new Media(“boot.mp3”,function(){});
4 如何去除ios界面上下拖动时弹性的黑边显示
在ios的主界面上,明明一屏就显示完了,也不存在滚动条的情况下,当上下拖动时,界面还是会跟着上下活动,并且出现很讨厌的黑边。在网上搜索此问题,有的解决方案是这样写的:
UIWebView *contentView=[[UIWebView alloc] init];
[(UIScrollView *)[[contentViewsubviews] objectAtIndex:0] setBounces:NO];
但是这对于ios初学者以及纯phonegap+JM开发者来说,根本不知道加在哪里。其实是有一种更简单的办法的.打开Cordova.plist文件。我们可以找到
UIWebViewBounce字段,默认的value设置的是Yes,只要把它设置为NO,问题就完美解决啦。View就无法bounce啦~\(≧▽≦)/~
5 关于跨域访问问题
$.mobile.allowCrossDomainPages
当jQuery Mobile尝试加载外部页面的时候,请求会通过$.mobile.loadPage()发出。 只有当$.mobile.allowCrossDomainPages被设为true的时候,跨域的请求才会通过。 因为jQuery Mobile框架会通过浏览器的location hash值来跟踪哪些页面被浏览过,如果有问题 的 跨站脚本攻击(XSS攻击)能够修改hash 值并设为一个跨域URL值的话,就可能会有安全性上 的问题。这就是为什么$.mobile.allowCrossDomainPages 默认设为false.
所以如果PhoneGap应用想要加载远程服务器的文件,
$.support.cors 和 $.mobile.allowCrossDomainPages 都必须设为true.并且 $.mobile.allowCrossDomainPages的设置必须要在跨域请求之前完成。 所以我们建议在mobileinit 中这样写:
$( document ).bind("mobileinit", function() {
$.support.cors=true;
$.mobile.allowCrossDomainPages= true;
});
另外在ios的开发中,我们还需要配置白名单,否则访问其它主机仍然是不允许的。
在Cordova.plist中找到ExternalHosts字段,在其中加上你要访问的远程主机。最简单的办法是:
在ExternalHosts加一下选项为*,*号的意思是可以匹配为任意字符的url。这样就可以访问外部的url了。