• 1. 移动WebApp开发实践刘骥
  • 2. About me刘骥(吉姆) 百度移动·云计算事业部前端开发攻城狮 @刘骥-JimLiu jimliu.net
  • 3. Our teamMCO-WEB mweb.baidu.com
  • 4. Contents概念 与桌面开发的异同 争议 常见踩坑点 工具
  • 5. 概念Web Application App:应用程序 完成某项或者几项任务 满足某些需求 Web:构建于Web技术之上 HTML/CSS/JS 服务端
  • 6. 概念(续)形态 Web 纯WebApp Hybrid App
  • 7. 与桌面开发的异同同 技术范畴基本相同 大部分经验可以迁移 异 不同载体上的特殊问题 性能 库和框架
  • 8. 技术范畴HTML/CSS/JS DOM/BOM/… 服务端 WebServer/PHP/… 主要针对浏览器 浏览器兼容问题 从IE6的忧伤走向Android的悲凉
  • 9. 开发经验架构经验 展现与逻辑分离 模板引擎 各种优化 代码层面的经验 模块化 模板编译 代码混淆
  • 10. 开发经验(续)与服务端交互数据 使用JSON格式 Ajax/JSONP
  • 11. 载体不同移动设备屏幕 屏幕偏小,ViewPort概念受到空前关注 布局pixel与物理pixel不一定相等 操作方式 不能依赖鼠标悬浮 触摸控制精度低于鼠标控制 触屏设备(通常)没有物理键盘
  • 12. 性能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)
  • 13. 性能(续)顶级手机性能不输桌面平均水平 高端和低端性能差异巨大 手机更新换代速度也非常快 手机上不适合用setInterval做动画
  • 14. 性能(续续)幸哉 iOS和Android平台都以webkit为主 CSS 3 Transition/Animation可用 半透明、阴影、圆角、渐变都可以用 悲哉 CSS 3动画在低端手机上的丢帧现象 CSS 3效果对性能要求不低 同期设备iOS浏览器性能明显高于Android 但国内(搜索)市场上Android流量高于iOS
  • 15. 性能(续续续)SunSpider ≠ 最终性能 JS跑的快,渲染丢帧 卡 虚 闪
  • 16. 库和框架我们不再有伟大的jQuery 虽然有不再那么伟大的jQuery Mobile 但是有伟大的webkit jQuery的浏览器兼容大多数都不再需要 需要精简的库 同时最好有jQuery like API Zepto
  • 17. 库和框架(续)其他库 dojo Sencha 还有一大堆 问题所在 资料——学习成本 贪大求全(是否符合我们的需要?)
  • 18. 库和框架(续续)UI框架 jQuery Mobile dojo Toolkit Sencha Touch MVC框架 Backbone.js 一切跟着需求走
  • 19. 争议有页面间跳转还算不算WebApp 正方:有页面间跳转还是可以算WebApp 基于Web技术 能满足特定需求,是一个应用程序 反方:有页面间跳转就不算WebApp 破坏“闭环” 没有做到类似原生App的体验
  • 20. 争议(续)WebApp是否应效仿原生App 正方:应该效仿 原生App交互效果华丽,用户体验水平高 形成App内“闭环”,锁住用户 反方:不应效仿 WebApp先是Web,不应失去Web理念 使用传统Web理念仍有改善用户体验的空间 “闭环”不是任何时候都是好事
  • 21. 常见踩坑点Viewport 小屏幕显示大网页 缩放 480px屏幕显示320px网页 布局中的pixel ≠ 屏幕上的pixel 高分辨率图片的使用 为什么iPhone4上看是模糊的?不是说iPhone4屏幕效果更好吗?
  • 22. 常见踩坑点(续)touch 不等于 mouse 移动设备上通常用touch事件而非mouse事件 WP没有touch,还是用mouse touchstart -> touchend的过程通常比click事件更灵敏 可以用这个特点来自己制作快速点击的事件 iOS较新版本支持很多点,而Android直到2.3还是只支持一个点 双指缩放图片
  • 23. 常见踩坑点(续2)抓狂的onscroll 大多数手机和浏览器都有惯性滑动 惯性滚动停止以后才触发onscroll事件 有的手机和有的UCWeb下面是以抽筋一样的频率触发 scroll周边问题 有的浏览器下取窗口滚动位置不准确
  • 24. 常见踩坑点(续3)position:fixed 不支持 iOS 5支持 诡异的1px来回抖动 Android 2.3支持 版本和第三方定制差异,可用性较低
  • 25. 常见踩坑点(续4)window.innerHeight iOS下OK Android下弹出虚拟键盘时常会造成悲剧 使用一个height:100%的绝对定位div来取高度
  • 26. 常见踩坑点(续5)translate3d 硬件加速?忽悠? Android有时候会和rotate冲突 这种时候即使用TransformMatrix都不给力 性能!性能!性能! 卡:少用特效 虚:参考“卡”,碰运气 闪:-webkit-backface-visibility:hidden; -webkit-perspective:1000;
  • 27. 工具Chrome webkit引擎,强大的开发者工具 点击变touch Weinre 远程修改DOM和CSS 真机、真机、真机、真机、真机、真机…… Wiki 建设经验库,避免走回头路
  • 28. Q&A
  • 29. Thank you 谢谢 xiè xiè