移动WebApp开发实践.pptxVIP

移动WebApp开发实践刘骥

Aboutme刘骥（吉姆）百度移动·云计算事业部前端开发攻城狮@刘骥-JimLiujimliu.net

OurteamMCO-WEB

Contents概念与桌面开发的异同争议常见踩坑点工具

概念WebApplicationApp：应用程序完成某项或者几项任务满足某些需求Web：构建于Web技术之上HTML/CSS/JS服务端

形态Web纯WebAppHybridApp概念（续）

与桌面开发的异同单击此处添加正文。同异大部分经验可以迁移单击此处添加正文。性能单击此处添加正文。技术范畴基本相同单击此处添加正文。不同载体上的特殊问题单击此处添加正文。库和框架

技术范畴HTML/CSS/JSDOM/BOM/…服务端WebServer/PHP/…主要针对浏览器浏览器兼容问题从IE6的忧伤走向Android的悲凉

开发经验01架构经验展现与逻辑分离模板引擎各种优化02代码层面的经验模块化模板编译代码混淆

开发经验（续）与服务端交互数据02Ajax/JSONP01使用JSON格式

载体不同操作方式不能依赖鼠标悬浮触摸控制精度低于鼠标控制触屏设备（通常）没有物理键盘移动设备屏幕屏幕偏小，ViewPort概念受到空前关注布局pixel与物理pixel不一定相等

性能SunSpiderIE8(onXP)：6000ms1iPhone4S：2200ms（2.7timesfaster）2但是3Chrome(onXP)：350ms4iPhone4S：2200ms（6.3timesslower）5与此同时6iPhone4S：2200ms7NexusOne：5400ms（2.5timesslower）8

性能（续）顶级手机性能不输桌面平均水平高端和低端性能差异巨大手机更新换代速度也非常快手机上不适合用setInterval做动画

性能（续续）iOS和Android平台都以webkit为主CSS3Transition/Animation可用半透明、阴影、圆角、渐变都可以用幸哉CSS3动画在低端手机上的丢帧现象CSS3效果对性能要求不低同期设备iOS浏览器性能明显高于Android但国内（有哪些信誉好的足球投注网站）市场上Android流量高于iOS悲哉

性能（续续续）SunSpider≠最终性能JS跑的快，渲染丢帧卡虚闪

库和框架我们不再有伟大的jQuery虽然有不再那么伟大的jQueryMobile但是有伟大的webkitjQuery的浏览器兼容大多数都不再需要需要精简的库同时最好有jQuerylikeAPIZepto

库和框架（续）dojoSencha还有一大堆其他库01资料——学习成本贪大求全（是否符合我们的需要？）问题所在02

库和框架（续续）UI框架jQueryMobiledojoToolkitSenchaTouchMVC框架Backbone.js一切跟着需求走

争议有页面间跳转还算不算WebApp正方：有页面间跳转还是可以算WebApp基于Web技术能满足特定需求，是一个应用程序反方：有页面间跳转就不算WebApp破坏“闭环”没有做到类似原生App的体验

争议（续）WebApp是否应效仿原生App正方：应该效仿原生App交互效果华丽，用户体验水平高形成App内“闭环”，锁住用户反方：不应效仿WebApp先是Web，不应失去Web理念使用传统Web理念仍有改善用户体验的空间“闭环”不是任何时候都是好事

常见踩坑点Viewport小屏幕显示大网页缩放480px屏幕显示320px网页布局中的pixel≠屏幕上的pixel高分辨率图片的使用为什么iPhone4上看是模糊的？不是说iPhone4屏幕效果更好吗？

touch不等于mouse移动设备上通常用touch事件而非mouse事件WP没有touch，还是用mousetouchstart-touchend的过程通常比click事件更灵敏可以用这个特点来自己制作快速点击的事件iOS较新版本支持很多点，而Android直到2.3还是只支持一个点双指缩放图片常见踩坑点（续）

常见踩坑点（续2）抓狂的onscroll大多数手机和浏览器都有惯性滑动惯性滚动停止以后才触发onscroll事件有的手机和有的UCWeb下面是以抽筋一样的频率触发scroll周边问题有的浏览器下取窗口滚动位置不准确

常见踩坑点（续3）position:fixed不支持iOS5支持诡异的1px来回抖动Android2.3支持版本和第三方定制差异，可用性较低

常见踩坑点（续4）window.innerHeightiOS下OKAndroid下弹出虚拟键盘时常会造成悲剧使用一个height:100%的绝对定位div来取高度

translate3d硬件加速？忽悠？Andr