《移动Web开发实践之旅.ppt》由会员分享，可在线阅读，更多相关《移动Web开发实践之旅.ppt（19页珍藏版）》请在三一文库上搜索。
1、移动Web开发实践之旅,主 讲：刚子,团队成员：威老、阿本,二零一一年金秋十月 于 杭州,,内容提纲,移动Web发展机遇和技术优势,,传统网站面临的挑战 随着手机和平板电脑普及，传统信息类和电子商务网站因市场需求向移动端转移。这面临着挑战，传统网站在终端不能很好的适应，需要做移动站点；客户端应用由于Android、IOS等多种平台存在，开发、维护成本高。 机遇与挑战并存 移动Web技术，利用浏览器、HTML5、JavaScript跨平台特性，提供通用的解决方案。一次编码，可以做为移动站点支持手机和平板电脑，包装成客户端应用支持Android、IOS等主流平台。 移动Web技术优势 通用性，移动
2、站点、跨平台的客户端应用提供统一的解决方案。 较低的开发和维护成本，因为您只需要一次编码。 移动Web技术目前适合场景 以信息为主的应用，不适合对性能要求过高的产品。,移动Web发展机遇和技术优势, 之需求分析,,移动Web发展机遇和技术优势, 平台示意图,,移动Web开发框架分析和选择,以移动Web开发客户端为例，整体架构如下： UI层负责页面布局，可自行实现或使用现有框架，框架优美之处在于封装常用布局和公共组件，开发者只需关注业务逻辑，推荐框架jQueryMobile和SenchaTouch。 移动中间件，处于UI层和终端系统之间，封装各系统差异，提供统一的JavaScript接口，操作系
3、统资源，如：文件系统、摄像头等，推荐PhoneGap。 终端系统，处于整个应用的最底层，除非需要扩展PhoneGap接口，否则开发者可以不关心。, 之总体架构,jQueryMobile,Sencha Touch ,PhoneGap ,Android、IOS ,,移动Web开发框架分析和选择, 之jQueryMoble介绍,jQueryMobile 支持较多平台： 建立在jQuery框架之上，为其跨平台能力提供良好的基础。 支持较好的平台有：Apple IOS 3.2-5.0Beta、Android 2.1-2.3、windows phone7、Blackberry、Firfox Mobile、
4、Chrome Desktop 11-13 等，请参照官网。 布局自适应手机、平板电脑和PC。 结合PhoneGap，可生成跨平台移动客户端。 较丰富的组件支持，官方组件演示链接。,,移动Web开发框架分析和选择, 之jQueryMoble典型布局,jQueryMobile 典型的页面布局 根据data-role属性做组件渲染，page包含head、navbar、content ，page 为显示设备可视区域的一屏，多个page可以放在一个页面或一个独立的HTML页面。 开源项目参考 示例代码和界面为“移动Web开发社区”开源项目。 请点击链接查看源代码。,,移动Web开发框架分析和选择, 之j
5、QueryMoble事件和数据加载,jQueryMobile 提供事件监听机制，在页面创建或显示时，提供回调函数。 如下面的示例代码，在分类页面创建时，用JSONP方式从服务器端，取回数据，然后填充页面内容。,也可用JSP、PHP等语言，在服务端打印内容。,,移动Web开发框架分析和选择, 之Sencha Touch 2,Sencha Touch 对于开发者而言，可简单认为Sencha Touch是ExtJS在移动端的版本。ExtJS在PC领域，UI样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。,支持以Webkit为核心的平台 Android、iPhone、BlackBe
6、rry。,Sencha官网在10月11日发布SenchaTouch2开发者预览版，被称为历史性改变，下面列出部分新特性： ExtJS4为核心,支持类动态加载机制，按需使用JavaScript文件。 更清晰的MVC模式。API设计更加简单，比如：统一接口进行类定义和实例化操作。 自动化程度提高，不再需要对View、Model等组件手动注册。,Sencha Touch 2 官方指南中文版 10月14日，“移动Web开发社区”发起了对ST2官方指南的翻译工作，了解更多特性请链接这里。 在此感谢社区成员：威老、bamboo、若天、桔子、terry 为官方指南的翻译工作做出的贡献！,学习成本较高 纯Ja
7、vaScript编码实现布局，需熟悉MVC开发模式和组件之间关系。,,移动Web开发框架分析和选择, 之Sencha Touch 2 MVC模式介绍,MVC模式介绍 数据模型层Model包括对数据的基本描述，如字段名称和类型；Store 缓存来自Model的数据， 并且提供排序、过滤等方法，通常Store会和视图层、业务控制层打交道。 代表视图层(View) ，为数据提供展现方式，如：列表式展现或其他方式。 业务控制层（Controller）主要负责事件监听和业务处理。,,移动Web开发框架分析和选择, 之Sencha Touch 2 一般开发过程,建立应用，配置应用命名空间、控制器和数据模型
8、,新建讨论列表数据模型Model，Proxy为服务器端数据交换接口。,以“移动Web开发社区”客户端，讨论列表为例，介绍其开发过程。该客户端为开源项目， 请关注社区发布源代码。,,移动Web开发框架分析和选择, 之Sencha Touch 2 一般开发过程,新建数据存储Store，绑定Model，为视图层提供数据访问。,新建讨论列表视图，绑定Store。,,移动Web开发框架分析和选择, 之Sencha Touch 2 一般开发过程,控制器里注册事件监听和业务处理。,总结,Sencha Touch 更加完善，团队有ExtJS开发人员，可优先选择。 jQueryMobile适合一般信息类网站，快
9、发速度快。 Sencha Touch 2 目前为开发者预览版，不建议在实际项目中使用。,,移动Web开发框架分析和选择, 之PhoneGap,PhoneGap 提供一组JavaScript 接口，访问设备本地API， 而对其实行过程进行了很好的封装，支持多平台。,插件机制，可方便扩展PhoneGap接口。,提供对设备文件系统、摄像头、手机联系人、数据存储等能力。,,移动Web开发框架分析和选择, 之PhoneGap云编译,PhoneGap build 云打包应用 开发人员上传程序压缩文件到云编译平台：https:/ 等平台运行程序。,,移动Web开发和调试工具, 之DreamWeaver CS
10、5.5,Dreamweaver CS5.5集成应用开发环境,集成jQueryMobile 和 PhoneGap框架，支持Android 虚拟机。,详细安装方法请见 “移动Web开发社区”网站。,,移动Web开发和调试工具, 之远程调试工具,PhoneGap 远程调试工具Weinre，官方网站链接,，官方链接,在PC浏览器例如Chrome控制台，捕捉PhoneGap在移动设备上运行的错误，查看移动设备的DOM文档。,在官方提供的网页中，输入JavaScript命令，在终端设备执行，多用于查看JavaScript变量等。,,移动Web技术资源和前景展望,“移动Web开发社区”提供丰富的移动Web技术资源,前景展望,jQueryMobile 开源项目 Sencha Touch 2中文指南 Sencha Touch 2 & PhoneGap开源客户端（请关注”移动Web开发社区”发布源代码）,HTML5技术的发展，为移动Web提供良好的基础。,开源框架发展前景看好，PhoneGap在被Adobe收购后，捐献给Apache开源组织。,Sencha Touch 2 在性能有很大改进，后续版本发布，我们始终保持关注。,,Thank You !,主讲：刚子,