使用JavaScript为iPhone/iPod Touch开发应用
Posted on | 十二月 9, 2008 | No Comments
本文为《Professional iPhone and iPod Touch Programming》一书的摘译。
这本书介绍如何使用HTML+CSS+JavaScript来开发应用，不涉及使用cocoa touch layer来开发native的程序。
HTML/XHTML (HTML 4.01 and XHTML 1.9, XHTML mobile profile document types)
CSS (CSS 2.1 and partial CSS3)
JavaScript (ECMAScript 3, JavaScript 1.4)
AJAX (e.g., XMLHTTPRequest)
Ancillary technologies (video and audio media, PDF, and so on)
这些代码运行在apple为iphone定制的mobile safari，同样使用webkit内核。
你可以认为Mobile Safari是Mac和Windows平台下的Safari的近亲，但两者并不一样，譬如Mobile Safari支持的CSS和JavaScript功能并不如桌面版的完整。
Mobile Safari和iPhone的本地应用有些本质不同
性能: 基于Safari的应用的运行效率不如本地应用，有两个方面：开发语言的执行效率以及通过Wi-Fi以及EDGE网络的操作。然而可以通过优化达到可以接受的运行效率。
启动：内置应用通过Springboard启动。而web应用只能通过输入URL或者通过Bookmark列表来启动应用。【注：现在已经可以在Springboard启动了】
UI: 可以通过HTML CSS来模仿原生应用的界面效果，唯一的限制就是Mobile Safari底部的工具条。
为iPhone开发应用的四个等级
1.兼容iPhone的网站。一个和iPhone兼容的网站，避免使用iPhone不支持的技术，包括Flash,Java以及其他插件。页面的结构最大程度使用块和列，方便用户在网站中移动和缩放。
2.为Safari优化的网站。在等级一的基础上为Safari提供进一步的优化。譬如使用增强的WebKit CSS特性
3.iPhone专属的的网站。根据iPhone的可视窗口大小对网站做裁剪，为用户提供更好的使用体验。【包括增加按钮大小等】
4.类本地应用。最后是专为iPhone设计的，模仿了本地应用程序UI设计的应用。设计的一个目的就是尽可能不让用户感觉到是在一个浏览器环境里。并且，一个成熟的iPhone应用会和iPhone的服务，包括电话，邮件，Google Maps等紧密集合。
手指不是鼠标 【推荐看apple的iPhone视频】
鼠标有左键，右键，滚轮，以及移动鼠标。相对照的是，指头可以有Tap，Flick，拖动以及捏(pinch)
| Gesture | Result | Web site | App |
|---|---|---|---|
| Tap | Equivalent to a mouse click | Yes | Yes |
| Drag | Moves around the viewport | Yes | Yes |
| Flick | Scrolls up and down a page or list | Yes | Yes |
| Double-tap | Zooms in and centers a block of content | Yes | No |
| Pinch open | Zooms in on content | Yes | No |
| Pinch close | Zooms out to display more of a page | Yes | No |
| Touch and hold | Displays an info bubble | Yes | No |
| Two-finger scroll | Scrolls up and down an iframe or element with CSS overflow:auto property | Yes | Yes |
下面的几个鼠标动作，iPhone没有相对应的手指操作
No right – click
No text
No cut, copy, and paste
No hover
No drag-and-drop (可以模拟实现)
限制和约束
| Resource | Limitation |
|---|---|
| Downloaded text resource (HTML, CSS, JavaScript files) | 10MB |
| JPEG images | 128MB (all JPEG images over 2MB are subsampled-decoding the image to 16x fewer pixels) |
| PNG, GIF, and TIFF images | 8MB (in other words, width*height*4<8MB) |
| Animated GIFs | Less than 2MB ensures that frame rate is maintained (over 2MB, only first frame is displayed) |
| Non-streamed media files | 10MB |
| PDF, Word, Excel documents | 30MB and up (very slow) |
| JavaScript stack and object allocation | 10MB |
| JavaScript execution limit | 5 seconds for each top-level entry point (catch is called after 5 seconds in a try/catch block) |
| Open pages in Mobile Safari | 8 pages |
| Area | Technologies not supported |
|---|---|
| Web technologies | Flash media, Java applets, SOAP, XSLT, SVG, and Plug-in installation |
| Mobile technologies | WML |
| File access | Local file system access |
| Text interaction | Text selection, Cut/Copy/Paste |
| Embedded video | In-place video (tapping an embedded element will put iPhone/iPod touch into video playback mode) |
| Security | Diffie-Hellman protocol, DSA keys, self-signed certificates, and custom x.509 certificates |
| JavaScript events | Several mouse-related events (see Chapter 5) |
| JavaScript commands | showModalDialog(), print() |
| Bookmark icons | .ico files |
| HTML | input type=”file”, tool tips |
| CSS | Hover styles, position:fixed |
Comments
Leave a Reply