移动Web开发实践之旅

《移动Web开发实践之旅》由会员分享，可在线阅读，更多相关《移动Web开发实践之旅（19页珍藏版）》请在装配图网上搜索。

1、移 动 Web开 发 社 区 移 动 Web开 发 实 践 之 旅 主 讲 ： 刚 子团 队 成 员 ： 威 老 、 阿 本 二 零 一 一 年 金 秋 十 月 于 杭 州 移 动 Web开 发 社 区 内 容 提 纲移 动 Web开 发 和 调 试 工 具 介 绍 jQueryMobile 和 SenchaTouch2实 例 演 示移 动 Web发 展 机 遇 和 技 术 优 势移 动 Web开 发 框 架 分 析 和 选 择移 动 Web技 术 资 源 和 前 景 展 望 移 动 Web开 发 社 区 v 传统网站面临的挑战随着手机和平板电脑普及，传统信息类和电子商务网站因市场需求向移动端

2、转移。这面临着挑战，传统网站在终端不能很好的适应，需要做移动站点；客户端应用由于Android、IOS等多种平台存在，开发、维护成本高。 v 机遇与挑战并存移动Web技术，利用浏览器、HTML5、JavaScript跨平台特性，提供通用的解决方案。一次编码，可以做为移动站点支持手机和平板电脑，包装成客户端应用支持Android、IOS等主流平台。v 移动Web技术优势 通 用 性 ， 移 动 站 点 、 跨 平 台 的 客 户 端 应 用 提 供 统 一 的 解 决 方 案 。 较 低 的 开 发 和 维 护 成 本 ， 因 为 您 只 需 要 一 次 编 码 。v 移动Web技术目前适合场景

3、 以信息为主的应用，不适合对性能要求过高的产品。移 动 Web发 展 机 遇 和 技 术 优 势 之 需 求 分 析 移 动 Web开 发 社 区 移 动 站 点（ 手 机 、 平 板 电 脑 ） 客 户 端 应 用（ Android、 IOS） 客 户 端 应 用（ 其 他 平 台 ）移 动 Web发 展 机 遇 和 技 术 优 势 平 台 示 意 图 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择v 以移动Web开发客户端为例，整体架构如下： UI层 负 责 页 面 布 局 ， 可 自 行 实 现 或 使 用 现 有 框 架 ， 框 架 优 美 之 处 在

4、于 封 装 常 用 布 局 和 公 共 组 件 ， 开 发 者只 需 关 注 业 务 逻 辑 ， 推 荐 框 架 jQueryMobile和 SenchaTouch。 移 动 中 间 件 ， 处 于 UI层 和 终 端 系 统 之 间 ， 封 装 各 系 统 差 异 ， 提 供 统 一 的 JavaScript接 口 ， 操 作 系 统 资 源 ，如 ： 文 件 系 统 、 摄 像 头 等 ， 推 荐 PhoneGap。 终 端 系 统 ， 处 于 整 个 应 用 的 最 底 层 ， 除 非 需 要 扩 展 PhoneGap接 口 ， 否 则 开 发 者 可 以 不 关 心 。 之 总 体 架

5、 构UI层 移 动 中 间 件 终 端 系 统jQueryMobileSencha Touch PhoneGap Android、 IOS 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 jQueryMoble介 绍v jQueryMobile 支持较多平台： 建 立 在 jQuery框 架 之 上 ， 为 其 跨 平 台 能 力 提 供 良 好 的 基 础 。 支 持 较 好 的 平 台 有 ： Apple IOS 3.2-5.0Beta、 Android 2.1-2.3、 windows phone7、Blackberry、 Firfox Mobile、

6、 Chrome Desktop 11-13 等 ， 请 参 照 官 网 。v 布局自适应手机、平板电脑和PC。 v 结合PhoneGap，可生成跨平台移动客户端。v 较丰富的组件支持，官方组件演示链接。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 jQueryMoble典 型 布 局v jQueryMobile 典型的页面布局根据data-role属性做组件渲染，page包含head、navbar、content ，page 为显示设备可视区域的一屏，多个page可以放在一个页面或一个独立的HTML页面。v 开源项目参考 示例代码和界面为“移动Web开发

7、社区”开源项目。 请点击链接查看源代码。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 jQueryMoble事 件 和 数 据 加 载v jQueryMobile 提供事件监听机制，在页面创建或显示时，提供回调函数。 如下面的示例代码，在分类页面创建时，用JSONP方式从服务器端，取回数据，然后填充页面内容。 v 也可用JSP、PHP等语言，在服务端打印内容。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 Sencha Touch 2v Sencha Touch对于开发者而言，可简单认为Sencha Touch是Ex

