移动WebApp开发实践.pptx

移动WebApp开发实践,刘骥,About me,刘骥（吉姆） 百度移动云计算事业部前端开发攻城狮 刘骥-JimLiu ,Our team,MCO-WEB ,Contents,概念 与桌面开发的异同 争议 常见踩坑点 工具,概念,Web Application App：应用程序 完成某项或者几项任务 满足某些需求 Web：构建于Web技术之上 HTML/CSS/JS 服务端,概念（续）,形态 Web 纯WebApp Hybrid App,与桌面开发的异同,同 技术范畴基本相同 大部分经验可以迁移 异 不同载体上的特殊问题 性能 库和框架,技术范畴,HTML/CSS/JS DOM/BOM/ 服务端 WebServer/PHP/ 主要针对浏览器 浏览器兼容问题 从IE6的忧伤走向Android的悲凉,开发经验,架构经验 展现与逻辑分离 模板引擎 各种优化 代码层面的经验 模块化 模板编译 代码混淆,开发经验（续）,与服务端交互数据 使用JSON格式 Ajax/JSONP,载体不同,移动设备屏幕 屏幕偏小，ViewPort概念受到空前关注 布局pixel与物理pixel不一定相等 操作方式 不能依赖鼠标悬浮 触摸控制精度低于鼠标控制 触屏设备（通常）没有物理键盘,性能,SunSpider IE8(on XP)：6000ms iPhone 4S：2200ms（2.7 times faster） 但是 Chrome(on XP)：350ms iPhone 4S：2200ms（6.3 times slower） 与此同时 iPhone 4S：2200ms Nexus One：5400ms（2.5 times slower）,性能（续）,顶级手机性能不输桌面平均水平 高端和低端性能差异巨大 手机更新换代速度也非常快 手机上不适合用setInterval做动画,性能（续续）,幸哉 iOS和Android平台都以webkit为主 CSS 3 Transition/Animation可用 半透明、阴影、圆角、渐变都可以用 悲哉 CSS 3动画在低端手机上的丢帧现象 CSS 3效果对性能要求不低 同期设备iOS浏览器性能明显高于Android 但国内（搜索）市场上Android流量高于iOS,性能（续续续）,SunSpider 最终性能 JS跑的快，渲染丢帧 卡 虚 闪,库和框架,我们不再有伟大的jQuery 虽然有不再那么伟大的jQuery Mobile 但是有伟大的webkit jQuery的浏览器兼容大多数都不再需要 需要精简的库 同时最好有jQuery like API Zepto,库和框架（续）,其他库 dojo Sencha 还有一大堆 问题所在 资料学习成本 贪大求全（是否符合我们的需要？）,库和框架（续续）,UI框架 jQuery Mobile dojo Toolkit Sencha Touch MVC框架 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，还是用mouse touchstart - touchend的过程通常比click事件更灵敏 可以用这个特点来自己制作快速点击的事件 iOS较新版本支持很多点，而Android直到2.3还是只支持一个点 双指缩放图片,常见踩坑点（续2）,抓狂的onscroll 大多数手机和浏览器都有惯性滑动 惯性滚动停止以后才触发onscroll事件 有的手机和有的UCWeb下面是以抽筋一样的频率触发 scroll周边问题 有的浏览器下取窗口滚动位置不准确,常见踩坑点（续3）,position:fixed 不支持 iOS 5支持 诡异的1px来回抖动 Android 2.3支持 版本和第三方定制差异，可用性较低,常见踩坑点（续4）,window.innerHeight iOS下OK Android下弹出虚拟键盘时常会造成悲剧 使用一个height:100%的绝对定位div来取高度,常见踩坑点（续5）,translate3d 硬件加速？忽悠？ Android有时候会和rotate冲突 这种时候即使用TransformMatrix都不给力 性能！性能！性能！ 卡：少用特效 虚：参考“卡”，碰运气 闪：-webkit-backface-visibility:hidden; -webkit-perspective:1000