适合前端工作者的iPhone Web App开发
iPhone有著豐富的軟件資源，到目前為止，僅在appStore上架的軟件就達(dá)十多萬個(gè)，而相比之下，有著10年歷史的WM系統(tǒng)卻不過只有大約2萬個(gè)應(yīng)用程序。 隨著ipad和iphone 4的發(fā)布，iphone/ipad的app應(yīng)用開發(fā)將再次掀起熱潮。下面給大家介紹下iPhone App開發(fā)的兩種途徑及有優(yōu)缺點(diǎn)，以及其中適合前端人員的iPhone webApp的一些開發(fā)工具，最后以無線UED Blog為例子看看iPhone webApp的開發(fā)過程。
一.什么是iPhone Web App?
目前有兩種方式讓你開發(fā)iphone上的應(yīng)用：
- 編寫Objective-C 及 iPhone SDK 直接運(yùn)行在iphone上的原生應(yīng)用程序
- 在基于 WebKit 的Safari上利用HTML5, CSS3及Javascript編寫你所需要的WebApp網(wǎng)絡(luò)應(yīng)用程序
而Apple的官方網(wǎng)站上，除了有iPhone/iPad SDK開發(fā)的詳細(xì)資料外，你也可以像SDK應(yīng)用程序提交到App Store一樣，把你的Web App提交到Apple的Web Apps Site。
當(dāng)然，兩種開發(fā)模式， SDK應(yīng)該是首選的開發(fā)方式，畢竟SDK才是apple上的原生程序，而Web App是基于Safari，由于本地文件操作等安全問題在功能上會(huì)存在較大的限制。但是Web App也并不是沒有優(yōu)勢，它的開發(fā)更簡潔更快捷，它不需要像后者那樣向Apple 注冊申請使用SDK及 提交 Apple Store 審核才能上架發(fā)布；也不需要重新去學(xué)習(xí)Objective-C的編程語言，另外iPhone 4對CSS3支持的完善也將加快WebApp在iPhone上的應(yīng)用。
至于iPhone Web App與普通的Web應(yīng)用在開發(fā)上有什么區(qū)別？恩，對于Web工程師來說，最明顯的一條就是你不需要去關(guān)心你的項(xiàng)目跨瀏覽器的兼容性，因?yàn)槟忝鎸Φ闹挥衖Phone的Safari瀏覽器。iPhone 上的Safari 支持的標(biāo)準(zhǔn)：
- HTML 4.01
- XHTML 1.0
- CSS 2.1 以及部分 CSS 3
- JavaScript (ES3)
- DOM (Level 2)
- AJAX (XMLHttpRequest)
下面是兩個(gè)比較出名的iPhone Web App應(yīng)用：Facebook（http://iphone.facebook.com）以及Gmail
二.iPhone WebApp開發(fā)工具:
Dashcode
Dashcode由Apple官方開發(fā)的, 可以在iPhone／iPod Touch上用的Web Application而產(chǎn)生的開發(fā)工具。原來的DashCode是用來做Widget的，而新版的DashCode增加了iPhone的Web App的支持，而且非常方便。它提供了許多模板并附帶了不少用于制作iPhone特效的Javascript。這樣一來，制作iPhone原生界面的 Web App可以直接用這些JS提供的效果。不過，DashCode只能運(yùn)行于Mac哦~:)
Eclipse iPhone插件
Apanta為Eclipse提供的一個(gè)iPhone插件，利用它可以生成特定的iPhone項(xiàng)目，讓你在開發(fā)的同時(shí)能直接在PC端看到頁面模擬在iPhone上的效果，當(dāng)然，它支持旋轉(zhuǎn)取景器來預(yù)覽應(yīng)用程序在iPhone上橫豎兩種不同效果。
三.iPhone Web App開發(fā)實(shí)踐：
上面是以無線UED博客做的一個(gè)iPhone WebApp的應(yīng)用，使用了iUI的UI庫，iUI是一個(gè)是Joe Hewitt（目前就職facebook）開發(fā)的一套JS+CSS的UI, 完全模擬iPhone缺省的視覺及交互。
先來看看iUI的樣式：它提供了iPhone 友好的交互方式與樣式。iUI提供的不僅僅是一個(gè)CSS文件，基于這個(gè)CSS文件你所建立的頁面能夠符合iPhone的人機(jī)界面指引，并且看起來的效果貼近iPhone原生的應(yīng)用程序。
至于交互方面: iUI提供一個(gè)基于page的換頁導(dǎo)航機(jī)制。這里的Page不是一個(gè)Web頁面，而是一個(gè)<body />內(nèi)的頂級DOM元素，每一個(gè)這樣的DOM元素都可以作為一個(gè)page，同一時(shí)間上僅顯示一個(gè)page。頁面上的所有鏈接，要么導(dǎo)致page轉(zhuǎn)跳，要么導(dǎo)致整個(gè)頁面轉(zhuǎn)跳。
以下是Dem的一些頁面截圖：
橫屏效果：
除了SDK之外，web應(yīng)用開發(fā)是不是也讓你眼前一亮？就像傳統(tǒng)的 Flash，Flex，Silverlight，Objective-C 那樣，形成自己的生態(tài)系統(tǒng)，畢竟Web應(yīng)用比以上的技術(shù)更容易出現(xiàn)在任何設(shè)備上。
轉(zhuǎn)載于:https://www.cnblogs.com/yingzi/archive/2012/03/23/2413018.html
總結(jié)
以上是生活随笔為你收集整理的适合前端工作者的iPhone Web App开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在 C++ 中使用 PPL 进行异步编程
- 下一篇： 浏览器内核信息整理