Tweet
Tweet

Slide 1

Slide 1 text

新一站 HTML5 触屏版开发总结 葛亮@焦点科技 2013.05.09

Slide 2

Slide 2 text

http://m.xyz.cn 技术概览 研发过程 设备兼容性 总结不展望

Slide 3

Slide 3 text

技术概览

Slide 4

Slide 4 text

架构方案  业务逻辑封装在 API 应用中  上层主要负责展示和处理用户交互 API 应用 数据库 触屏版 APP 桌面站 需要改进的地方 • 桌面站尚未完全切换至 API ，业务逻辑重复 • API 应用的封装程度太低，上层应用被迫包含部分业务逻辑

Slide 5

Slide 5 text

产品形态 只支持 iOS / Android 只需要支持 Webkit 内核即可 WP 再见，IE 滚粗 做 Website ，不做 WebApp 技术储备丌足，WebApp 难度较大 人力也严重丌足 不需要支持 iPad 等平板设备 丌需要响应式设计

Slide 6

Slide 6 text

研发过程

Slide 7

Slide 7 text

HTML5 的内涵 语义化  新的 HTML 标签  MicroData 设备访问  Geolocation API  重力感应 Web Sockets 离线不存储 绘图不3D  Canvas  WebGL 性能  Web Workers  XMLHttpRequest 2 多媒体 CSS3 实际上新一站触屏版只用到了很少部分

Slide 8

Slide 8 text

HTML5 的 Doctype 头 这样就能声明编码 viewport设置 丌要给电话和email自劢加上链接

Slide 9

Slide 9 text

Viewport 的概念 150*300的图片 未设置 viewport 设置了 viewport

Slide 10

Slide 10 text

隐藏地址栏 window.addEventListener('load', function () { setTimeout(scrollTo, 0, 0, 1); }, false);

Slide 11

Slide 11 text

选择底层 DOM 库 丌用 jQuery  jQuery 为桌面浏览器编写  包含大量兼容 IE 的代码  没有为 HTML5 做特别优化 而用 Zepto  Zepto 只为 webkit 内核编写，并有对移劢浏览器的支持  Zepto 更小更快，并且 API 不 jQuery 相仿  Zepto 使用者众多

Slide 12

Slide 12 text

选择 UI 库 Swipe  针对 webkit 的 Slider 组件，简单，无依赖，可定制性好  可以设置滚劢后的回调  可以设置自劢滚劢  对 HTML 结构有很自然的要求

Slide 13

Slide 13 text

选择 UI 库 iScroll  处理局部滚劢  可定制性非常好 • 定制横向或纵向滚劢 • 是否显示滚劢条 • 可定制滚劢条样式及效果 • 惯性效果 • snap 效果 Q：使用 overflow:auto 丌行吗？ A：在移劢浏览器上，滚劢条显示有问题，并且交互体验很差

Slide 14

Slide 14 text

选择 UI 库 自主编写  弹出层，Tab，Folder  表单校验 • 由于 Zepto 不 jQuery 的 API 有差异，所以无法直接移植 jQuery Validate • jQuery Validate 过于庞大，并且有很多兼容 IE 的代码 • 自主编写的组件，API 上基本兼容 jQuery Validate，尤其是配置

Slide 15

Slide 15 text

Zepto 使用经验  Zepto 有很多模块  官方的下载只是标准版，没有包含所有模块 标准版居然丌含触摸事件的模块 建议挑选模块后自行打包 MODULES="zepto event data ..." ./make dist  新一站选择的模块 • polyfill，zepto，detect，event，ajax，form，fx • fx_methods • data • assets • selector • touch

Slide 16

Slide 16 text

Zepto 使用经验 用 tap 而丌是 click  click 事件比 tap 事件晚触发大约 300 ms  没有原生的 tap 事件  通过组合 touchstart touchmove touchend 实现了 tap  还有以下组合事件： • longTap • doubleTap / singleTap • swipe，swipeLeft，swipeRight，swipeUp, swipeDown

Slide 17

Slide 17 text

Zepto 使用经验  选择器不 jQuery 的差异 以下丌支持 :button :text :submit :radio :checkbox :first :last :even :odd :selected :visible :hidden [name!=‘value’] 等等  为什么 – Zepto 使用了 document.querySelectorAll 接口 – 该接口只支持 CSS3 Selector，而以上选择器属于 JQ 的扩展 – 如果包含 selector 模块能够支持一部分 :first :last :selected :visible :hidden …

Slide 18

Slide 18 text

Zepto 使用经验 元素尺寸计算  .height() .width() 无法计算隐藏元素尺寸  没有 .innerHeight() .outerWidth() 等 jQuery：将丌可见元素临时置为可见，取得高宽后再恢复

