- 1、本文档共29页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
移动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
An
您可能关注的文档
- 2014年研究生学位论文开题报告.ppt
- 2014年研课标说教材·环境教育知识树.ppt
- 2014年演讲.ppt
- 2014年演示毕业论文答辩.ppt
- 2014年燕山大学 研究生学位论文开题报告.ppt
- 2014年扬州星火太阳能照明有限公司销售部工作计划.ppt
- 2014年扬子电热水器可行性分析报告.ppt
- 2014年阳泉电大工商管理(本科)专业导学群运作情况介绍.ppt
- 2014年养老院项目可行性分析报告.ppt
- 2014年养生养老房产项目可行性分析报告.ppt
- 江苏省灌云高级中学2023-2024学年高三上学期第一次月考地理试题含答案.docx
- 备战2024年高考物理一轮重难点复习 第十三章 近代物理.docx
- 江苏省高邮市一中2021-2022学年高三上学期第一次月考语文试题(原卷版).docx
- 江苏省华罗庚中学2023-2024学年高三上学期12月阶段检测数学试卷含答案.docx
- 江苏省海门中学2023-2024学年高三上学期第一次调研考试地理试题及答案.docx
- 备战2024年高考物理一轮重难点复习 第九章 恒定电流.docx
- 江苏省高邮市2023-2024学年高三下学期3月学情调研数学试题含答案.docx
- 备战2024年高考物理一轮重难点复习 实验十一:探究影响感应电流方向的因素.docx
- 备战2024年高考物理一轮重难点复习 实验三:验证平行四边形定则.docx
- 备战2024年高考物理一轮重难点复习 第十四章 光.docx
文档评论(0)