移动Web开发实践之旅.ppt

《移动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框架之上，为其跨平台能力提供良好的基础。支持较好的平台有：、windows phone7、Blackberry、Firfox Mobile、Chrome Desktop 11-13 等，请参照官网。布局自适应手机、平板电脑和PC。结合PhoneGap，可生成跨平

4、台移动客户端。较丰富的组件支持，官方组件演示链接。,移动Web开发框架分析和选择,之jQueryMoble典型布局,jQueryMobile 典型的页面布局根据data-role属性做组件渲染，page包含head、navbar、content，page 为显示设备可视区域的一屏，多个page可以放在一个页面或一个独立的HTML页面。开源项目参考 示例代码和界面为“移动Web开发社区”开源项目。请点击链接查看源代码。,移动Web开发框架分析和选择,之jQueryMoble事件和数据加载,jQueryMobile 提供事件监听机制，在页面创建或显示时，提供回调函数。如下面的示例代码，在分类页面创

5、建时，用JSONP方式从服务器端，取回数据，然后填充页面内容。,也可用JSP、PHP等语言，在服务端打印内容。,移动Web开发框架分析和选择,之Sencha Touch 2,Sencha Touch对于开发者而言，可简单认为Sencha Touch是ExtJS在移动端的版本。ExtJS在PC领域，UI样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。,支持以Webkit为核心的平台 Android、iPhone、BlackBerry。,Sencha官网在10月11日发布SenchaTouch2开发者预览版，被称为历史性改变，下面列出部分新特性：ExtJS4为核心,支持类动态加

6、载机制，按需使用JavaScript文件。更清晰的MVC模式。API设计更加简单，比如：统一接口进行类定义和实例化操作。自动化程度提高，不再需要对View、Model等组件手动注册。,Sencha Touch 2 官方指南中文版10月14日，“移动Web开发社区”发起了对ST2官方指南的翻译工作，了解更多特性请链接这里。在此感谢社区成员：威老、bamboo、若天、桔子、terry 为官方指南的翻译工作做出的贡献！,学习成本较高 纯JavaScript编码实现布局，需熟悉MVC开发模式和组件之间关系。,移动Web开发框架分析和选择,之Sencha Touch 2 MVC模式介绍,MVC模式介绍数

7、据模型层Model包括对数据的基本描述，如字段名称和类型；Store 缓存来自Model的数据，并且提供排序、过滤等方法，通常Store会和视图层、业务控制层打交道。代表视图层(View)，为数据提供展现方式，如：列表式展现或其他方式。业务控制层（Controller）主要负责事件监听和业务处理。,移动Web开发框架分析和选择,之Sencha Touch 2 一般开发过程,建立应用，配置应用命名空间、控制器和数据模型,新建讨论列表数据模型Model，Proxy为服务器端数据交换接口。,以“移动Web开发社区”客户端，讨论列表为例，介绍其开发过程。该客户端为开源项目，请关注社区发布源代码。,移动

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

9、问设备本地API，而对其实行过程进行了很好的封装，支持多平台。,插件机制，可方便扩展PhoneGap接口。,提供对设备文件系统、摄像头、手机联系人、数据存储等能力。,移动Web开发框架分析和选择,之PhoneGap云编译,PhoneGap build 云打包应用 开发人员上传程序压缩文件到云编译平台：，可在线下载IOS、Android、等平台运行程序。,移动Web开发和调试工具,之DreamWeaver CS5.5,Dreamweaver CS5.5集成应用开发环境,集成jQueryMobile 和 PhoneGap框架，支持Android 虚拟机。,详细安装方法请见“移动Web开发社区”网站

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