Phonegap+JqueryMobile问题总结与经验汇总

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了。