移动WebApp开发实践

下载需要 5 金币 [ 金币充值 ]

服务器/托管费、人工审核、技术维护等都需要很多费用，请您支持深度开源的发展

下载PPT

PPT 内容

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è

移动WebApp开发实践

wwwmr1909

贡献于2014-03-22

移动WebApp开发实践

PPT 内容

PPT 图集

相关PPT