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

来源：互联网发布：mindmap mac 编辑：程序博客网时间：2024/06/05 04:21

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参考：

http://www.jqmapi.com/download.html

关于发布和编译，建议使用eclipse+adt的开发工具进行分发。因为Dreamweaver cs5.5的PhoneGAP的发布调试BUG不少，而且你可以随时更新PhoneGAP.

要求提高WEB前端开发能力。

PhoneGAP如何呢?

好坏参半：http://developer.51cto.com/art/201112/307673.htm

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

解决问题的网址：

我用的就是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('点击了搜索按钮!');
}

运行效果：

http://hi.baidu.com/codefish/blog/item/cf705607625b5dd17a89477d.html

phonegap 退出应用

博客分类：

jquery mobile

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

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

http://blog.csdn.net/xfwgq/article/details/7297997

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

具体的方法找GOOGLE:http://stackoverflow.com/questions/7423776/fully-closing-a-phonegap-android-app

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

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

原文地址：http://blog.csdn.net/wlanye/article/details/7411133

0 0