关闭

html5+Jquery mobile+phoneGAP开发混合程序实战记录(及疑难)

标签: phonegapjqueryhtml5mobileandroiddreamweaver
7442人阅读 评论(2) 收藏 举报
分类:

1)开发商务程序的技术方案书

      我不是做游戏的,当然我也会Android原生程序开发,感觉无法跨平台,而且REST开发模式不是开玩笑的复杂。虽然移动应用不是复杂的,功能相对简单,但是我认为不是好的方案,关于多平台的方案书已经完成,方案详细论述了各种开发模式已经关于开发IOS,WP7,ANDOIRD程序的各种方案。最后对于我单位的应用机制来讲属于商业应用,不是特别强调速度的。所以采用了结合PhoneGAP+HTML5+Jquery mobile+css3开发模式。
速度是关键,在混合模式中PhoneGAP是开源免费的,其他的资料稀少。
      关于xpower ++,mono,firemonkey也不流行。投入到HTML5混合架构了,关注html5的未来,偶尔搞搞OBJ -C罢了。

2)解决虚拟器的问题。
     单位匹配的笔记本比较低,内存只有2G,运行模拟器比较慢,(后来增加4G,我还没有安装呢)。2G运行GOOGLE模拟器环境,确实很慢,但是和实际的效果差别不大。
     现在网络上一些关于Android x86来测试程序的说法,我在测试混合应用程序,基于Intel架构的Android x86和arm的android真机有明显的不同,特别是在JQM的页面跳转,基本是就是直接退回到了android x86的主界面上。速度好了,但是效果差异太大。
    在android开发纯原生程序,基本效果还是比较仿真的,笔者仅测试了几个原生的程序。
    HTML5+JQM的混合程序在android x86效果不佳。

3)HTML5+JQM+phonegap架构在真机的需要处理的问题。

4)模拟器测试问题,最好采用android x86,各个版本都不同。现在我测试过android 2.2,3.2.4.0很多都无法运行PhoneGAP程序。

我现在发现一个好的版本。android-x86-4.0-RC1-eeepc.iso那个版本不错。android-x86-4.0-eeepc-20120101(bug更多,无法启动)====

推荐android-x86-4.0-RC1-eeepc》。

其他的版本版本,例如华硕等未测试过,网上更多的使用eeepc版本的。此版本的另外一个问题,不知道为什么不能下载文件????正在解决中。
使用RGraph的图标不能显示,基本的导航偶尔也会出现问题,真难调试,简单的项目应用可以选,产品级别不推荐。就像学习日语,笑着进去,哭着出来。有些问题,步入使用Intent简单快。
使用App inventer加强界面开发。我想还是不错的。

phonegap作为跨平台的本地浏览器胶水,不同的粘贴补鞋是做好的工具,但是针对单项的产品级长线开发反而力不重新。成本考量自己权衡。

==========================

HTC G10手机真机

CPU 骁龙Snapdragon MSM8255 1Ghz

内存:1.5GB

主屏尺寸:4.3英寸。

主屏分辨率:800*480分辨率。

触控:多点触控。

操作系统:AndroidOS  2.3.3

 

测试效果:

1)速度较流畅,PhoneGAP效果不错。


JqMobi框架更快,就是太丑了。最后还是使用jqmobi,sencha要钱不选。

 

测试结论:

1)开发时候应该注意页面转场动画的连贯性,增加用户体验,动画处理需要细腻。

2)增加关闭程序的菜单键。


4)开发工具和问题

建议使用Dreamweaver cs 5.5自带的实时显示,进行开发和调试,快而且好,和真实的效果相比流转差不多。
真机的显示效果会更好,因为真机的分辨率一般较高。弥补相关的缺陷。
开发界面如下:

真机效果会更好,关于学习教材。
参考jquery mobile api就好了。国外有一本<jquery mobile>英文版(青蛙封面的那个),不错的。里面还有源代码,我认为是最好的图书还有实战教材。配合一些JQUERY实战+ajax即可。完全满足你的基本开发要求。
其他的找GOOGLE了。
还有大量的API参考:

关于发布和编译,建议使用eclipse+adt的开发工具进行分发。因为Dreamweaver cs5.5的PhoneGAP的发布调试BUG不少,而且你可以随时更新PhoneGAP.
要求提高WEB前端开发能力。

PhoneGAP如何呢?


=====================关闭的问题:

解决问题的网址:

我用的就是navigator.app.exitApp();????

phonegap for android 如何在App中响应退出按钮
2011/11/02 17:35

原创文章,转载请注明出处。

前言:
采用phonegap开发的WebApp,如果用户点击退出按钮,则App会直接退出。
下面的代码可以响应后退按钮,并提示用户再次点击才退出。
如果3秒后没有点击则重新注册事件。

注意:window.plugins.ToastPlugin.show_short()是显示toast消息的插件!

代码:

// 等待加载PhoneGap
document.addEventListener("deviceready", onDeviceReady, false); 
// PhoneGap加载完毕
function onDeviceReady() {
//按钮事件
document.addEventListener("backbutton", eventBackButton, false); //返回键
document.addEventListener("menubutton", eventMenuButton, false); //菜单键
document.addEventListener("searchbutton", eventSearchButton, false); //搜索键
}

//返回键
function eventBackButton(){
//confirm("再点击一次退出!");
window.plugins.ToastPlugin.show_short('再点击一次退出!');
document.removeEventListener("backbutton", eventBackButton, false); //注销返回键
//3秒后重新注册
var intervalID = window.setInterval(
function() {
window.clearInterval(intervalID);
document.addEventListener("backbutton", eventBackButton, false); //返回键
},
3000
);
}
//菜单键
function eventMenuButton(){
window.plugins.ToastPlugin.show_short('点击了 菜单 按钮!');
}
//搜索键
function eventSearchButton(){
window.plugins.ToastPlugin.show_short('点击了 搜索 按钮!');
}

运行效果:




在使用phonegap的navigator.app.exitApp()退出应用的时候,应用总是会退出到一个白屏页面,感觉并没有退出。在网上找了很久,有人说1.1的版本修复了这个问题,如是将jar包和js都换成1.1版本的,但是navigator.app.exitApp();这段代码好像不执行了,最后将AndroidManifest.xml中<uses-sdk android:minSdkVersion="7" />的值改成4就可以了。

================

function exitApp(){
var myapp = new App();
myapp.exitApp();
}


在GOOGLE里面查找:android  Phonegap app closing problem


如果想做长期产品,PhoneGAP+html5千万不要选,问题太多。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:990711次
    • 积分:11904
    • 等级:
    • 排名:第1245名
    • 原创:91篇
    • 转载:597篇
    • 译文:12篇
    • 评论:78条
    最新评论