苹果iPhone WebApp 开发指南

苹果iPhoneWebApp开发指南1目录一、前言………………………………………………………2二、入门………………………………………………………3三、框架………………………………………………………5四、属性………………………………………………………8五、事件………………………………………………………12六、特性………………………………………………………14七、CSS………………………………………………………15八、封装………………………………………………………20九、后记………………………………………………………23▲本文所有蓝色文字为标准语句；紫色文字为标准标识字。▲iPhoneSafari对字符大小写具有敏感性，因此必须注意文件名的格式，尤其不要使用中文作为文件名。✰感谢hhyytt精心编写的外壳程序，这使得WebApp更加规范、便捷的安装成为可能。✰感谢威锋网技术组（WeiPhoneTechTeam）各位同仁的帮助！尤其是飘sir超版对本文给予了大力支持，并审核了全文。在此致以诚挚的谢意。iPhoneWebApp开发指南2一、前言AppleiPhone推出以后，以其动人的外观、超强的性能和丰富的软件资源吸引了众多的拥趸者。iPhone的原始出厂功能比较基本，仅能完成一般的电话、短信、时钟、邮件、上网以及定位的较少的功能。然而，其基于AppleMacOSX的操作系统，为用户提供了编写应用软件的可能。目前仅在AppStore上架的软件就已经达到近十万个。可以形象的比喻，原始的iPhone像个刚买来的电脑，但众多的第三方软件使其可以完成几乎任何你可以想象到的功能。你的创意总是独特的，或许那些收费的或免费的软件不能满足你的愿望，您也想试图编写一些应用程序来实现你的需求。那么，我可以告诉你，这点上，很难、也很容易。难：Apple公司为企图开发iPhone应用软件的公司和个人提供了开发所必须的软件开发工具包SDK（SoftwareDevelomentKit），然而，使用它，必须先向Apple注册申请，开发的软件要提交AppleStore审核，然后才能上架发布。虽然现在已经出现了盗版的SDK，可以免注册在MAC或Windows环境下进行开发，但其开发环境搭建的复杂，以及基于Object-C相对较难的编程语言，也阻挡的很多爱好者试图开发程序的脚步。易：所幸的是，Apple为我们提供了另一条简洁的开发途径，也就是在基于WebKit的Safari上，用户可以编写自己所需的WebApp，也就是网络应用软件。简单的说，应用程序可严格编写为服务器上的HTML、CSS和JavaScript文件，实现大多数可以实现的功能需求。Web开发和SDK开发是两种截然不同、各有利弊的开发方式。WebKit是一种浏览器引擎，支撑着iPhone内的MobileSafari浏览器背后的技术。WebKit是一个开源项目，它优先支持HTML和CSS特性。实际上，WebKit还支持尚未被其他浏览器采纳的一些诸如HTML5规范CSS样式。iPhone上的Safari支持的标准：üHTML4.01üXHTML1.0üCSS2.1以及部分CSS3üJavaScript(ES3)üDOM(Level2)üAJAX(XMLHttpRequest)熟悉这些标准并且平常也坚持WebStandards实践的朋友估计要笑出来了——就这些吗？我们天天在用啊，还有必要专门写文章来说明吗？事实上，Safari之前作为一款无PC版的浏览器，一直用户数量就不高，因此对它的研究也就不多，然而Safari其实有不少自己的扩展，因此还是很值得研究的。既然我们是针对iPhone设置，其实就是针对Safari设计，无需考虑兼容其它浏览器，这时候为什么不好好利用这些扩展增强自己的应用程序的可用性呢？虽然目前iPhoneWebApp开发已经有诸如iUI、Canvas、Dashcode等很好的开发工具，但了解掌握最基本的html、javascript、css知识仍是十分必要的。本文竭力提供通俗易懂的内容，以大量的例子入手，突出特性，适合有一定Web开发基础，并试图开发iPhoneWebApp开发的人士参考。iPhoneWebApp开发指南3二、入门1、首先要说的就是viewport，也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。对于传统Web页面直接在iPhone上面显示来说是很好的事情，因为如果传统Web页面在980宽度的桌面浏览器viewport中显示正常的话，iPhone上显示也绝对正常。然而这对于Web应用程序来说则不是好事，因为我们需要按照980宽度来设计将来会以320宽度显示的页面，一个应该显示为320*80的元素，必须设计为980*245，这多麻烦！因此我们需要改变viewport。实际上应该怎么做呢？我们有几个选择，因此先让我们看看到底我们能够设置哪些属性吧。我们可以操作的属性有4个：·width-viewport的宽度（范围从200到10,000，默认为980像素）·height-viewport的高度（范围从223到10,000）·initial-scale-初始的缩放比例（范围从0到10）·minimum-scale-允许用户缩放到的最小比例·maximum-scale-允许用户缩放到的最大比例·user-scalable-用户是否可以手动缩放这6个属性，我们可以设置其中的一个或者多个，iPhone会根据你设置的属性自动推算其他属性值，而非直接采用默认值。这点很重要，在完全不设置的时候有默认viewport，在你设置一个属性后其它值是自动推算出来的，不再是默认的。如果你把initial-scale=1，那么width和height在竖屏时自动为320*356（不是320*480因为地址栏等都占据空间），横屏时自动为480*208。类似地，如果你仅仅设置了width，就会自动推算出initial-scale以及height。例如你设置了width=320，竖屏时initial-scale就是1，横屏时则变成1.5了。那么到底这些设置如何让Safari知道？其实很简单，就一个meta，形如：metaid=viewportname=viewportcontent=width=320;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;/iPhoneWebApp开发指南4在设置了initial-scale=1之后，我们终于可以以1:1的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。这在后面会进行详细说明。2、必须注意到，为了让你的页面更好地受到Safari的支持。必须：u声明正确的doctype；u避免使用frameset；u每一个独立的资源文件，HTML、CSS、JavaScript、以及非流媒体的其他多媒体文件，限制在10m之内；u顶级入口的JavaScript执行时间限制为5秒，超时将自动终止；uJavaScript分配内存上限为10m；u同一时间最多在Safari内打开8个子窗口（同时浏览的页面）。Safari本身还对图片有如下的限制：uGIF（包括GIF动画）、PNG与TIFF解压后的体积小于2m。意思是，原图的长度乘以宽度再乘以每一个像素的位数，得出来的大小要小于2m；uJPEG解压后最大的体积是32m。解压体积大于2m的JPG会被进行二次抽样，最终显示给用户的是二次抽样后的结果。显示时实际上是降低了精度的，以提高程序的执行效率。可以看出iPhone对HTML的支持与桌面端的Safari是类似的，只是加入了更多扩展功能而已。使用HTML作为框架，适当嵌入javascript，灵活运用CSS，即可实现你编写iPhone应用软件的快乐梦想。3、HTML的基本结构。很多人对HTML已经很熟了。在此仅做一简单复习。htmlheadmeta……/link……/title……/titlescripttype=text/javascriptsrc=xxxx.js/scriptstyletype=text/css……/style/headscriptLanguage=JavaScript……/scriptbody……/body/html下面，侧重iPhoneSafari的特性，详细介绍其各部分的内容。iPhoneWebApp开发指南5三、框架基于WebKit的iPhoneSafari，有一些与电脑上的Safari，特别是与IE(InternetExplorer)不同之处，以下的说明中会特别注明。1、头head部分：①meta定义网页语言：（如果使用了扩展字符，请选用gb18030）metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/定义用户界面，宽度为设备宽度（等同于320像素），并不可缩放）metaname=viewportcontent=width=device-width,user-scalable=no/定义显示的数字串，不被自动识别为电话号码。否则会自动转换为拨号超链接。metaname=format-detectioncontent=telephone=no/定义开发者metaname=Authorcontect=LSi/②linkwebapp可以像原生应用一样，在home界面里上添加一个快捷方式图标linkrel=apple-touch-iconhref=icon.png/这是针对单个页面的，如果你把图片命名为“apple-touch-icon.png”，放在网站的某个目录里面，该目录下所有页面都会获得添加图标的功能……图标的要求是尺寸57×57，png格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，iphone系统会把图片自动裁剪和渲染成统一的风格……③title定义可被搜索的网页关键词title择吉老黄历/title④script定义外部javascript文件scripttype=text/javascriptsrc=xxxx.js/script⑤style定义所用的CSS（层叠样式表CascadingStyleSheet）styletype=text/css……/styleiPhoneSafari支持的CSS3的很多新特性。灵活运用CSS，不仅可以简化程序，而且可以轻松实现很多特殊的效果。这一点，会在后面详细说明。2、JavaScript部分scriptLanguage=JavaScript……/script这部分是程序实现各种功能的关键。一般包括：n变量定义iPhoneWebApp开发指南6n自定义函数简单示例：scriptLanguage=JavaScriptvarMsgArr=newArray()varpPot=pMin=0;pMax=9varwAddr==61542functionpSetup(s){return(spMax)?true:false}/script当外部js文件与内嵌javascript段存在变量或函数冲突时，按加载顺序，以最后的定义为准。Javascript段亦可放在body段之后，可实现先加载body，后加载javscript。但必须注意，由于是顺序加载，body