phonegap android ios,Phonegap开发经验总结：Android与iOS应用开发的平滑移植 | Wizzer's World...

之前用

1、PhoneGap介绍

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。这是PhoneGap最大的优点，支持jquery使其开发功能简单而强大。官方网站为 http://www.phonegap.com/ 更新速度较快，一般1个月就会发布一个新版本支持最新版本的手机系统。

既然要实现跨平台开发，大部分功能代码要做到可移植复用，在保持安全性、功能性的基础上尽量使用HTML+JS+PhoneGap API来实现业务功能，尽量避免使用手机系统的SDK开发实现。

UI层使用 Jquery Mobile ，API介绍见 http://www.jqmapi.com ，定义了表单元素、页面和对话框等，和PhoneGap结合使用比较方便。

2.1 数据库操作

PhoneGap API数据库操作是跨平台的，所以这里介绍后

01var db ;

02document.addEventListener("deviceready", onDeviceReady,false);

03function onDeviceReady() {

04db = window.openDatabase("testdb","1.0","MyApp", 12000000);

05db.transaction(creatDB,errorDB);//创建表

06db.transaction(loginDB,errorDB);//查询表初始化表单

07}

08function creatDB(tx)

09{

10tx.executeSql('CREATE TABLE IF NOT EXISTS USER (ID,LOGINNAME,PASSWORD)');

11}

12function errorDB(err) {

13navigator.notification.alert("异常信息: "+err.code,null,"温馨提示","确定");

14}

15function loginDB(tx) {

16tx.executeSql('SELECT * FROM USER', [], querySuccess, errorDB);

17}

18function querySuccess(tx, results) {

19var len = results.rows.length;

20if(len>0)

21{

22$("#loginname").val(results.rows.item(0).LOGINNAME);//LOGINNAME大写

23$("#password").val(results.rows.item(0).PASSWORD);

24}

25}

2.2 表单提交

使用jquery+JSON解析和提交表单，常用示例：

01function getData(){

02//{"mc":"Hello World!","list":[{"key":"0001","value":"张三"},{"key":"0002","value":"李四"}]}

03$.mobile.showPageLoadingMsg("加载中....." );//打开加载进度条

04$.post(//使用jquery的POST方法  serverurl 放在公共JS里定义

05serverurl+"/json/getdata.jsp",

06{

07"doAction":"getdata",

08"loginname":comHT.get("loginname"),//comHT 定义了从URL获取参数赋值到Hashtable中方法

09"password":hex_md5(comHT.get("password")),//hex_md5 实现对密码的加密

10"resourceid":"00100002",

11"rmd":Math.random()

12},

13function(data) {

14var jsondata = jQuery.parseJSON(data);//解析数据为JSON格式

15$("#mc").val(jsondata.mc);//文本框赋值

16jQuery.each(jsondata.list,function(index, obj) {

17$("#czyy").append(''+obj.value+'');//下拉框架赋值

18});

19$.mobile.hidePageLoadingMsg();//关闭进度条

20

21});

22}

2.3 拍照上传

使用phonegap提供的API来使用，

原理是先把文件提交，提交成功后获得服务器真实路径，在表单提交的时候保存进数据库。

1

2

01function pz(obj,v_zdz) {

02zdz=v_zdz;

03zpobj = obj;

04navigator.camera.getPicture(onSuccess, onFail, {

05quality : 25,

06destinationType : Camera.DestinationType.FILE_URI

07});

08}

09// 采集操作成功完成后的回调函数

10function onSuccess(imageURI) {

11zpobj.src = imageURI;

12uploadFile(imageURI);

13}

14// 采集操作出错后的回调函数

15function onFail(error) {

16}

17// 上传文件到服务器

18function uploadFile(path) {

19var ft =new FileTransfer();

20var loginname=comHT.get("loginname");

21var options =new FileUploadOptions();

22var fn=loginname+"-"+path.substr(path.lastIndexOf('/')+1);

23options.fileKey="file";

24options.fileName=path.substr(path.lastIndexOf('/')+1);

25options.mimeType="image/jpeg";

26options.chunkedMode =false;

27ft.upload(

28path,

29serverurl+"/json/upload.jsp?fn="+fn,

30function(result) {

31var jsondata = jQuery.parseJSON(result.response);

32$("#zp"+zdz).val(jsondata.path);

33navigator.notification.alert("照片"+zdz+" "+decodeURI(jsondata.res),null,"温馨提示","确定");

34},

35function(error) {

36navigator.notification.alert("照片"+zdz+" 上传失败！"+ error.code,null,"温馨提示","确定");

37},

38options

39);

40}

2.4 人员定位

采用百度定位SDK，从用户表中读取用户标识，详细的开发过程过繁琐不写了(好吧，下班了。。)，下载和查看百度定位SDK请访问

2.5 通知提醒

使用androidpn来实现android下消息推送功能，嗯，这个网上教程比较多，大家搜一下吧。

3、iOS应用开发

首先搭建iOS开发环境，详见本站教程 http://www.wizzer.cn/?p=2438 ，目前phonegap 2.5.0支持iOS6.0以下版本，iOS6.1暂时不支持要等phonegap新版咯。

拍照功能需要真机测试，而真机测试需要证书，这大大的头疼，还好找到了方法，就是找到了一篇《Xcode 4.5.2 + iOS 6.0免证书(iDP)开发+真机调试+生成IPA全攻略》文章，哇哈哈，iOS6.1也适应。文章地址 http://www.cnblogs.com/yuanxiaoping_21cn_com/archive/2012/11/15/2772388.html

3.1 数据库操作

同android，略。

3.2 表单提交

同android，略。

3.3 拍照上传

在研究，以后更新。

3.4 人员定位

在研究，以后更新。

3.5 通知提醒

在研究，以后更新。