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

原创 2012年03月30日 14:17:09

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如何呢?
好坏参半: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的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:http://stackoverflow.com/questions/7423776/fully-closing-a-phonegap-android-app

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


如果想做长期产品,PhoneGAP+html5千万不要选,问题太多。
版权声明:本文为博主原创文章,不必许可,随便转载。

Phonegap jQueryMobile 在线应用拍照、相册选择上传+预览

拍照上传以及从相册中选择图片上传是大多数手机应用的典型功能,这几天在做一个移动端的项目,其中就用到该功能。      项目技术选择的是Phonegap+jQueryMobile,因为jQuery自己比...
  • hllinc8
  • hllinc8
  • 2015年07月07日 18:28
  • 2025

移动端开发-JqueryMobile实战(一)

又来写一篇教程,是因为最近在图书馆看到了一本书《jQuery移动Web开发》,因为以前没有怎么关注过移动端的开发,于是就把jQuery Mobile看了一下,并想根据书中最后一节讲的创建一个RSS阅读...
  • sinat_25127047
  • sinat_25127047
  • 2017年07月07日 17:23
  • 207

JQuery Mobile 应用实例(1)

1.2引用在线的css和js 2.Pages 例1:简单页面 data-role="page">   data-role="header">     欢迎访问我的主页     dat...
  • chentiefeng521
  • chentiefeng521
  • 2016年06月23日 16:18
  • 2017

用JqueryMobile创建分页控件标签

1.问题: 手机appCan开发中。可能几个窗体都使用到分页。上一页、下一页、末页、或者点击某个数字到达某页。 如果效果:末页效果:                                  ...
  • guang526600482
  • guang526600482
  • 2013年08月06日 13:23
  • 3024

phonegap混合开发之环境安装

从事Android软件开发一年多,最近项目开发网站移动端,小菜这一年Android开发项目都是集中在原生Android多媒体的开发,对于web开发 很棘手,不知道如何如何快速进入实战阶段。幸好有了ph...
  • lj200680
  • lj200680
  • 2015年12月09日 14:42
  • 542

jQueryMobile的(九) 网格布局

jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局:“ui-grid-a”、“ui-grid-b”、“ui-grid-c”、“ui-grid...
  • bao990423420
  • bao990423420
  • 2013年11月01日 16:33
  • 1448

使用jQuery Mobile框架开发移动端Web App的入门教程

jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使...
  • slqgenius
  • slqgenius
  • 2016年12月06日 12:47
  • 1832

jQuery Mobile页面跳转切换的几种方式

jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它,它加快了我们开发HTML5的速度。 同时又具备jQuery一样的操作方法。学起来也是相当的...
  • xmt1139057136
  • xmt1139057136
  • 2014年06月12日 19:08
  • 8606

《构建跨平台APP:jQuery Mobile移动应用实战》

http://product.dangdang.com/23472199.html
  • brucexia
  • brucexia
  • 2014年05月28日 10:14
  • 1428

jQuery mobile 学习06 提示框和确认框

jQuery mobile 学习06 提示框和确认框
  • responsecool
  • responsecool
  • 2015年02月26日 17:41
  • 2716
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5+Jquery mobile+phoneGAP开发混合程序实战记录(及疑难)
举报原因:
原因补充:

(最多只允许输入30个字)