微博客户端的开发案例使用 HTML5开发跨平台应用杜亚波 / 邱智钢杜亚波掌中宽途开发总监= +我 们 都是 HTML5 Fans 邱智钢软通动力前端开发主管面对无数的应用，我们要做什么？ 多平台微博客 户 端 具有丰富的用 户 体 验 支持移 动设备 用 户 体 验 一致（跨平台无差异）需求传统 移 动 互 联 网跨平台 应 用开 发 模式面对众多选择，我们该怎么取舍？ 多平台微博客 户 端 具有丰富的用 户 体 验 支持移 动设备 用 户 体 验 一致（跨平台无差异）需求 入 门门槛 低 开 发 快速 成本低（一个 团队 ）技 术 框架HTML5技 术 跨平台移 动应 用开 发开放式的 统 一 标 准完美的硬件能力 调 用开 发 入 门门槛 低，开 发 者众多应 用程序商店优 秀的跨平台能力技 术选 型让我们开工吧！但是，怎么做？ 多平台微博客 户 端 具有丰富的用 户 体 验 支持移 动设备 用 户 体 验 一致（跨平台无差异）需求 入 门门槛 低 开 发 快速 成本低（一个 团队 ）技 术 框架 HTML5的特性 HTML5解决了什么 问题代 码 开 发同时我们利用 PhoneGap移动开发框架，将我们的 HTML5版本的微博应用快速移植到了 iOS, Android等平台，为用户提供对应的 native app的安装模式。HTML5版新浪微博应用，整体参考新浪官方 ipad版本应用，真正实现了一次开发，处处运行的梦想。跨各类主流桌面浏览器，并为智能终端（ iOS, android)进行了适配，为用户提供了一致的跨平台应用体验。Web 开 发 “三 剑 客 ”HTML5 “本地 ”应 用HTML5 文档 语义 化Offline + Web StorageCSS3 特效的使用适配移 动终 端推荐使用 http:/gsnedders.html5.org/outliner来使得整个文档的结构更加合理化 /HTML5 文档 语义 化Cache.manifestOffline + Web StroageWeb Storage localStorage sessionStorage离 线应 用 applicationCache渐变 (gradient)图层 阴影 (box-shadow)圆 角 (border-radius)CSS3特效media screenEmailURLNumbers适配移 动终 端onorientationchange适配移 动终 端键盘类 型适配 Email url Numbers横 竖 屏适配 onorientationchange media screen 多平台微博客 户 端 具有丰富的用 户 体 验 支持移 动设备 用 户 体 验 一致（跨平台无差异）需求 入 门门槛 低 开 发 快速 成本低（一个 团队 ）技 术 框架 HTML5的特性 HTML5解决了什么 问题代 码 开 发 易部署 易 维护 发 布 部署应用演示Web 版本演示iOS/Android 浏览 器版本演示iOS/Android 本地 应 用演示谢谢Thank you联 系我 们 ：http:/www.mhtml5.comblessdybgmail.com weibo： 邱智 钢