IOSWebApp初步使用-基于PhoneGap框架

1、IOS Web App初步使用 -基于PhoneGap 框架PhoneGap 是一个使用HTML, CSS和JavaScript的，创建移动跨平台移动应用 程序的快速开发平台。它使开发者能够利用iPho ne ， An droid ， Palm ， Symbian,WP7,Bada和Blackberry等智能手机的核心功能包括地理定位，加速器,联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。 PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhoneSDK，An droid 的 An droid SDK 等。PhoneGap的优

2、点：1、 兼容性。完全做至 U了 writte n on ce, r un everywhere。2、标准化。PhoneGap用 W3C标准，特别标准，Web App直接一字不改就能 运行。尤其是和JQ Mobile结合在一起使用，实在是威力无穷啊。3、配合使用JavaScript+HTML5 ，潜力巨大。当然目前PhoneGap缺陷还是蛮多的，比如运行速度慢，UI反应延时一一这是个 致命伤。不过嘛，这种问题是会随着技术的进步而消失的。它的优势是无以伦比的：开 发成本低（包括跨平台）。当然，Native App永远会有一席之地，比如高端游戏。一、开发准备1、 首先需要一台运行苹果系统的电脑，装

3、好Xcode，如果需要真机调试，还需要 开发者证书。2、去下载最新版的PhoneGap，目前是1.3版本。3、把下载完的zip文件解压缩，双击运行里面的一个 dmg镜像，进行安装,就是它了4、打开 Xcode，新建工程，就会看到 PhoneGap-based Applicaton二、注意事项1、用 PhoneGap-based Applicaton向导生成工程以后，按 command+B生成一下。打开工程文件所在的目录，就会看见一个www的目录，拖拽到Xcode中， 选择引用即可。强调一下，必须选择引用方式，这样www目录在Xcode中是蓝色的。 www目录下放的就是 web端的一些文件(ht

4、ml/css/js/image )。2、在PhoneGap中，如果需要访问外部链接是需要授权的， 在phonegap.plist文件中可以看到，有一个 ExternalHosts 数组，里面可以配置。顺便说一下，Plugi ns下可以清楚的看到，可以使用iOS的本地核心组件，例如相机，联系人等等。三、例子说明例子很简单，在向导生成的基础上，加上了模拟Path应用程序的左下角的快捷菜单功能，并且通过PhoneGap框架调用iOS的Camera模块。先来看看截图吧：基于Phon eGap框架的开发非常适合有web开发经验的开发者，因为里面基本上 都是Html/CSS/js。比如快捷菜单的功能，在

5、html文件中代码如下：vfooter class=op-footerid=path_photoid=path_peopleid=path_placev/aCSS中的op-footer让按钮在左下角，toggle_menu函数用于扩展和收缩菜单，photo函数调用系统拍照功能。function toggle_me nu()if( $(#path_butto n).hasClass(path-exte nd)/收缩$(#path_butt on ).removeClass(path-exte nd);$(#path_photo).a ni mate( left:10px,top:10px , 2

6、00fun ctio n();$(#path_people).a ni mate( left:10px,top:10px , 180fun ctio n();$(#path_place).a nimate( left:10px,top:10px , 160fun ctio n();$(#path_music).animate( left : 10px , top: 10px , 140fun ctio n();$(#path_thought).a nimate( left:10px, top:10px , 120fun ctio n();$(#path_sleep).a ni mate( le

7、ft:10px, top:10px , 100fun ctio n();else/扩展$(#path_butto n).addClass(path-exte nd);$(#path_photo).a ni mate( left : -5px, top:-100px , 100fun ctio n();$(#path_people).a ni mate( left : 31px , top:-94px , 120fun ctio n();$(#path_place).a nimate( left : 59px, top:-78px , 140fun ctio n();$(#path_music)

8、.a nimate( left : 82px, top:-56px , 160fun ctio n();$(#path_thought).a nimate( left : 98px , top:-25px , 180fun ctio n();fun ctio n();function photo()/通过PhoneGap框架调用iOS的Camera模块n avigator.camera.getPicture(fu nctio n(imageURI)$(#refreshm age).attr(sr c,imageURI);,function( message) alert(get picture

9、 failed + message );,quality: 50,dest in ati on Type: n avigator.camera.Desti natio nType.FILE_URI, sourceType: n avigator.camera.PictureSourceType.CAMERA);可以看到，这些js中的函数都使用到了 jQuery，非常方便实用。四、总结基于PhoneGap框架的iOS Web App的开发真的很方便实用，把工作量都转移到了Web开发，但也是有代价的，性能上肯定不如Native App高效，在一些用户体验需求不是很强的地方可以考虑使用Whe n y

10、ou are old and grey and full of sleep,And nodding by the fire, take dow n this book,And slowly read, and dream of the soft lookYour eyes had once, and of their shadows deep;How many loved your mome nts of glad grace,And loved your beauty with love false or true,But one man loved the pilgrim soul in

11、you,And loved the sorrows of your cha nging face;And bending dow n beside the glow ing bars,Murmur, a little sadly, how love fledAnd paced upon the mountains overheadAnd hid his face amid a crowd of stars.The furthest dista nee in the worldIs not betwee n life and deathBut whe n I sta nd in front of

12、 youYet you dont know thatI love you.The furthest dista nee in the worldIs not whe n I sta nd in front of youYet you cant see my loveBut whe n un doubtedly knowing the love from bothYet cannot be together.The furthest dista nee in the worldIs not being apart while being in loveBut whe n I pla inly cannot resist the year ningYet prete nding you