Download - 移动端Web app开发
![Page 1: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/1.jpg)
移动端Web APP开发
CDC � 设计研发中心 � miyukizhang �
![Page 2: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/2.jpg)
自我介绍 �
• 张小雪 o Miyukizhang o 用户研究与体验设计部
• 重构&前端
![Page 3: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/3.jpg)
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
![Page 4: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/4.jpg)
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
![Page 5: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/5.jpg)
Web Applications �
定义:Apps implemented with HTML5 and JavaScript that operate entirely inside a browser. � �
![Page 6: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/6.jpg)
Web App on iPhone �
![Page 7: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/7.jpg)
Web App on iPhone �
![Page 8: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/8.jpg)
案例 �
http://forecast.io/ http://apps.ft.com/
![Page 9: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/9.jpg)
Web App和Native App之争 �
![Page 10: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/10.jpg)
Native App �
定义:Apps developed exclusively for a specific mobile platform that can leverage all device capabilities. �
![Page 11: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/11.jpg)
Web vs. Native �
Web Native
Dev Cost Reasonable Expensive
Dev Time Short Long
Portability High No
Performance Fast Very Fast
Native Functionality No All
Distribution No Yes
![Page 12: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/12.jpg)
Hybrid App �
定义: � Apps that wrap a mobile web interface inside a native container. � �
![Page 13: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/13.jpg)
案例 �
LinkedIn iPad App �
![Page 14: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/14.jpg)
Web vs. Hybrid vs. Native �
Web Hybrid Native
Dev Cost Reasonable Reasonable Expensive
Dev Time Short Short Long
Portability High High No
Performance Fast Fast Very Fast
Native Functionality No Yes All
Distribution No Yes Yes
![Page 15: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/15.jpg)
Web vs. Hybrid vs. Native �
这个世界上,从来没有 好的技术或是编程
语言,只有 恰当的选择和与之匹配的解决
方案。 �
![Page 16: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/16.jpg)
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
![Page 17: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/17.jpg)
What is HTML5 �
HTML5 ~= HTML + CSS3 + JS API �
详细:http://slides.html5rocks.com/#landing-slide �
![Page 18: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/18.jpg)
HTML5 for Mobile Browsers OS or Browser Platform
Score (*/500)
BlackBerry 10.1 » BlackBerry Q or Z series 485
Opera Mobile 15 » Android 428
Firefox Mobile 22 » Multiple platforms 422
Chrome 25 » All Android 4 devices 417
Opera Mobile 12.10 » Multiple platforms 406
iOS 6.0 » Apple iPhone, iPad and iPod Touch 386
iOS 5.0 » Apple iPhone, iPad and iPod Touch 258
Windows Phone 8 » Nokia Lumia 822, HTC 8X and others 320
Android 4.0 » Samsung Galaxy Nexus 297
http://html5test.com/
![Page 19: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/19.jpg)
HTML5 Elements for Mobile �
• Offline Support: Web database, LocalStorage, App Cache
• Canvas • Video • GeoLocation • Advanced Forms • Workers • Camera �
![Page 20: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/20.jpg)
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
![Page 21: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/21.jpg)
基本概念#1 �
• CSS pixels与device pixels o CSS pixels: � 浏览器使用的抽象单位。 � o device pixels: � 显示屏幕的 小物理单位,每个dp包
含自己的颜色、亮度。 �
• 1 CSS pixels = (𝑑𝑒𝑣𝑖𝑐𝑒𝑃𝑖𝑥𝑒𝑙𝑅𝑎𝑡𝑖𝑜)↑2 ∗ device pixels �
![Page 22: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/22.jpg)
基本概念#2 �
• PPI/DPI:每英寸所拥有的像素数目
� 𝑃𝑃𝐼= √𝑋↑2 + 𝑌↑2 /𝑆𝑐𝑟𝑒𝑒𝑛 𝑆𝑖𝑧𝑒 � �
屏幕分辨率(pixel): � X*Y �
屏幕尺寸(inch): � Screen � Size,即手机屏幕对角线的长度 �
![Page 23: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/23.jpg)
基本概念#2 �
• PPI/DPI:每英寸所拥有的像素数目
𝑃𝑃𝐼(𝑖𝑃ℎ𝑜𝑛𝑒 4)= √960↑2 + 640↑2 /3.5 � = � 330 � � � � � �
𝑃𝑃𝐼(𝑖𝑃ℎ𝑜𝑛𝑒 5)= √1136↑2 + 640↑2 /4 � = � 326 � � � � � �
![Page 24: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/24.jpg)
基本概念#3 �
• 密度决定比例
ldpi mdpi hdpi xhdpi
密度分界 � 120 160 240 320
常见屏幕尺寸 � 240*320 320*480 480*800 640*960
默认缩放比例 � 0.75 1.0 1.5 2.0
![Page 25: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/25.jpg)
基本概念#3 �
• 密度决定比例
xxhdpi 6%
xhdpi 25%
hdpi 35%
tvdpi 1%
mdpi 23%
ldpi 10%
Android Density
数据来源:Android Screen Sizes and Densities �
![Page 26: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/26.jpg)
Web APP开发#1 �
• Small Screen CSS o media queries �
<link media=“only screen and (max-device-width: 480px)”
href=“mobile.css” type=“text/css” rel=“stylesheet”/>
<link media=“screen and (min-device-width: 481px)”
href=“standard.css” type=“text/css” rel=“stylesheet”/>
![Page 27: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/27.jpg)
Web APP开发#1 �
• Small Screen CSS o media query �
@media only screen and (max-device –width: 480px){ #test{ color: red; } }
![Page 28: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/28.jpg)
Web APP开发#2 �
• UserAgent 1. Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebkit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3 2. Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebkit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3 3. Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebkit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 Javascript:
If((navigator.userAgent.match(/iPhone/i))){}
![Page 29: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/29.jpg)
Web APP开发#2 �
var pixelRatio = window.devicePixelRatio || 1; var iPhone = /iPhone/i.test(navigator.userAgent); var iPhone4 = (iPhone && pixelRatio == 2); var iPhone5 = /iPhone OS 5_0/i.test(navigator.userAgent); var iPad = /iPad/i.test(navigator.userAgent); var android = /android/i.test(navigator.userAgent); var webos = /hpwos/i.test(navigator.userAgent); var iOS = iPhone || iPad; var mobile = iOS || android || webos;
![Page 30: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/30.jpg)
Web APP开发#3 � • iPhone Browser & Viewport meta
Status Bar: 20px
URL Bar: 60px
Viewport: 320*356px �
Button Bar: 44px
iPhone (非retina): 320*480px �
![Page 31: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/31.jpg)
Web APP开发#3 �
• Viewport Meta
<meta name=“viewport” content=”width=device-width” />
![Page 32: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/32.jpg)
Web APP开发#3 �
• Viewport Meta
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0;”/>
• Initial-scale=1.0: 强制让文档的宽度与设备的宽度保持1:1
• Maximum-scale=1.0: 文档 大宽度比例是1:1
• User-scalable=0: 不允许用户点击屏幕放大浏览 �
![Page 33: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/33.jpg)
Web APP开发#4 �
• Safari UI(URL Bar, Status Bar)
• JS滚动
<meta name=”apple-mobile-web-app-capable” content=“yes” /> <meta name=”apple-mobile-web-app-status-bar-style” content=“black” />
window.addEventListener(‘load’, function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); })
![Page 34: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/34.jpg)
Web APP开发#4 �
• Safari UI(URL Bar, Button Bar)
![Page 35: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/35.jpg)
Web APP开发#5 � • 主屏icon
• iPhone和iPod: o 57*57px o 114*114px(retina)
• iPad: o 72*72px o 144*144px(retina)
�
<link rel="apple-touch-icon" href=“apple-icon-iphone-57x57.png" /> <link rel="apple-touch-icon“ sizes=“72*72” href=“apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon“ sizes=“114*114” href=“apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon“ sizes=“144*144” href=“apple-touch-icon-144x144.png" />
composed
如果图标带有 � -precomposed 后缀 � (如: apple-touch-icon-precomposed.png) �
![Page 36: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/36.jpg)
Web APP开发#6 � • 闪屏
�
![Page 37: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/37.jpg)
Web APP开发#6 � • 闪屏
�
<!– iPhone --> <link rel="apple-touch-startup-image“ media=“(device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio:1)” href=“apple-touch-startup-image-320x460.png" /> <!– iPhone4/iPhone4S--> <link rel="apple-touch-startup-image“ media=“(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio:2)” href=“apple-touch-startup-image-640x920.png" /> <!– iPhone5 --> <link rel="apple-touch-startup-image“ media=“(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio:2)” href=“apple-touch-startup-image-640x1096.png" />
![Page 38: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/38.jpg)
Web APP开发#7 �
• iOS中禁止用户保存图片\复制图片
• iOS中禁止用户选中文字
• iOS横竖屏字体变化
*{ -webkit-touch-callout: none; }
*{ -webkit-user-select: none; } .text{ -webkit-user-select: text; }
*{ -webkit-text-size-adjust: none; }
![Page 39: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/39.jpg)
Web APP开发#8 �
• Orientation
![Page 40: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/40.jpg)
Web APP开发#8 �
• Orientation function checkOrientation(){ switch(window.orientation){ case 0: alert(‘Orientation: Portrait’); break; case 90: case -90: alert(‘Orientation: Landscape’); break; } } addEventListener(‘orientationchange’, checkOrientation);
![Page 41: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/41.jpg)
Web APP开发#9 �
• Orientation Style
<body class="portrait">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
![Page 42: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/42.jpg)
Web APP开发#9 �
• Orientation Style
function setOrientation() { var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; var cl = document.body.className; cl = cl.replace(/portrait|landscape/, orient); document.body.className = cl; }
![Page 43: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/43.jpg)
Web APP开发#10 �
• Touch事件 o touchstart o touchend o touchmove o touchcancel
• event对象 o touches ( 包括pageX和pageY等 ) o targetTouches
• Demo �
![Page 44: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/44.jpg)
Web APP开发#11 �
• 手势( gesture事件 ) o gesturestart o gestureend o gesturechange
• event对象 o event.scale o event.rotate
![Page 45: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/45.jpg)
Web APP开发#12 �
• 特殊链接
• 避免 �
<a href="tel:12345678900">Call me</a>
<meta content=”telephone=no” name=”format-detection” />
![Page 46: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/46.jpg)
Web APP开发#13
• Retina: background images �
.repeatingPattern � { � � � � � � background: � url(../images/bgPattern.png) � repeat; � � � � � � background-size: � 100px � 100px; � } � @media � only � screen � and � (-webkit-min-device-pixel-ratio: � 2) � { � � � � � � .repeatingPattern � { � � � � � � � � � � � background: � url(../images/[email protected]) � repeat; � � � � � � } � } �
![Page 47: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/47.jpg)
Web APP开发#13
• Retina: inline images o JS for image replacement �
if � (window.devicePixelRatio � === � 2) � { � � � � � //Replace � your � img � src � with � the � new � retina � image � } �
![Page 48: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/48.jpg)
Web APP开发#13
• Retina: retina.js o Easy Javascript way
![Page 49: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/49.jpg)
Web APP开发#14 �
• CSS动画 o CSS Transitions o CSS 2D Transformations o CSS 3D Transformations o CSS Animations
• 效果案例
兼容性: � http://caniuse.com/
![Page 50: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/50.jpg)
Web APP开发#14 �
• CSS 3D Transformations(开启GPU加速)
• -webkit-transform: o translate3d(tx,ty,tz); o scale3d(sx,sy,sz); o rotate3d(rx,ry,rz,angle);
• Demo �
![Page 51: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/51.jpg)
Web APP开发#15 �
• 调试 o Chrome调试工具 o weinre: Web Inspector Remote, 远程实时调试 �
![Page 52: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/52.jpg)
Web APP开发#15 �
![Page 53: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/53.jpg)
演示weinre �
![Page 54: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/54.jpg)
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
![Page 55: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/55.jpg)
体验#1 �
• 不要刻意模仿 � iOS 的默认样式和交互 • 不要做得像个网站 • 块级化a标签
o 42*42px
• 不要自己实现滚动条 o -webkit-overflow-scrolling: touch
![Page 56: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/56.jpg)
体验#2 �
• 模拟click事件 o 300ms延时 o FastClick �
![Page 57: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/57.jpg)
性能#1 �
• 缩短class和id的命名 o hd, bd, ft;
• 慎用DataURI: 多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍 o base64编码增加文件大小 o 解析消耗内存和CPU o 无论是否缓存,重新解码
![Page 58: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/58.jpg)
性能#2 �
• Zepto.js代替 jQuery.js • 尽可能少的使用box-shadows与gradients
o 扁平化设计
• 使用3D CSS动画,即使你只需要2D的效果。 • 避免使用opacity • 使用AppCache �
![Page 59: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/59.jpg)
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
![Page 60: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/60.jpg)
What is PhoneGap �
PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. �
http://phonegap.com/
![Page 61: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/61.jpg)
PhoneGap的理念 �
![Page 62: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/62.jpg)
PhoneGap特征 �
• 开源、免费 • 跨平台框架,支持大多主流平台 • 基于HTML5标准,支持HTML5、CSS3和JS • 只写一次,到处执行 • 支持云端编译 • 包含丰富的API �
![Page 63: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/63.jpg)
PhoneGap APIS � Accelerometer Tap into the device’s motion sensor
Camera Capture a photo using the device’s camera
Compass Obtain the direction that the device is pointing
Contacts Work with the devices contact database
Device Gather device specific information
Event Hook into native events through JavaScript
File Hook into native file system through JavaScript
Geolocation Make your application location aware
Media Record and play back auto files
Network Quickly check the network state
Notification Visual, audible, and tactile device notification
Storage Hook into the device’s native storage options
![Page 64: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/64.jpg)
How it work �
1.用HTML5技术写一个web App HTML5/CSS/JS �
![Page 65: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/65.jpg)
How it work �
2.用PhoneGap打包你的Web App �
![Page 66: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/66.jpg)
How it work �
2.用PhoneGap打包你的Web App �
![Page 67: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/67.jpg)
How it work �
3.将你的Hybrid App部署到各个平台(iOS, Android等) �
![Page 68: 移动端Web app开发](https://reader031.vdocuments.pub/reader031/viewer/2022012400/55a4f90f1a28ab9a6e8b46b0/html5/thumbnails/68.jpg)
End � Thanks �