移动端web app开发
Post on 14-Jul-2015
185 Views
Preview:
TRANSCRIPT
移动端Web APP开发
CDC � 设计研发中心 � miyukizhang �
自我介绍 �
• 张小雪 o Miyukizhang o 用户研究与体验设计部
• 重构&前端
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
Web Applications �
定义：Apps implemented with HTML5 and JavaScript that operate entirely inside a browser. � �
Web App on iPhone �
Web App on iPhone �
案例 �
http://forecast.io/ http://apps.ft.com/
Web App和Native App之争 �
Native App �
定义：Apps developed exclusively for a specific mobile platform that can leverage all device capabilities. �
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
Hybrid App �
定义： � Apps that wrap a mobile web interface inside a native container. � �
案例 �
LinkedIn iPad App �
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
Web vs. Hybrid vs. Native �
这个世界上，从来没有 好的技术或是编程
语言，只有 恰当的选择和与之匹配的解决
方案。 �
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
What is HTML5 �
HTML5 ~= HTML + CSS3 + JS API �
详细：http://slides.html5rocks.com/#landing-slide �
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/
HTML5 Elements for Mobile �
• Offline Support: Web database, LocalStorage, App Cache
• Canvas • Video • GeoLocation • Advanced Forms • Workers • Camera �
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
基本概念#1 �
• CSS pixels与device pixels o CSS pixels： � 浏览器使用的抽象单位。 � o device pixels： � 显示屏幕的 小物理单位，每个dp包
含自己的颜色、亮度。 �
• 1 CSS pixels = (𝑑𝑒𝑣𝑖𝑐𝑒𝑃𝑖𝑥𝑒𝑙𝑅𝑎𝑡𝑖𝑜)↑2 ∗ device pixels �
基本概念#2 �
• PPI/DPI：每英寸所拥有的像素数目
� 𝑃𝑃𝐼= √𝑋↑2 + 𝑌↑2 /𝑆𝑐𝑟𝑒𝑒𝑛 𝑆𝑖𝑧𝑒 � �
屏幕分辨率（pixel）： � X*Y �
屏幕尺寸（inch）: � Screen � Size，即手机屏幕对角线的长度 �
基本概念#2 �
• PPI/DPI：每英寸所拥有的像素数目
𝑃𝑃𝐼(𝑖𝑃ℎ𝑜𝑛𝑒 4)= √960↑2 + 640↑2 /3.5 � = � 330 � � � � � �
𝑃𝑃𝐼(𝑖𝑃ℎ𝑜𝑛𝑒 5)= √1136↑2 + 640↑2 /4 � = � 326 � � � � � �
基本概念#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
基本概念#3 �
• 密度决定比例
xxhdpi 6%
xhdpi 25%
hdpi 35%
tvdpi 1%
mdpi 23%
ldpi 10%
Android Density
数据来源：Android Screen Sizes and Densities �
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”/>
Web APP开发#1 �
• Small Screen CSS o media query �
@media only screen and (max-device –width: 480px){ #test{ color: red; } }
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))){}
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;
Web APP开发#3 � • iPhone Browser & Viewport meta
Status Bar: 20px
URL Bar: 60px
Viewport: 320*356px �
Button Bar: 44px
iPhone (非retina): 320*480px �
Web APP开发#3 �
• Viewport Meta
<meta name=“viewport” content=”width=device-width” />
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: 不允许用户点击屏幕放大浏览 �
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); })
Web APP开发#4 �
• Safari UI(URL Bar, Button Bar)
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) �
Web APP开发#6 � • 闪屏
�
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" />
Web APP开发#7 �
• iOS中禁止用户保存图片＼复制图片
• iOS中禁止用户选中文字
• iOS横竖屏字体变化
*{ -webkit-touch-callout: none; }
*{ -webkit-user-select: none; } .text{ -webkit-user-select: text; }
*{ -webkit-text-size-adjust: none; }
Web APP开发#8 �
• Orientation
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);
Web APP开发#9 �
• Orientation Style
<body class="portrait">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
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; }
Web APP开发#10 �
• Touch事件 o touchstart o touchend o touchmove o touchcancel
• event对象 o touches ( 包括pageX和pageY等 ) o targetTouches
• Demo �
Web APP开发#11 �
• 手势( gesture事件 ) o gesturestart o gestureend o gesturechange
• event对象 o event.scale o event.rotate
Web APP开发#12 �
• 特殊链接
• 避免 �
<a href="tel:12345678900">Call me</a>
<meta content=”telephone=no” name=”format-detection” />
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/bgPattern@2x.png) � repeat; � � � � � � } � } �
Web APP开发#13
• Retina: inline images o JS for image replacement �
if � (window.devicePixelRatio � === � 2) � { � � � � � //Replace � your � img � src � with � the � new � retina � image � } �
Web APP开发#13
• Retina: retina.js o Easy Javascript way
Web APP开发#14 �
• CSS动画 o CSS Transitions o CSS 2D Transformations o CSS 3D Transformations o CSS Animations
• 效果案例
兼容性： � http://caniuse.com/
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 �
Web APP开发#15 �
• 调试 o Chrome调试工具 o weinre: Web Inspector Remote, 远程实时调试 �
Web APP开发#15 �
演示weinre �
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
体验#1 �
• 不要刻意模仿 � iOS 的默认样式和交互 • 不要做得像个网站 • 块级化a标签
o 42*42px
• 不要自己实现滚动条 o -webkit-overflow-scrolling: touch
体验#2 �
• 模拟click事件 o 300ms延时 o FastClick �
性能#1 �
• 缩短class和id的命名 o hd, bd, ft;
• 慎用DataURI: 多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍 o base64编码增加文件大小 o 解析消耗内存和CPU o 无论是否缓存，重新解码
性能#2 �
• Zepto.js代替 jQuery.js • 尽可能少的使用box-shadows与gradients
o 扁平化设计
• 使用3D CSS动画，即使你只需要2D的效果。 • 避免使用opacity • 使用AppCache �
目录 �
• Web Applications? • HTML5 • Web APP开发 � • 佳实践 � • PhoneGap �
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/
PhoneGap的理念 �
PhoneGap特征 �
• 开源、免费 • 跨平台框架，支持大多主流平台 • 基于HTML5标准，支持HTML5、CSS3和JS • 只写一次，到处执行 • 支持云端编译 • 包含丰富的API �
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
How it work �
1.用HTML5技术写一个web App HTML5/CSS/JS �
How it work �
2.用PhoneGap打包你的Web App �
How it work �
2.用PhoneGap打包你的Web App �
How it work �
3.将你的Hybrid App部署到各个平台（iOS, Android等） �
End � Thanks �
top related