开发phonegap应用问题汇总

事前并未进行可行性分析，用phonegap框架开发仅是用于尝试，我的感觉是公司的这个项目可有可无，呵呵，感觉而已...

开始之初没有做太多的规划，以至于后来想重构代码的打算，由于各种原因吧，应用可以正常使用，只是代码有点...

下面大致介绍一下软件以及遇到的问题

        我用的是phonegap2.7版本，jquery mboile-1.1.1

首先是加载splash界面，以及index.html（放在了config.xml文件中），这个都知道

[java] view plaincopy

1. super.setIntegerProperty("splashscreen", R.drawable.splash);  
2. super.loadUrl(Config.getStartUrl(), 6000);  

        问题1：在加载loadUrl可能会出现CordovaWebView: TIMEOUT ERROR 的异常，我的解决办法是重写onReceivedError方法，具体逻辑按需求而定，可以不让程序挂掉，例子如下

[java] view plaincopy

1. @Override  
2. public void onReceivedError(int arg0, String arg1, String arg2) {  
3.     Toast.makeText(getApplicationContext(), "请检查网络连接是否正常", Toast.LENGTH_LONG).show();  
4.     return;  
5. }  

     问题2：page页面点击事件的处理，webview本身webkit内核对单机和双击事件中有一个300ms的延迟，在此我使用的fastclick.js同意处理事件，（曾尝试jquery moblile中的tap、taphost等来处理事件，最后效果不太理想，改用了fastclick.js）

[javascript] view plaincopy

1. window.addEventListener('load', function() {//登录页后退  
2.     var i = 0, fastClick;  
3.     fastClick = new FastClick(document.body);  
4.     document.getElementById('back').addEventListener('touchstart', function(event) {  
5.         //navigator.app.backHistory();  
6.     }, false);  
7. <span style="white-space:pre">  </span>//<span style="font-family: arial; font-size: 13px; line-height: 18px;">fastclick中有touchstart、touchend、touchcancel、click等事件处理</span>  
8. }, false);  

   fastclick文件下载地址：http://download.csdn.net/detail/xiangjai/5800805

问题3：jquery库和其它库冲突的问题，此问题 本人理解能力有限，只解决了问题，道理没有明白

[javascript] view plaincopy

1. jQuery.noConflict();  

问题4：消除页面切换效果、消除对话框出现的效果等

[javascript] view plaincopy

1. $(document).bind("mobileinit", function() {  
2.         if (navigator.userAgent.indexOf("Android") != -1) {  
3.             $.mobile.defaultPageTransition = 'none'; //页面切换效果  
4.             $.mobile.defaultDialogTransition = 'none'; //对话框出现的效果  
5.             //当jQuery Mobile尝试加载外部页面的时候，请求会通过$.mobile.loadPage()发出。 只有当$.mobile.allowCrossDomainPages被设为true的时候，跨域的请求才会通过  
6.             //具体http://www.jqmapi.com/componts/page/phonegapapp.html  
7.             $.mobile.allowCrossDomainPages = true;   
8.               
9.         }  
10.     });  

问题5：定义加载条

[javascript] view plaincopy

1. //显示加载器  
2. function showLoader() {  
3.     $.mobile.showPageLoadingMsg("b", "数据加载中..."); //加载的theme， 加载的文字  
4.     $.mobile.loadingMessageTextVisible = true;  //是否显示文字  
5. }  
6. //隐藏加载器.for jQuery Mobile 1.2.0  
7. function hideLoader()  
8. {  
9.     //隐藏加载器  
10.     $.mobile.hidePageLoadingMsg();  
11. }  

问题6：关闭input数字的自动识别， 此代码加载html文件

[html] view plaincopy

1. <!--关闭电话号码识别-->  
2. <meta name="format-detection" content="telephone=no">  

问题7：jqueryMobile footer/header问题 显示隐藏的问题

jqueryMobile     footer  和  header 能不能一直设置显示状态，我发现每次点击页面都会隐藏再点击又显示出来，这个很烦人，有没有方法设置一直保持屏幕底部  不会跑到程序最下面……我已经设置了    data-position="fixed" 但是没有固定位置的效果！或者这个有没有更好的方式  固定？     可以尝试data-tap-toggle="false"  ，或者是在包含data-role="header"的div中加入style="position:fixed;"

 问题8：js端数据存储

[javascript] view plaincopy

1. sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。  
2. 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。  
3. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。  
4.   
5. localStorage.getItem(key):获取指定key本地存储的值  
6. localStorage.setItem(key,value)：将value存储到key字段  
7. localStorage.removeItem(key):删除指定key本地存储的值  
8.   
9. window.localstorage.setItem("sessionID", "1234");  
10. var sessionId = window.localStorage.getItem("sessionID");  
11. window.localStorage.removeItem("sessionID");  
12.   
13.   
14. window.sessionStorage.setItem("sessionID", "1234");  
15. var sessionId = window.sessionStorage.getItem("sessionID");  
16. window.sessionStorage.removeItem("sessionID");  

问题9：页面跳转

[javascript] view plaincopy

1. $.mobile.changePage(allId, {  
2.     transition : 'none',  
3.     reverse : false  
4. });  

我在应用中没有使用页面跳转间的效果，

例如 $.mobile.changePage(a2.html',{transition: "none",changeHash:false}); 此句表明了跳转时，是否保留页面缓存，具体效果可以写三个页面进行测试一下效果，changeHash在登录页面跳转时有很好的作用

 

 问题10： 自定义toast，js实现android中toast效果  

参数msg：显示文字，  duration：显示的时间长度

[javascript] view plaincopy

1. function Toast(msg, duration) {  
2.     duration = isNaN(duration) ? 3000 : duration;  
3.     var m = document.createElement('div');  
4.     m.innerHTML = msg;  
5.     m.style.cssText = "width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:70%; left:20%; z-index:999999; font-weight:bold;";  
6.     document.body.appendChild(m);  
7.     setTimeout(function() {  
8.         var d = 0.5;  
9.         m.style.webkitTransition = '-webkit-transform ' + d  
10.                 + 's ease-in, opacity ' + d + 's ease-in';  
11.         m.style.opacity = '0';  
12.         setTimeout(function() {  
13.             document.body.removeChild(m)  
14.         }, d * 1000);  
15.     }, duration);  
16. }  

问题11：page页面中日历控件，如下图所示

 控件例子下载地址：http://download.csdn.net/detail/xiangjai/5541715  ，例子中有使用说明

问题12：对虚拟按键确定键的捕获（其它键的捕获类似）

[javascript] view plaincopy

1. // 处理弹出输入法  
2. function onKeydown(event) {  
3.     if (event.keyCode == 13) { // enter  
4.         event.returnValue = false; // 事件的返回值为false,即取消事件处理  
5.         event.cancel = true; // 取消事件  
6.     }  
7. }  

问题13：js和java代码互相调用

 java层调用js层：可以在继承DroidGap的activity中直接使用super.loadUrl("javascript:appFromActivity()"); 就可以从java调用js中的方法，也可以传递参数

我直接设定了继承DroidGap的activity的启动模式为singleTask，然后在生命周期的onstart方法中来调用该方法

js调用java层：直接使用phonegap插件即可

还有用到的一些零散的语法：

$.mobile.activePage.attr('id')   //当前活动页page的Id

$.mobile.activePage.is('#test')  //当前活动页是否是Id为test