适合前端工作者的iPhone Web App开发
2012-03-23 00:35 @影子@ 阅读(630) 评论(0) 编辑 收藏 举报iPhone有着丰富的软件资源，到目前为止，仅在appStore上架的软件就达十多万个，而相比之下，有着10年历史的WM系统却不过只有大约2万个应用程序。 随着ipad和iphone 4的发布，iphone/ipad的app应用开发将再次掀起热潮。下面给大家介绍下iPhone App开发的两种途径及有优缺点，以及其中适合前端人员的iPhone webApp的一些开发工具，最后以无线UED Blog为例子看看iPhone webApp的开发过程。
一.什么是iPhone Web App?
目前有两种方式让你开发iphone上的应用：
- 编写Objective-C 及 iPhone SDK 直接运行在iphone上的原生应用程序
- 在基于 WebKit 的Safari上利用HTML5, CSS3及Javascript编写你所需要的WebApp网络应用程序
而Apple的官方网站上，除了有iPhone/iPad SDK开发的详细资料外，你也可以像SDK应用程序提交到App Store一样，把你的Web App提交到Apple的Web Apps Site。
当然，两种开发模式， SDK应该是首选的开发方式，毕竟SDK才是apple上的原生程序，而Web App是基于Safari，由于本地文件操作等安全问题在功能上会存在较大的限制。但是Web App也并不是没有优势，它的开发更简洁更快捷，它不需要像后者那样向Apple 注册申请使用SDK及 提交 Apple Store 审核才能上架发布；也不需要重新去学习Objective-C的编程语言，另外iPhone 4对CSS3支持的完善也将加快WebApp在iPhone上的应用。
至于iPhone Web App与普通的Web应用在开发上有什么区别？恩，对于Web工程师来说，最明显的一条就是你不需要去关心你的项目跨浏览器的兼容性，因为你面对的只有iPhone的Safari浏览器。iPhone 上的Safari 支持的标准：
- HTML 4.01
- XHTML 1.0
- CSS 2.1 以及部分 CSS 3
- JavaScript (ES3)
- DOM (Level 2)
- AJAX (XMLHttpRequest)
下面是两个比较出名的iPhone Web App应用：Facebook（http://iphone.facebook.com）以及Gmail
二.iPhone WebApp开发工具:
Dashcode
Dashcode由Apple官方开发的, 可以在iPhone／iPod Touch上用的Web Application而产生的开发工具。原来的DashCode是用来做Widget的，而新版的DashCode增加了iPhone的Web App的支持，而且非常方便。它提供了许多模板并附带了不少用于制作iPhone特效的Javascript。这样一来，制作iPhone原生界面的 Web App可以直接用这些JS提供的效果。不过，DashCode只能运行于Mac哦~:)
Eclipse iPhone插件
Apanta为Eclipse提供的一个iPhone插件，利用它可以生成特定的iPhone项目，让你在开发的同时能直接在PC端看到页面模拟在iPhone上的效果，当然，它支持旋转取景器来预览应用程序在iPhone上横竖两种不同效果。
三.iPhone Web App开发实践：
上面是以无线UED博客做的一个iPhone WebApp的应用，使用了iUI的UI库，iUI是一个是Joe Hewitt（目前就职facebook）开发的一套JS+CSS的UI, 完全模拟iPhone缺省的视觉及交互。
先来看看iUI的样式：它提供了iPhone 友好的交互方式与样式。iUI提供的不仅仅是一个CSS文件，基于这个CSS文件你所建立的页面能够符合iPhone的人机界面指引，并且看起来的效果贴近iPhone原生的应用程序。
至于交互方面: iUI提供一个基于page的换页导航机制。这里的Page不是一个Web页面，而是一个<body />内的顶级DOM元素，每一个这样的DOM元素都可以作为一个page，同一时间上仅显示一个page。页面上的所有链接，要么导致page转跳，要么导致整个页面转跳。
以下是Dem的一些页面截图：
横屏效果：
除了SDK之外，web应用开发是不是也让你眼前一亮？就像传统的 Flash，Flex，Silverlight，Objective-C 那样，形成自己的生态系统，毕竟Web应用比以上的技术更容易出现在任何设备上。
