iPhone WebApp 开发技术要点总结（二）--CSS,Web App 封装技术

hylxinlang

浏览: 129148 次
性别:
来自: 成都

最近访客更多访客>>

luangj

u012363178

jingzitakk66

zhouzhe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

移动互联网开发 css js html5

事件

在第二章中提到过，iPhone Safari 浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不

一样：所有 hover 动作，还有 mouseover ，都不存在。

点击页面元素之后发生的事情很复杂：比如当你用单指按住可点击元素，然后放开，首先触发的

event 居然是 mousemove ！接下来如果元素内容不变，会陆续触发 mousedown ，mouseup ，click ，

如果内容改变，就不会再触发任何事件。

如果按住元素之后移动手指，当然就不要指望会触发 mousemove 了，啥事情都没有，不过停

下的时候，会触发 onscroll （因为你刚才移动了 viewport 嘛…… ）

如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，

而且所在的位置是一个本来有滚动条的页面元素(比如 iframe 罢) ，会触发一个叫 mousewheel 的事

件（但是别指望 iframe 本身的内容会滚动）, 停止移动时同样触发 onscroll。

2、

如果你熟悉 IE 下的网页制作，那必须告诉你 iPhone Safari 的交互事件的一些特殊之处。

相对于 IE ，iPhone Safari 增加了一些屏幕操作的事件：

l Touchstart //当手指接触屏幕时触发

l Touchmove //当已经接触屏幕的手指开始移动后触发

l Touchend //当手指离开屏幕时触发

l touchcancel

l gesturestart //当两个手指接触屏幕时触发

l gesturechange //当两个手指接触屏幕后开始移动时触发

l gestureend

运用这几个交互事件，完成某一元素的移动，或者检测手指在屏幕上的划动，已经十分简单。

例如：

onTouchstart="startX = event.touches[0].pageX; endX = event.touches[0].pageX "

onTouchmove="endX = event.touches[0].pageX; pMove() "

onTouchend="pClick() "

3、

对于某一可点击表格元素使用 click 和 onTouchend 均可完成点击触发事件的功能，二者的区

别在于：ontouchend 不可用于 IE ，并且不会出现点击后元素的外观变化（例如被点击单元格会高

亮显示），这也许正是你所需要的。当然，被点击元素的外观变化，可以使用样式来设定：

-webkit-tap -highlight-color: 颜色

另外，在 iPhone Safari 上，onclick 会有残留。例如点击后显示某一个层，如果该层在此位置

也定义了可触发，则可能会也触发这个事件。

4、

屏幕旋转事件：onorientationchange ，这当然是 iPhone 所特有的了。添加屏幕旋转事件侦

听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：

