iOS Web App初步

标签: 前端开发 | 发表时间:2012-01-10 11:33 | 作者:shenyue
出处:http://ued.sina.com/index.php

iOS Web App开发,配合HTML5,是目前比较热门的话题。今天,先抛开HTML5,我们来尝试在PhoneGap框架上进行简单的开发。

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

PhoneGap的优点:

1、兼容性。完全做到了written once, run everywhere。

2、标准化。PhoneGap用W3C标准,特别标准,Web App直接一字不改就能运行。尤其是和JQ Mobile结合在一起使用,实在是威力无穷啊。

3、配合使用JavaScript+HTML5,潜力巨大。

当然目前PhoneGap缺陷还是蛮多的,比如运行速度慢,UI反应延时——这是个致命伤。不过嘛,这种问题是会随着技术的进步而消失的。它的优势是无以伦比的:开发成本低(包括跨平台)。当然,Native App永远会有一席之地,比如高端游戏。

一、 开发准备

1、首先需要一台运行苹果系统的电脑,装好Xcode,如果需要真机调试,还需要开发者证书。

2、去http://phonegap.com/下载最新版的PhoneGap,目前是1.3版本。

3、把下载完的zip文件解压缩,双击运行里面的一个dmg镜像,进行安装。

4、打开Xcode,新建工程,就会看到PhoneGap-based Applicaton,就是它了。

二、 注意事项

1、 用PhoneGap-based Applicaton向导生成工程以后,按command+B,生成一下。打开工程文件所在的目录,就会看见一个www的目录,拖拽到Xcode中,选择引用即可。强调一下,必须选择引用方式,这样www目录在Xcode中是蓝色的。www目录下放的就是web端的一些文件(html/css/js/image)。

2、 在PhoneGap中,如果需要访问外部链接是需要授权的,在phonegap.plist文件中可以看到,有一个ExternalHosts数组,里面可以配置。顺便说一下,Plugins下可以清楚的看到,可以使用iOS的本地核心组件,例如相机,联系人等等。

三、 例子说明

例子很简单,在向导生成的基础上,加上了模拟Path应用程序的左下角的快捷菜单功能,并且通过PhoneGap框架调用iOS的Camera模块。先来看看截图吧:

基于PhoneGap框架的开发非常适合有web开发经验的开发者,因为里面基本上都是Html/CSS/js。比如快捷菜单的功能,在html文件中代码如下:

<footer class="op-footer">
      <a href="javascript:photo();toggle_menu();"><img id="path_photo" class="path_icon" src="image/icon/1.png" /></a>
      <a href="javascript:toggle_menu();"><img id="path_people" class="path_icon" src="image/icon/2.png" /></a>
      <a href="javascript:toggle_menu();"><img id="path_place" class="path_icon" src="image/icon/3.png" /></a>
      <a href="javascript:toggle_menu();"><img id="path_music" class="path_icon" src="image/icon/4.png" /></a>
      <a href="javascript:toggle_menu();"><img id="path_thought" class="path_icon" src="image/icon/5.png" /></a>
      <a href="javascript:toggle_menu();"><img id="path_sleep" class="path_icon" src="image/icon/6.png" /></a>
      <a href="javascript:toggle_menu();"><img src="image/path_menu@2x.png" width="40" id="path_button"/></a>
</footer>

CSS中的op-footer让按钮在左下角,toggle_menu函数用于扩展和收缩菜单,photo函数调用系统拍照功能。

function toggle_menu()
{
	if( $('#path_button').hasClass('path-extend') )
	{
		// 收缩
		$('#path_button').removeClass('path-extend');
		$('#path_photo').animate( { 'left' : '10px' , 'top': '10px' } , 200 , function(){} );
		$('#path_people').animate( { 'left' : '10px' , 'top': '10px' } , 180 , function(){} );
		$('#path_place').animate( { 'left' : '10px' , 'top': '10px' } , 160 , function(){} );
		$('#path_music').animate( { 'left' : '10px' , 'top': '10px' } , 140 , function(){} );
		$('#path_thought').animate( { 'left' : '10px' , 'top': '10px' } , 120 , function(){} );
		$('#path_sleep').animate( { 'left' : '10px' , 'top': '10px' } , 100 , function(){} );
	}
	else
	{
		// 扩展
		$('#path_button').addClass('path-extend');
		$('#path_photo').animate( { 'left' : '-5px' , 'top': '-100px' } , 100 , function(){} );
		$('#path_people').animate( { 'left' : '31px' , 'top': '-94px' } , 120 , function(){} );
		$('#path_place').animate( { 'left' : '59px' , 'top': '-78px' } , 140 , function(){} );
		$('#path_music').animate( { 'left' : '82px' , 'top': '-56px' } , 160 , function(){} );
		$('#path_thought').animate( { 'left' : '98px' , 'top': '-25px' } , 180 , function(){} );
		$('#path_sleep').animate( { 'left' : '104px' , 'top': '10px' } , 200 , function(){} );
	}
}
function photo()
{
// 通过PhoneGap框架调用iOS的Camera模块
navigator.camera.getPicture(function(imageURI){$('#refresh_image').attr('src',imageURI);},
function(message) {alert('get picture failed' + message );},
{
			quality: 50,
			destinationType: navigator.camera.DestinationType.FILE_URI,
			sourceType: navigator.camera.PictureSourceType.CAMERA
		}
    );
}

