PhoneGap+jQuery Mobile打造本地化Web App

移动开发
我们没必要学习苦行僧那样,用记事本来打代码.目前而言呢,PhoneGap的IDE工具最好的当然是Dreamweaver CS 5.5.不过,我这里使用Eclipse作为我的开发IDE,因为之前使用过Dreamweaver CS 5.5 ,这次就换个IDE工具.

Eclipse 的配置

1,一站式新建项目 phonegap + jqm

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/

这个插件还是很给力的,已经支持默认支持最新版本的phonegap,jqm,sencha

安装完以后选择这个图标

20120210200731417.png

2,选择要建何种类型的phoneGap (1),默认已经支持直接创建最新版本的phoneGap

(2),这个插件支持两大移动js框架jqm & Sencha Touch,当然..这两个框架只能二选一了,你不选也行…

(3),我这里选择我最为熟悉的jQm框架,默认已经支持最新版本了

201202102007388669.png

3,接着,创建android项目即可

201202102007472134.png

接下来就不啰嗦了…

完成以后:项目结构,activity都已经写好的了..

201202102007578981.png

代码也已经写好了.

201202102008107859.png

注意:新建完以后,可能androidmainifest会报错,你把报错的那行代码删掉即可,你也可以根据那个代码要求找一个支持xlarge包的android版本(4.0吧)(貌似2.2没有这玩意),我这里省事直接删掉算了…

201202102008139826.png

自带例子简单介绍

在新建一个page,想使用插件帮你打包好的API你需要以下步骤

1,准备JS文件,滑轮到index.html文件最后几行;

//这个JS是必须的,调用的是设备的初始化//以下API自己按照自己的喜好调用和修改吧

2,在body上调用init()方法,具体使用参见device.js.

3,顺便你写了…

例子演示

感觉,这个跟这个jqm一起的例子,个人感觉比官方那个好很多…截个图,结束吧…

201202102008219571.png

#p#

前言

上一章中,我们讨论了环境的配置,这本章中我们,写一个小模块来贯通学习,phonegap对摄像头的调用,已经phonegap对于拍下来的照片的处理,已经,使用本地数据库保存我们的数据,让在程序重新运行的时候能够保留我们的结果.先说明一下,为了,减少工作量,很多地方由于,官方文档已经很详细了我就难得在描述了,如果有些地方,没有而官方文档也没有的话,可以来问我...

例子设计

我们一般注册都有一个,上传图像的模块,以前,用电脑注册的话,这个头像就比较麻烦了,不过,我们用手机的话就基本没这个问题了,这个例子就是,使用phonegap 调用摄像头拍下我们的头像,上传到服务器,然后,也保存到本地里面,方便加载.

原型设计:

显示用的主页

201202141443568791.png

调用拍照的页面

201202141444022450.png

为了,突显出我们用jqm的好处的,增加一个swip事件来控制,页面的切换

201202141444075519.png

代码编写

1,写个模板,方便,我们以后的代码的重用

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 --> 
  6.     <meta http-equiv="Content-type" name="viewport" 
  7.           content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> 
  8.     <!--样式--> 
  9.     <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /> 
  10.     <!--end--> 
  11.     <!--导入的js框架--> 
  12.     <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> 
  13.     <script src="jquery.mobile/jquery-1.6.4.min"></script> 
  14.     <script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script> 
  15.     <!--end--> 
  16.     <!--自己写的js--> 
  17.     <script type="text/javascript"> 
  18.  
  19.  
  20.     </script> 
  21.     <!--end--> 
  22. </head> 
  23. <body onload="init();"> 
  24. <div data-role="page" id="home"> 
  25.     <div data-role="header"> 
  26.         <h1>Hello,World</h1> 
  27.     </div> 
  28.     <div data-role="content" id="content"> 
  29.         <h1>content</h1> 
  30.     </div> 
  31.     <div data-role="footer"> 
  32.         <h1>footer</h1> 
  33.     </div> 
  34. </div> 
  35.  
  36. <!--import custom library --> 
  37. <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script> 
  38. <script type="text/javascript" charset="utf-8" src="apis/device.js"></script> 
  39. <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script> 
  40. <!--end--> 
  41. </body> 
  42. </html> 

2,模板写好了,就开始我们实际代码的编写吧.