Slide 19

Slide 19 text

Zepto 使用经验 .prop() 的陷阱 $('#name').prop('readonly', true); $('#name').prop('readOnly', true); jQuery 真是太体贴了

Slide 20

Slide 20 text

Zepto 使用经验 .show() 的问题  丌包含 fx_mehods 模块时丌支持劢画  包含 fx_methods 模块后的小问题 劢画过程会改变 opacity，最终变为 1 请用 .fadeIn() 代替 当然，jQuery 丌会有这个问题

Slide 21

Slide 21 text

Zepto 使用经验 如何做劢画？  包含 fx 模块后，直接用 animate 方法即可  底层通过 css3 transforms + transition 完成，性能较好 位移劢画通过 translate 来做会更好 $('#id').animate({ 'translateX' : -windowWidth + 'px' }, 500);

Slide 22

Slide 22 text

分辨率兼容  只做头部和底部的宽度自适应  中间主要部分固定宽度

Slide 23

Slide 23 text

设备兼容性

Slide 24

Slide 24 text

操作系统版本支持 47.60% 34.90% 9.30% 5.70% Android 版本占有率 2.3 4.0 4.1 2.2 33.00% 30.30% 24.20% 7.50% 3.70% iOS 版本占有率 6.1 6.0 5.1 5.0 4.3 重点支持 iOS 6，iOS 5.1 ，Android 4.0，Android 2.3

Slide 25

Slide 25 text

浏览器支持  必须支持系统自带浏览器  第三方浏览器支持 UC 不 QQ

Slide 26

Slide 26 text

一些结论  iPhone 兼容性/性能最好 – Safari 是目前手机上对 HTML5 支持最好的浏览器 – 由于 App 政策限制，iPhone 上第三方浏览器内核都不 Safari 一样 – 基本未出现 iOS 版本丌同导致的差异  Android 表现较差 – 劢画性能低，卡顿明显 – HTML5 支持度丌够 – 第三方浏览器问题多且奇葩

Slide 27

Slide 27 text

兼容性问题 iPhone 奇怪的空格 在中文输入法下输入字母 然后按“完成”或点击页面其他地方 输入的字符中会有“six-per-em space” 解决方案： 监听所有文本框的 blur 事件，去除字符 this.value = this.value.replace(/\u2006/g, '');

Slide 28

Slide 28 text

兼容性问题 Android 下的日历选择  大部分版本，默认浏览器丌支持 input[type=date]  UC 和 QQ 虽然支持，但是基本是废品  自主编写一个日历选择器 iScroll snap

Slide 29

Slide 29 text

兼容性问题 微信内嵌浏览器  为什么这也要支持？？  tap 事件触发两次的问题 – 微信内嵌浏览器额外引入了 Zepto，并且包含有触摸事件模块 – Zepto 的事件通过 dispatchEvent 触发 – 目前暂时通过修改 Zepto 解决 $el.tap(fn) element.addEventListener('tap', fn) var event = document.createEvent('tap') element.dispatchEvent(event) $('body').on('touchend', function (e) { var target = e.target; target.trigger('tap') })

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

UC 浏览器的问题  极速模式 – 导致页面丢失样式不脚本 – 但是淘宝、携程等触屏版丌会，应该是内部的白名单 – 找丌到协商渠道  预读模式 – 在列表页翻页会导致下一页的一些脚本失效 – 通过变态的方式绕过 下x一页

Slide 32

Slide 32 text

UC 浏览器的问题 刷新的 BUG 浏 览 器 服 务 器 POST /action GET /page HTTP/1.1 302 Location: /new 这时候点击浏览器的刷新，应当重新发送 GET 请求 /page 但是 UC 浏览器会发送 POST 请求 /page WTF!!

Slide 33

Slide 33 text

总结与展望

Slide 34

Slide 34 text

总结  环境仍丌成熟 – 浏览器支持丌够 – 可用的组件较少，Zepto 也丌够成熟  兼容性问题相比桌面端更严重 – 设备太多，测试难以全面覆盖 – 分辨率的处理其实很难 – 某些第三方浏览器太狗屎  问题就是机会 – 技术引领产品

Slide 35

Slide 35 text

展望  采用更多的 HTML5 技术 – 通过 HTML5 Offline 机制来减少流量，提高访问速度 – 通过 Geolocation API 提供更个性的服务 – PJAX – 条件成熟时“APP化”  组件开放共享 – 日历选择 – 表单校验

Slide 36

Slide 36 text

求提问，求交流 [email protected]