Phonegap开发经验总结：Android与iOS应用开发的平滑移植
之前用phonegap做过Anroid项目，主要功能是人员定位、表单提交、拍照上传、通知提醒等功能，这也是最常用而基本的应用功能，最近打算出iOS版本的客户端，这里简单总结使用phonegap开发的一些经验以及探讨代码在不同手机系统的平移工作。
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、Android应用开发
2.1 数据库操作
PhoneGap API数据库操作是跨平台的，所以这里介绍后iOS段就不再赘述。
var db ;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
db = window.openDatabase("testdb", "1.0", "MyApp", 12000000);
db.transaction(creatDB,errorDB); //创建表
db.transaction(loginDB,errorDB); //查询表初始化表单
}
function creatDB(tx)
{
tx.executeSql('CREATE TABLE IF NOT EXISTS USER (ID,LOGINNAME,PASSWORD)');
}
function errorDB(err) {
navigator.notification.alert("异常信息: "+err.code,null,"温馨提示","确定");
}
function loginDB(tx) {
tx.executeSql('SELECT * FROM USER', [], querySuccess, errorDB);
}
function querySuccess(tx, results) {
var len = results.rows.length;
if(len>0)
{
$("#loginname").val(results.rows.item(0).LOGINNAME);//LOGINNAME大写
$("#password").val(results.rows.item(0).PASSWORD);
}
}
2.2 表单提交
使用jquery+JSON解析和提交表单，常用示例：
function getData(){
//{"mc":"Hello World!","list":[{"key":"0001","value":"张三"},{"key":"0002","value":"李四"}]}
$.mobile.showPageLoadingMsg( "加载中....." ); //打开加载进度条
$.post(//使用jquery的POST方法 serverurl 放在公共JS里定义
serverurl+ "/json/getdata.jsp",
{
"doAction":"getdata",
"loginname":comHT.get("loginname"),//comHT 定义了从URL获取参数赋值到Hashtable中方法
"password":hex_md5(comHT.get("password")),//hex_md5 实现对密码的加密
"resourceid":"00100002",
"rmd":Math.random()
},
function(data) {
var jsondata = jQuery.parseJSON(data); //解析数据为JSON格式
$("#mc").val(jsondata.mc);//文本框赋值
jQuery.each(jsondata.list, function(index, obj) {
$("#czyy").append('<option value="'+obj.key+'">'+obj.value+'</option>');//下拉框架赋值
});
$.mobile.hidePageLoadingMsg(); //关闭进度条
});
}
2.3 拍照上传
使用phonegap提供的API来使用，iOS下代码略有不同，注：此段代码phonegap 为2.0.0
原理是先把文件提交，提交成功后获得服务器真实路径，在表单提交的时候保存进数据库。
<img style="width:120px;height:120px;" id="zpzp1" src="../image/zpsc.png" onclick="pz(this,1)" /> <input type="hidden" id="zp1" value="">
function pz(obj,v_zdz) {
zdz=v_zdz;
zpobj = obj;
navigator.camera.getPicture(onSuccess, onFail, {
quality : 25,
destinationType : Camera.DestinationType.FILE_URI
});
}
// 采集操作成功完成后的回调函数
function onSuccess(imageURI) {
zpobj.src = imageURI;
uploadFile(imageURI);
}
// 采集操作出错后的回调函数
function onFail(error) {
}
// 上传文件到服务器
function uploadFile(path) {
var ft = new FileTransfer();
var loginname=comHT.get("loginname");
var options = new FileUploadOptions();
var fn=loginname+"-"+path.substr(path.lastIndexOf('/')+1);
options.fileKey="file";
options.fileName=path.substr(path.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
options.chunkedMode = false;
ft.upload(
path,
serverurl+"/json/upload.jsp?fn="+fn,
function(result) {
var jsondata = jQuery.parseJSON(result.response);
$("#zp"+zdz).val(jsondata.path);
navigator.notification.alert("照片"+zdz+" "+decodeURI(jsondata.res),null,"温馨提示","确定");
},
function(error) {
navigator.notification.alert("照片"+zdz+" 上传失败！"+ error.code,null,"温馨提示","确定");
},
options
);
}
2.4 人员定位
采用百度定位SDK，从用户表中读取用户标识，详细的开发过程过繁琐不写了（好吧，下班了。。），下载和查看百度定位SDK请访问
http://developer.baidu.com/map/geosdk-android-download.htm
2.5 通知提醒
使用androidpn来实现android下消息推送功能，嗯，这个网上教程比较多，大家搜一下吧。
3、iOS应用开发
首先搭建iOS开发环境，详见本站教程 /?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 通知提醒
在研究，以后更新。
图1
图2
图3
图4
图5
图6
图7
图8