function orientationChange() {

switch(window.orientation)

{

case 0 alert( “没旋 ”); break;

case -90 alert( “左旋 ”); break;

case 90 alert( “右旋 ”); break;

}

addEventListener('load', function(){

orientationChange();

window.onorientationchange = orientationChange; } );

5、

隐藏地址栏 & 处理事件的时候，防止滚动条出现：

addEventListener('load', function(){

setTimeout(function(){ window.scrollTo(0, 1); }, 100); } );

6、

双手指滑动事件：

addEventListener('load', function(){

window.onmousewheel = twoFingerScroll;}, false);

function twoFingerScroll(ev) {

var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作

return true;

}

7、

判断是否为 iPhone ：

function isAppleMobile() {

return ((navigator.platform.indexOf('iPhone') != -1) }

特性

本章介绍 iPhone Safari 上所特有的一些性能。

1、localStorage

众所周知，为了保护 Web 用户的安全性，HTML 程序禁止向客户端写入任何文件。这一定程

度上限定了一些 WebApp 的功能范围。IE 可以变通使用 Microsoft 的 FileSystemObject 来写文

件，这在 iPhone 上则无法实现。如果用户想保存一些数据，比如某些设定或用户登录数据，待程

序下次执行时可以直接读取，怎么办呢？

”使用 Cookie !" 相信很多朋友会这样回答。是的，可以使用 Cookie ，但是，使用 Cookie 有

很多缺陷，除了读写比较复杂外，还有：用户没有打开 Cookie 怎么办？期间用户删除了 Cookie 怎

么办？其实，iPhone Safari 有一项符合 HTML5 规范的扩展功能：localStorage。它使得开发者

的这种需求变得十分简单。

例子：（注意数据名称 n 要用引号引起来）

var v = localStorage.getItem( 'n ') ? localStorage.getItem('n') : ""; //如果名称是 n 的

数据存在，则将其读出，赋予变量 v 。

localStorage.setItem('n', v); //写入名称为 n、值为 v 的数据

localStorage.removeItem('n'); //删除名称为 n 的数据

2、电话

如果你关闭自动识别后，又希望某些电话号码能够链接到 iPhone 的拨号功能，那么可以通过这

样来声明电话链接：

<a href="tel:13800138000">13800138000</a> 或用于单元格：

3、自动大写与自动修正

在文本框中输入时，iPhone 提供了自动大写与自动更正两项功能。自动大写的意思是，在输入

开始的时候，以及在一个句号并空一个格后，自动会启用 shift ，输入一个字母后该 shift 自动消失。

自动修正的意思是，iPhone 会自动根据词库，包括自带的以及从你过往输入分析而来的，来对你的

输入进行自动更正。我们都知道用手指点击那么小一个软键盘很容易误按旁边的键，这时候你可以不

用忙于修正，只要 iPhone 提示的自动修正的词正是你想要的，你就可以按空格然后输入下一个词，

iPhone 会自动修正前面那个词。

要关闭这两项功能，可以通过 autocapitalize 与 autocorrect 这两个选项：

4、WebKit

基于 WebKit 的 iPhone Safar 还有一些特有的样式，为有别与其它游览器，它使用：

- webkit- //详见第七章 CSS 。

CSS

CSS （Cascading Stylesheets ，层叠样式表）是一种制作网页的新技术，现在已经为大多数的

浏览器所支持，成为网页设计必不可少的工具之一。

W3C （The World Wide Web Consortium ）把动态 HTML （Dynamic HTML ）分为三个部分

来实现：脚本语言（包括 JavaScript、Vbscript 等）、支持动态效果的浏览器（包括 Internet Explorer、

Netscape Navigator、Safari 等）和 CSS 样式表。

1、定义方式，包括外部调用和内部嵌入两种：

2、一般格式为：

.sImg { position: absolute; left: 0; top: 0; width: 320px; height: 480px; border: 0; }

th { -webkit-border-radius: 4px }

对于第一种，使用：<img id= "tImg" class= "sImg" src= "Background.png" /> 或在

javascript 段，使用：tImg.className = "sImg " 来引用。

对于第二种，无需引用，其对所有表格中的标题单元格（th ）均起作用。

3、作用级别：

如果相应的样式在多处均有描述，则其作用级别（从低到高）为：

外部 CSS 文件、内嵌 CSS 段（.className 引用、.style.cssText 重设）、元素定义( class="……

"、style="……" ）。

4、特有样式 webkit。实施大子的 CSS 2.1 规格所界定的万维网联盟（W3C ），以及部分的 CSS

3 规格。(为便于查询，也包括了一些同类别的非 iPhone 样式）。

① “盒模型”的具体描述性质的包围盒块内容，包括边界，填充等等。

-webkit-border-bottom-left-radius: radius;

-webkit-border-top -left-radius horizontal_radius vertical_radius;

-webkit-border-radius radius; //容器圆角

-webkit-box-sizing sizing_model; 边框常量值：border-box/content-box

-webkit-box-shadow hoff voff blur color; //容器阴影（参数分别为：水平 X 方向偏移量；

垂直 Y 方向偏移量；高斯模糊半径值；阴影颜色值）

-webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate

-webkit-margin-start width;

-webkit-padding-start width;

-webkit-border-image url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;

-webkit-appearance: push-button; //内置的 CSS 表现，暂时只支持 push-button

② “视觉格式化模型”描述性质，确定了位置和大小的块元素。

direction rtl

unicode-bidi bidi-override; 常量：bidi-override/embed/normal

③ “视觉效果”描述属性，调整的视觉效果块内容，包括溢出行为，调整行为，能见度，动画，

变换，和过渡。

clip rect(10px, 5px, 10px, 5px)

resize auto; 常量：auto/both/horizontal/none/vertical

visibility visible; 常量: collapse/hidden/visible

-webkit-transition opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out

-webkit-backface-visibility: visibler; 常量：visible(默认值)/hidden

-webkit-box-reflect right 1px; 镜向反转

-webkit-box-reflect below 4px -webkit-gradient(linear, left top, left bottom,

from(transparent), color-stop(0.5, transparent), to(white));

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;

//CSS 遮罩/蒙板效果

-webkit-mask-attachment fixed; 常量：fixed/scroll

-webkit-perspective value; 常量：none(默认)

-webkit-perspective-origin left top;

-webkit-transform rotate(5deg);

-webkit-transform-style preserve-3d; 常量：flat/preserve-3d; (2D 与 3D)

④ “生成的内容，自动编号，并列出”描述属性，允许您更改内容的一个组成部分，创建自动编

号的章节和标题，和操纵的风格清单的内容。

content: “Item” counter(section) ” “;

This resets the counter.

First section

>two section

three section

counter-increment: section 1;

counter-reset section;

⑤ “分页媒体”描述性能与外观的属性，控制印刷版本的网页，如分页符的行为。

page-break-after auto; 常量：always/auto/avoid/left/right

page-break-before auto; 常量：always/auto/avoid/left/right

page-break-inside auto; 常量：auto/avoid

⑥ “颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。

-webkit-background-clip content; 常量：border/content/padding/text

-webkit-background-origin padding; 常量：border/content/padding/text

-webkit-background-size 55px; 常量：length/length_x/length_y

⑦ “字型”的具体描述性质的文字字体的选择范围内的一个因素。报告还描述属性用于下载字

体定义。

unicode-range: U+00-FF, U+980-9FF;

⑧ “文本”描述属性的特定文字样式，间距和自动滚屏。

text-shadow #00FFFC 10px 10px 5px;

text-transform capitalize; 常量：capitalize/lowercase/none/uppercase

word-wrap break-word; 常量：break-word/normal

-webkit-marquee right large infinite normal 10s; 常量：direction(方向) increment(迭代

次数) repetition(重复) style(样式) speed(速度);

-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up

-webkit-marquee-incrementt 1-n/infinite(无穷次)

-webkit-marquee-speed: fast/normal/slow

-webkit-marquee-style: alternate/none/scroll/slide

-webkit-text-fill-color #ff6600; 常量：capitalize, lowercase, none, uppercase

-webkit-text-security circle; 常量：circle/disc/none/square

-webkit-text-size-adjust none; 常量:auto/none;

-webkit-text-stroke 15px #fff;

-webkit-line-break after-white-space; 常量：normal/after-white-space

-webkit-appearance caps-lock-indicator;

-webkit-nbsp-mode space; 常量： normal/space

-webkit-rtl-ordering logical; 常量：visual/logical

-webkit-user-drag element; 常量：element/auto/none

-webkit-user-modify read- only; 常量：read-write-plaintext-only/read-write/read-only

-webkit-user-select text; 常量：text/auto/none

⑨ “表格”描述的布局和设计性能表的具体内容。

-webkit-border-horizontal-spacing 2px;

-webkit-border-vertical-spacing 2px;

-webkit-column-break-after right; 常量：always/auto/avoid/left/right

-webkit-column-break-before right; 常量：always/auto/avoid/left/right

–webkit-column-break-inside logical; 常量：avoid/auto

-webkit-column-count 3; //分栏

-webkit-column-rule 1px solid #fff;

style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid

⑩ “用户界面”描述属性，涉及到用户界面元素在浏览器中，如滚动文字区，滚动条，等等。报

告还描述属性，范围以外的网页内容，如光标的标注样式和显示当您按住触摸触摸目标，如在 iPhone

上的链接。

-webkit-box-align baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch

-webkit-box-direction normal;常量：normal/reverse

-webkit-box-flex flex_valuet

-webkit-box-flex-group group_number

-webkit-box-lines multiple; 常量：multiple/single

-webkit-box-ordinal-group group_number

-webkit-box-orient block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation

–webkit-box-pack: alignment; 常量：center/end/justify/start

5、动画过渡

这是 Webkit 中最具创新力的特性：使用过渡函数定义动画。

-webkit-animation: title infinite ease-in-out 3s;

animation 有这几个属性：

-webkit-animation-name ： //属性名，就是我们定义的 keyframes

-webkit-animation-duration ：3s //持续时间

-webkit-animation-timing -function ： //过渡类型：ease/ linear(线性) /ease-in(慢到快)

/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier

-webkit-animation-delay ：10ms //动画延迟(默认 0)

-webkit-animation-iteration-count ： //循环次数(默认 1) ，infinite 为无限

-webkit-animation-direction ： //动画方式：normal(默认正向播放) ； alternate(交

替方向，第偶数次正向播放，第奇数次反向播放)

这些同样是可以简写的。但真正让我觉的很爽的是 keyframes ，它能定义一个动画的转变过程供

调用，过程为 0%到 100%或 from(0%)到 to(100%)。简单点说，只要你有想法，你想让元素在这个

过程中以什么样的方式改变都是很简单的。

-webkit-transform 类型（缩放 scale/旋转 rotate/倾斜 skew/位移 translate ）

scale(num,num) 放大倍率。scaleX 和 scaleY(3) ，可以简写为：scale(* , *)

rotate(*deg) 转动角度。rotateX 和 rotateY ，可以简写为：rotate(* , *)

Skew(*deg) 倾斜角度。skewX 和 skewY ，可简写为：skew(* , *)

translate(*,*) 坐标移动。translateX 和 translateY ，可简写为：translate(* , *)。

实现模拟弹出消息框（Alert ）的例子：

①定义过渡（在<style type="text/css">段中描述 keyframes ）：

@-webkit-keyframes DivZoom

{

0% { -webkit-transform: scale(0.01) }

60% { -webkit-transform: scale(1.05) }

80% { -webkit-transform: scale(0.95) }

100% { -webkit-transform: scale(1.00) }

}

.sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }
（很容易看懂，将元素从缩小的 0.01 倍--很小但不能为 0 倍，放大到 1.05 倍，再缩小到 0.95

倍，最后到 1 倍即正常大小。整个过渡过程事件为 0.5 秒，动画方式为 ease-in-out ，即慢到快再到

慢，默认只进行 1 次过渡。这正是大家经常看到的 iPhone 弹出的提示信息的动画效果！）

②定义元素（在<body>段中）：

<div id="layer H" style="-webkit-border-radius:12px; border:2px solid #FFF;

-webkit-box-shadow: 0px 2px 4px #888;

position: absolute; left: 24px; top: 106px;

width: 256px; height: 268px; padding -left: 8px; padding-right: 8px;

color: #FFFFFF; text-shadow: 1px 1px 1px #000; text -align: center;

background-color: RGBA(32,48,96,0.9);

background-image:url('BG-Msg.png'); background-repeat:no-repeat;

z-index: 1; visibility: hidden; " >

<input type="button" value="确认" name="B1"

style ="width 100%; height: 40px; font-size: 14pt; ont-weight: bold;

color: #FFFFFF; text-shadow: 0px -1px 1px #000;"

onclick=" layerH.style.visibility='hidden'">

</form>

</div>

③启动动画（在 javascript 定义的函数中）

function pHelp()

{

layerH.style.visibility = 'visible '

layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms "

layerH.className = 'sZoom '

}

(这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay 这句呢？因为当一

个元素过渡显示完成后，若其样式没有变化，下一次将无法进行过渡动画显示。我们巧妙的利用其动

画延迟时间定义，使其有所变化，就避免了上述问题。其中使用随机数函数 Math.random() ，产生

一个大于 0 小于 1 的随机数。当然，延迟零点几毫秒，用户是不会察觉的。)

封装

至此为止，我们把开发一个 iPhone WebApp 的全部关键问题都了解了，看来写一个实际的应

用软件已经没有问题了。现在的问题是：程序写好了，怎么安装到 iPhone 上来运行？

1、立刻有人回答：我们的 WebApp 不是设计在 iPhone 上运行吗？使用 iPhone 本身自带的

Safari 来运行不就可以了？

是的！按以下步骤来操作吧：

①将开发完成的 WebApp 全部文件，包括 HTML 文件、所用到的图片、或许需要的外部 js 文

件和 css 文件，统统复制进 iPhone。为了便于管理，最好是复制到 iPhone 的

private\var\mobile\Document\ 之下，新建的某个目录，比如：My WebApp 中。

②为使 iPhone Safari 能够使用本地文件，需要安装一个插件：file://Schema in Safari ,这个

插件可在 Cydia 上下载安装。

③启动 iPhone Safari ，在地址栏中输入：

File\\private\var\mobile\Document\My WebApp\index.html

终于启动运行了。

④此时，点击 Safari 窗口底部工具栏是的 “＋”图标，生成桌面图标。以后就可以直接在桌面

上快捷地来运行这个 WebApp 程序了。

好复杂啊！！界面上 Safari 固有的工具栏总是存在，影响了我的程序界面！这还不算，用户操

作 iPhone 水平不一，安装一个这样的程序太不友好了！！总之，很多人会说，这个程序太不专业了，

不像个软件，使用 Webkit 方式开发的软件就是不如 SDK 方式……

2、但是，现在不同了！威锋网技术组的 hhyytt 成功编写了一个外壳程序，可以很容易的将

WebApp 封装打包为 iPhone 上使用的标准 ipa 软件格式，用户可以像众多的其它软件一样，更加

规范、便捷的进行安装使用。这也极大的促进了 WebApp 软件的流传。

关于使用这个外壳程序的一些说明：

①在电脑上，将 WebViewer by hhyytt.rar 解压后，生成一个 WebViewer by hhyytt 目录，

其中有以下文件夹及文件（加粗字体表示文件夹，普通字体表示文件）：

WebViewer by hhyytt

∟iTunesArtwork

∟Payload

∟WebViewer.app

∟Default.png

∟icon.png

∟Info.plist

∟WebViewer

∟PkgInfo

∟html
将你的 WebApp 程序全部文件复制到 html 目录中，主文件取名为：index.html 。

②修改有关文件名（例如你的 WebApp 程序取名为 MyWabApp ）：

将：WebViewer 文件更名为 MyWabApp ；

将：WebViewer.app 目录更名为 MyWabApp.app 。

icon.png 是你的程序的图标， 57×57 像素，png 格式；

Default.png 是你的程序启动时的封面图片，尺寸为 320×480 像素，png 格式。

iTunesArtwork 是你的程序的插图图片，也就是在 iTunes 中应用软件资料库中显示的图片，

最大为 512×512 像素，也可借用 icon.png。可以为jpeg 或 png 格式。注意，这个文件做好后，

要去掉扩展名。

这 3 个文件需要你自己制作，复制进来覆盖原来的文件即可。

③修改 Info.plist 文件。这很关键，以下详细介绍：

Info.plist 在 iPhone 上任何一款软件中都存在，是重要的安装配置文件。其格式比较特殊，可

使用专用程序 Pledit.exe 来打开并编辑它。

其基本内容为（红色为需要修改的部分，//为笔者添加的注释，实际文件中不应存在）：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"

"http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

<key>CFBundleDevelopmentRegion</key>

<string>zh</string> //该软件默认运行语言环境

<key>CFBundleDisplayName</key>

<string>MyWabApp</string> //桌面名称（可使用中文）

<key>CFBundleExecutable</key>

<string>MyWabApp</string> //主程序文件名称

<key>CFBundleIconFile</key>

<string>icon.png</string> //图标文件名称

<key>CFBundleIdentifier</key>

<string>com.lh.MyWabApp</string> //作者身份（必须唯一）

<key>CFBundleInfoDictionaryVersion</key>

<key>CFBundleName</key>

<string> MyWabApp</string> //主程序目录名称

<key>CFBundlePackageType</key>

<key>CFBundleSignature</key>

<key>CFBundleVersion</key>

<string>0.1</string> //该软件版本号

<key>DTPlatformName</key>

<string>iphoneos</string>

<key>DTSDKName</key>

<string>iphoneos2.0</string>

<key>LSRequiresIPhoneOS</key>

<key>MinimumOSVersion</key>

<string>2.0</string> //运行时所需最低 iPhone OS 版本

<key>SignerIdentity</key>

<string>Apple iPhone OS Application Signing</string>

<key>UIInterfaceOrientation</key>

<string>UIInterfaceOrientationLandscapeRight</string>

//是否横屏，可用...LandccspeRight/Left/No/Auto

<key>UIStatusBarHidden</key>

<true/> //是否隐藏状态栏，可用 true/false

<key>UIPrerenderedIcon</key>

<true/> //是否使用软件自带原始图标，true-原始/false-使用系统遮罩图标

</dict>

</plist>

④打包：

在 WebViewer by hhyytt 目录下，同时选中其下的 iTunesArtwork 文件和 Payload 文件

夹，生成 ZIP 格式压缩文件 WebViewer by hhyytt.zip 。然后就其更名为 MyWabApp.ipa。

一个标准的 iPhone WebApp 软件诞生了。

然后，你就可以将其安装到 iPhone 上运行了。

后记
成功是令人愉悦的。解决通往成功路上的一个个难题是完成挑战的过程，更是充满了苦恼与欢乐。

虽然，通过 WebApp 可以完成很多应用程序的开发，但，我还想知道：

1、数据库操作

虽然 WebKit 提供了构建于 SQLite 之上的客户端数据库，并提供在 javascript 中以下方法：

①加载数据库：

var myDB = openDatabase (DBFileName, version, DisplayName, MaxSize)

②运行事务：

myDB.transaction (

function (transsction) {

transaction.executeSql ( SQL, [array of ?s], dataHandler, errorHandler);

}

);

可是，我暂时还没有试验成功 ……

2、播放声音

在 iPhone Safari 上，播放声音必须通过其 QuickPlayer。这使得用户需要实现的某些功能……

例如最简单的点击某元素时的声音反馈，难以实现。

3、对设备有关数据的读取

最简单的，如何知道当前 iPhone 的 IMEI ？如何知道当前设置的语言环境（English 还是简

体中文）？

加速计、光线感应器、接近性传感器，现在还不能获取其信息。

由于 WebApp 自身的限制，无法进行较底层的开发编程。在这个方面，SDK 开发的优势就彰

显出来了。

分享到：

大架构更新，PhoneGap3.0即将发布！一起来 ... | iPhone WebApp 开发技术要点总结（一）

2013-07-17 13:43
浏览 1543
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论