8、tJS在移动端的版本。ExtJS在PC领域，UI样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。v 支持以Webkit为核心的平台 Android、iPhone、BlackBerry。v Sencha官网在10月11日发布SenchaTouch2开发者预览版，被称为历史性改变，下面列出部分新特性： ExtJS4为核心,支持类动态加载机制，按需使用JavaScript文件。 更清晰的MVC模式。API设计更加简单，比如：统一接口进行类定义和实例化操作。 自动化程度提高，不再需要对View、Model等组件手动注册。v Sencha Touch 2 官方指南中文版10月14日，

9、“移动Web开发社区”发起了对ST2官方指南的翻译工作，了解更多特性请链接这里。 在此感谢社区成员：威老、bamboo、若天、桔子、terry 为官方指南的翻译工作做出的贡献！v 学习成本较高 纯JavaScript编码实现布局，需熟悉MVC开发模式和组件之间关系。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 Sencha Touch 2 MVC模 式 介 绍v MVC模式介绍 数据模型层Model包括对数据的基本描述，如字段名称和类型；Store 缓存来自Model的数据，并且提供排序、过滤等方法，通常Store会和视图层、业务控制层打交道。 代表视图

10、层(View) ，为数据提供展现方式，如：列表式展现或其他方式。 业务控制层（Controller）主要负责事件监听和业务处理。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 Sencha Touch 2 一 般 开 发 过 程v 建立应用，配置应用命名空间、控制器和数据模型 v 新建讨论列表数据模型Model，Proxy为服务器端数据交换接口。 以“移动Web开发社区”客户端，讨论列表为例，介绍其开发过程。该客户端为开源项目，请关注社区发布源代码。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 Sencha Touc

11、h 2 一 般 开 发 过 程v 新建数据存储Store，绑定Model，为视图层提供数据访问。 v 新建讨论列表视图，绑定Store。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 Sencha Touch 2 一 般 开 发 过 程v 控制器里注册事件监听和业务处理。 v 总结Sencha Touch 更加完善，团队有ExtJS开发人员，可优先选择。jQueryMobile适合一般信息类网站，快发速度快。Sencha Touch 2 目前为开发者预览版，不建议在实际项目中使用。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选

12、 择 之 PhoneGapv PhoneGap 提供一组JavaScript 接口，访问设备本地API， 而对其实行过程进行了很好的封装，支持多平台。 v 插件机制，可方便扩展PhoneGap接口。v 提供对设备文件系统、摄像头、手机联系人、数据存储等能力。 移 动 Web开 发 社 区 移 动 Web开 发 框 架 分 析 和 选 择 之 PhoneGap云 编 译v PhoneGap build 云打包应用 开发人员上传程序压缩文件到云编译平台：https:/ 等平台运行程序。 移 动 Web开 发 社 区 移 动 Web开 发 和 调 试 工 具 之 DreamWeaver CS5.5v

13、 Dreamweaver CS5.5集成应用开发环境集成jQueryMobile 和 PhoneGap框架，支持Android 虚拟机。v 详细安装方法请见 “移动Web开发社区”网站。 移 动 Web开 发 社 区 移 动 Web开 发 和 调 试 工 具 之 远 程 调 试 工 具v PhoneGap 远程调试工具Weinre，官方网站链接 v ，官方链接在PC浏览器例如Chrome控制台，捕捉PhoneGap在移动设备上运行的错误，查看移动设备的DOM文档。在官方提供的网页中，输入JavaScript命令，在终端设备执行，多用于查看JavaScript变量等。 移 动 Web开 发 社 区 移 动 Web技 术 资 源 和 前 景 展 望v “移动Web开发社区”提供丰富的移动Web技术资源 v 前景展望 jQueryMobile 开源项目 Sencha Touch 2中文指南 Sencha Touch 2 & PhoneGap开源客户端（请关注”移动Web开发社区”发布源代码） HTML5技术的发展，为移动Web提供良好的基础。 开源框架发展前景看好，PhoneGap在被Adobe收购后，捐献给Apache开源组织。 Sencha Touch 2 在性能有很大改进，后续版本发布，我们始终保持关注。 移 动 Web开 发 社 区 主 讲 ： 刚 子