适合前端工作者的iPhone Web App开发
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應用比以上的技術更容易出現在任何設備上。
轉載于:https://www.cnblogs.com/yingzi/archive/2012/03/23/2413018.html
總結
以上是生活随笔為你收集整理的适合前端工作者的iPhone Web App开发的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 在 C++ 中使用 PPL 进行异步编程
- 下一篇: 微软面试题:正则表达式提取链接地址