1,首先,编写我们的device.js文件进行对应用的初始化工作

  1. function init() { 
  2. document.addEventListener("deviceready", onDeviceReady, true); 

2,然后接着写初始化用干的事情

  1. var onDeviceReady = function() { 
  2.     console.log("deviceready event fired"); 
  3.       
  4. // api-camera  Photo URI 
  5.     pictureSource=navigator.camera.PictureSourceType; 
  6.     destinationType=navigator.camera.DestinationType; 
  7.     //这里是初始化主页,如果,已经有头像的话,就加载 
  8.     var saveImage = kget("image"); 
  9.     if(saveImage){ 
  10.          //console.log("have image"+saveImage); 
  11.           var cameraImage = document.getElementById('cameraImage'); 
  12.           cameraImage.style.visibility = 'visible'
  13.           cameraImage.src = "data:image/jpeg;base64," + saveImage; 
  14.            
  15.     } 
  16.     //系统的事件,按需求实现自己的回调方法,这里就默认了.. 
  17.     document.addEventListener("searchbutton", onSearchKeyDown, false);   
  18.     document.addEventListener("menubutton", onMenuButtonDown, false); 
  19.     document.addEventListener("pause", onEventFired, false); 
  20.     document.addEventListener("resume", onEventFired, false); 
  21.     document.addEventListener("online", onEventFired, false); 
  22.     document.addEventListener("offline", onEventFired, false); 
  23.     document.addEventListener("backbutton", onEventFired, false); 
  24.     document.addEventListener("batterycritical", onEventFired, false); 
  25.     document.addEventListener("batterylow", onEventFired, false); 
  26.     document.addEventListener("batterystatus", onEventFired, false); 
  27.     document.addEventListener("startcallbutton", onEventFired, false); 
  28.     document.addEventListener("endcallbutton", onEventFired, false); 
  29.     document.addEventListener("volumedownbutton", onEventFired, false); 
  30.     document.addEventListener("volumeupbutton", onEventFired, false); 
  31. }; 

这样我们的devices.js就简单的写完了.

3,写UI界面,这里也很简单

  1. <body> 
  2.         <div data-role="page" id="home"> 
  3.             <div data-role="header"> 
  4.                 <h1>个人信息</h1> 
  5.                 <a href="#setting" data-icon="home" id="intro" class="ui-btn-right">设置</a> 
  6.             </div> 
  7.             <div data-role="content" id="homeContent"> 
  8.                 <p>头像</p> 
  9.                 <img id="cameraImage" src="" /> 
  10.                 <!--这一块的动态实现你会图片的读取和存储,这个就很简单了..这里就不做介绍了..--> 
  11.                 <p>名字:阿柴</p> 
  12.                 <p>联系方式:xxxxx</p> 
  13.             </div> 
  14.         </div> 
  15.         <div data-role="page" id="setting"> 
  16.             <div data-role="header"> 
  17.                 <h1>头像设置</h1> 
  18.             </div> 
  19.             <div data-role="settingContent"> 
  20.                 <p>头像</p> 
  21.                 <img id="settingImage" src="" /> 
  22.                 <div class="ui-grid-a"> 
  23.                    <div class="ui-block-a"><div  data-role="button" id="takePhoto">take photo</div></div> 
  24.                   <div class="ui-block-b">  <div  data-role="button"  id="upload">upload</div></div> 
  25.                 </div> 
  26.                  
  27.             </div> 
  28.         </div> 
  29.         <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script> 
  30.         <script type="text/javascript" charset="utf-8" src="apis/device.js"></script> 
  31.         <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script> 
  32.     </body> 

上面就是页面的代码,就两个DIV的page,学过,jqm的朋友应该对此毫无压力了...

4,开始写点jqm的事件js,写在模板那个head,自己的那个块里面

  1. <script type="text/javascript"> 
  2.             //在页面初始化的时候,利用phonegap初始化我们的应用 
  3.             $('body').live("pageinit",function(){ 
  4.                init(); 
  5.             }); 
  6.             //为页面添加swip 事件 
  7.             $("#home").live("pageinit",function(){ 
  8.                 //当我们向左滑动的时候,进入setting页面 
  9.                 $('#homeContent').bind("swipeleft",function(){ 
  10.                   $.mobile.changePage('#setting', { transition: "fade"}); 
  11.                 }); 
  12.  
  13.             }); 
  14.             $('#setting').live("pageinit",function(){ 
  15.                 //显示头像图片 
  16.                 var saveImage = kget("image"); 
  17.                 if(saveImage){ 
  18.                     //console.log("have image"+saveImage); 
  19.                     var cameraImage = document.getElementById('settingImage'); 
  20.                     cameraImage.style.visibility = 'visible'
  21.                     cameraImage.src = "data:image/jpeg;base64," + saveImage; 
  22.  
  23.                 } 
  24.                 //当我们向右滑动的时候,回到主页 
  25.                 $('#settingContent').bind("swiperight",function(){ 
  26.                     $.mobile.changePage('#home',{ transition: "fade"}); 
  27.                 }); 
  28.                 //进行拍照 
  29.                 $('#takePhoto').bind("tap",function(){ 
  30.                     take_pic(); 
  31.                 }); 
  32.             }); 
  33.  
  34.         </script> 

这块代码的就要有一点熟悉jqm的人写好了,有啥不懂的先看一下jqm的官方文档吧...

5,写了这么久,都没怎么用到phonegap,接下来就是phonegap大展身手的时刻到了..

phonegap的照片类型

还记得我们在devices.js定义的两个变量吗?

  1. //这个是设置图片是调用摄像头还是,本机相册,默认是调用摄像头 
  2. //更多参见官方文档 
  3. pictureSource=navigator.camera.PictureSourceType; 
  4. //这个是,当phonegap 获取图片的时候,我们希望获取的是路径?还是 
  5. //给予base64编码的图像格式 
  6. destinationType=navigator.camera.DestinationType; 

以上就是等下,可能要用到的参数介绍

新建一个camera.js,

  1. function take_pic() { 
  2.     navigator.camera.getPicture(onPhotoDataSuccess, function(ex) { 
  3.         alert("Camera Error!"); 
  4.     }, { 
  5.     //这里的更多设置参数参见官方文档 
  6.         quality : 50, 
  7.     targetWidth: 320, 
  8.     targetHeight: 240, 
  9.     //用data_url,而不用file_url的原因是,file_url在不同平台有差异 
  10.     //不好编写,而用data_url就可以不考虑这个,加上,拍张图片,不要太好的话,就几十k存到数据库里面也没多慢.. 
  11.     destinationType:destinationType.DATA_URL 
  12.         }); 
  13. function onPhotoDataSuccess(imageData) { 
  14.     console.log("* * * onPhotoDataSuccess"); 
  15.     var cameraImage = document.getElementById('cameraImage'); 
  16.     cameraImage.style.visibility = 'visible'
  17.     //把图片存进数据库里面 
  18.     kset("image",imageData); 
  19.    cameraImage.src = "data:image/jpeg;base64," + imageData; 
  20.      

接下来,新建一个storage.js,用来简单封装storage的api

  1. function kset(key, value){ 
  2.     console.log("key"+key+"value"+value); 
  3.     window.localStorage.setItem(key, value); 
  4.  
  5. function kget(key){ 
  6.     console.log(key); 
  7.     return window.localStorage.getItem(key); 
  8.  
  9. function kremove(key){ 
  10.     window.localStorage.removeItem(key); 
  11.  
  12. function kclear(){ 
  13.     window.localStorage.clear(); 
  14.  
  15. //测试更新方法 
  16. function kupdate(key,value){ 
  17.     window.localStorage.removeItem(key); 
  18.     window.localStorage.setItem(key, value); 

以上就是这次的内容了.

责任编辑:佚名 来源: 互联网
相关推荐

2012-05-14 17:10:50

iOS

2012-05-13 13:15:54

IOS

2013-11-12 10:15:45

App翻译本地化

2009-05-11 09:15:20

MozillaPrism浏览器

2012-06-08 10:48:31

商务社交

2011-05-30 17:11:08

测试策略

2011-05-25 10:13:09

WordPressJavaScript

2009-05-11 09:40:10

PrismMozilla本地化

2023-09-26 18:16:57

2011-05-26 17:28:48

软件本地化测试

2013-08-07 15:03:26

2013-03-27 09:50:53

HTML5游戏Android开发

2022-09-21 11:51:26

模块化应用

2014-06-19 10:26:15

Mobile AppWeb App

2017-11-30 14:44:41

语言代码文件

2010-03-09 09:33:04

Windows Emb

2020-09-21 08:34:28

数据中心

2011-06-08 17:07:55

本地化测试

2011-09-05 14:42:01

PhoneGap框架
点赞
收藏

51CTO技术栈公众号