新一站 HTML5 触屏版开发总结

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

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

技术概览

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

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

研发过程

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content=“width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0;”/> <meta name="format-detection" content="telephone=no,email=no"/> </head> HTML5 的 Doctype 头这样就能声明编码 viewport设置丌要给电话和email自劢加上链接

Viewport 的概念 150*300的图片未设置 viewport 设置了 viewport <meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">

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

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

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

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

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

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

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

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 …

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

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

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

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

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

设备兼容性

操作系统版本支持 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

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

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

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

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

兼容性问题微信内嵌浏览器  为什么这也要支持？？  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') })

UC 浏览器的问题  极速模式 – 导致页面丢失样式不脚本 – 但是淘宝、携程等触屏版丌会，应该是内部的白名单 – 找丌到协商渠道
 预读模式 – 在列表页翻页会导致下一页的一些脚本失效 – 通过变态的方式绕过 <a href="/mall/travel-list-jx2wh2utph-2.html" title="">下<b style="display: none;">x</b>一页</a>

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

总结与展望

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

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

求提问，求交流 [email protected]

新一站 HTML5 触屏版开发总结

新一站 HTML5 触屏版开发总结

More Decks by edokeh

Other Decks in Technology

Featured

Transcript