之前用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.1 数据库操作
PhoneGap API数据库操作是跨平台的,所以这里介绍后iOS段就不再赘述。
02 | document.addEventListener( "deviceready" , onDeviceReady, false ); |
03 | function onDeviceReady() { |
04 | db = window.openDatabase( "testdb" , "1.0" , "MyApp" , 12000000); |
05 | db.transaction(creatDB,errorDB); //创建表 |
06 | db.transaction(loginDB,errorDB); //查询表初始化表单 |
10 | tx.executeSql( 'CREATE TABLE IF NOT EXISTS USER (ID,LOGINNAME,PASSWORD)' ); |
12 | function errorDB(err) { |
13 | navigator.notification.alert( "异常信息: " +err.code, null , "温馨提示" , "确定" ); |
16 | tx.executeSql( 'SELECT * FROM USER' , [], querySuccess, errorDB); |
18 | function querySuccess(tx, results) { |
19 | var len = results.rows.length; |
22 | $( "#loginname" ).val(results.rows.item(0).LOGINNAME); //LOGINNAME大写 |
23 | $( "#password" ).val(results.rows.item(0).PASSWORD); |
2.2 表单提交
使用jquery+JSON解析和提交表单,常用示例:
02 | //{"mc":"Hello World!","list":[{"key":"0001","value":"张三"},{"key":"0002","value":"李四"}]} |
03 | $.mobile.showPageLoadingMsg( "加载中....." ); //打开加载进度条 |
04 | $.post( //使用jquery的POST方法 serverurl 放在公共JS里定义 |
05 | serverurl+ "/json/getdata.jsp" , |
08 | "loginname" :comHT.get( "loginname" ), //comHT 定义了从URL获取参数赋值到Hashtable中方法 |
09 | "password" :hex_md5(comHT.get( "password" )), //hex_md5 实现对密码的加密 |
10 | "resourceid" : "00100002" , |
14 | var jsondata = jQuery.parseJSON(data); //解析数据为JSON格式 |
15 | $( "#mc" ).val(jsondata.mc); //文本框赋值 |
16 | jQuery.each(jsondata.list, function (index, obj) { |
17 | $( "#czyy" ).append( '<option value="' +obj.key+ '">' +obj.value+ '</option>' ); //下拉框架赋值 |
19 | $.mobile.hidePageLoadingMsg(); //关闭进度条 |
2.3 拍照上传
使用phonegap提供的API来使用,iOS下代码略有不同,注:此段代码phonegap 为2.0.0
原理是先把文件提交,提交成功后获得服务器真实路径,在表单提交的时候保存进数据库。
1 | <img style="width:120px;height:120px;" id="zpzp1" src="../image/zpsc.png" onclick="pz(this,1)" /> |
2 | <input type="hidden" id="zp1" value=""> |
01 | function pz(obj,v_zdz) { |
04 | navigator.camera.getPicture(onSuccess, onFail, { |
06 | destinationType : Camera.DestinationType.FILE_URI |
10 | function onSuccess(imageURI) { |
15 | function onFail(error) { |
18 | function uploadFile(path) { |
19 | var ft = new FileTransfer(); |
20 | var loginname=comHT.get( "loginname" ); |
21 | var options = new FileUploadOptions(); |
22 | var fn=loginname+ "-" +path.substr(path.lastIndexOf( '/' )+1); |
23 | options.fileKey= "file" ; |
24 | options.fileName=path.substr(path.lastIndexOf( '/' )+1); |
25 | options.mimeType= "image/jpeg" ; |
26 | options.chunkedMode = false ; |
29 | serverurl+ "/json/upload.jsp?fn=" +fn, |
31 | var jsondata = jQuery.parseJSON(result.response); |
32 | $( "#zp" +zdz).val(jsondata.path); |
33 | navigator.notification.alert( "照片" +zdz+ " " +decodeURI(jsondata.res), null , "温馨提示" , "确定" ); |
36 | navigator.notification.alert( "照片" +zdz+ " 上传失败!" + error.code, null , "温馨提示" , "确定" ); |
2.4 人员定位
采用百度定位SDK,从用户表中读取用户标识,详细的开发过程过繁琐不写了(好吧,下班了。。),下载和查看百度定位SDK请访问
http://developer.baidu.com/map/geosdk-android-download.htm
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 通知提醒
在研究,以后更新。