可以看到,这些js中的函数都使用到了jQuery,非常方便实用。

四、 总结

基于PhoneGap框架的iOS Web App的开发真的很方便实用,把工作量都转移到了Web开发,但也是有代价的,性能上肯定不如Native App高效,在一些用户体验需求不是很强的地方可以考虑使用。

相关 [ios web app] 推荐:

iOS Web App初步

- - 新浪UED
iOS Web App开发,配合HTML5,是目前比较热门的话题. 今天,先抛开HTML5,我们来尝试在PhoneGap框架上进行简单的开发. PhoneGap是一个使用HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台. 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.

iOS 5.1Web存储方式的打破会影响到Web App吗?

- - Web App Trend
iOS上很多采用Web存储API来实现持久性数据存储的App,都在近期iOS升级到5.1版本后,受到了的严重影响. 受到影响的App多用 PhoneGap或者其他采用WebKit API来实现数据存储的开发工具开发. 比如,这一款 App看起来正受着影响:. “我收集的统计数据表明,用户经常因为App每次打开之后,之前的设置常常被删除,而抛弃一款App.

[IOS]iOS App性能优化

- - 操作系统 - ITeye博客
iOS App的性能关注点. 虽然iPhone的机能越来越好,但是app的功能也越来越复杂,性能从来都是移动开发的核心关注点之一. 我们说一个app性能好,不是简单指感觉运行速度快,而应该是指应用启动快速、UI反馈响应及时、列表滚动操作流畅、内存使用合理,当然更不能随随便便Crash啦. 工程师开发应用时除了在设计上要避免性能“坑”的出现,在实际遇到“坑”时也要能很快定位原因所在.

创建Chrome Web app

- Hobbes - Marshal&#39;s Blog
编写了一个Chrome下使用的Web app. 点击这个应用,就可访问我的博客. 其实有它特殊的好处,直接访问网站,程序无法自动获取HTML5的权限,比如存储限制. 安装应用,相当于安装了一个配置文件,浏览器将打开必要的权限. 如果你也使用Chrome,可以通过这里下载安装. 开发这样的应用并不难,过程类似以前开发Chrome扩展(编写最简单的chrome扩展).

iOS APP体验设计

- wuwu - 彩程团队BLOG
iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例. 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外,没有找到更好的设计哲学和方法论. 事实上,即便认真地研读了HIG和Zen of Palm,甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP.

iOS App体验设计

- 志飞 - 36氪
编者按:本文来自成都彩程设计的CTO肖轶翔「@yxshawn」,关注「iOS,人机交互,UED,音乐人,多媒体,哲学,科幻,电子,迷幻」. 他在文中对iOS 应用和普通网站设计进行了对比,并提出了自己的设计理念. iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例. 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外,没有找到更好的设计哲学和方法论.

iOS App开发那些事

- - IT江湖
自从做Team Leader之后,身上权责发生了变化,于是让我烦恼的不再是具体某个功能,某个界面的实现,而是如何在现有代码的基础上做渐进式的改进,创造出比较合适规范和框架,使得组内成员更快更好地完成任务. 一年下来,颇有点想法,于是啰嗦几句关于iOS App开发的那些事. 首先明确一点,合适的人是指纯技术团队的建设.

The Right Way to Architect iOS App with Swift

- - limboy's HQ
关于 iOS 架构的文章感觉已经泛滥了,前一阵正好 Android 官方推了一套. App Architecture ,于是就在想,对于 iOS 来说,怎样的架构才是最适合的. 这是第一个也是最重要的问题,为什么会出现各种 Architecture Pattern. 我们来想一下,无论是做一个 App 还是搭一套后台系统,如果是一次性的,今天用完明天就可以扔掉,那么怎么快怎么来,代码重复、代码逻辑、代码格式统统不重要.