2014年移动Web开发实践之旅41722220.pptVIP

移动Web开发实践之旅 主 讲：刚子 内容提纲 传统网站面临的挑战 随着手机和平板电脑普及，传统信息类和电子商务网站因市场需求向移动端转移。这面临着挑战，传统网站在终端不能很好的适应，需要做移动站点；客户端应用由于Android、IOS等多种平台存在，开发、维护成本高。 机遇与挑战并存 移动Web技术，利用浏览器、HTML5、JavaScript跨平台特性，提供通用的解决方案。一次编码，可以做为移动站点支持手机和平板电脑，包装成客户端应用支持Android、IOS等主流平台。 移动Web技术优势 通用性，移动站点、跨平台的客户端应用提供统一的解决方案。 较低的开发和维护成本，因为您只需要一次编码。 移动Web技术目前适合场景 以信息为主的应用，不适合对性能要求过高的产品。 移动Web开发框架分析和选择 以移动Web开发客户端为例，整体架构如下： UI层负责页面布局，可自行实现或使用现有框架，框架优美之处在于封装常用布局和公共组件，开发者只需关注业务逻辑，推荐框架jQueryMobile和SenchaTouch。 移动中间件，处于UI层和终端系统之间，封装各系统差异，提供统一的JavaScript接口，操作系统资源，如：文件系统、摄像头等，推荐PhoneGap。 终端系统，处于整个应用的最底层，除非需要扩展PhoneGap接口，否则开发者可以不关心。 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发和调试工具 移动Web开发和调试工具 移动Web技术资源和前景展望 移动Web开发社区 移动Web开发社区 团队成员：威老、阿本 二零一一年金秋十月 于 杭州 移动Web开发和调试工具介绍 jQueryMobile 和 SenchaTouch2实例演示 移动Web发展机遇和技术优势 移动Web开发框架分析和选择 移动Web技术资源和前景展望 移动Web发展机遇和技术优势 — 之需求分析 Web 移动站点 （手机、平板电脑） 客户端应用 （Android、IOS） 客户端应用 （其他平台） 移动Web发展机遇和技术优势 — 平台示意图 — 之总体架构 UI层 移动中间件 终端系统 jQueryMobile Sencha Touch … PhoneGap … Android、IOS … — 之jQueryMoble介绍 jQueryMobile 支持较多平台： 建立在jQuery框架之上，为其跨平台能力提供良好的基础。 支持较好的平台有：Apple IOS 3.2-5.0Beta、Android 2.1-2.3、windows phone7、Blackberry、Firfox Mobile、Chrome Desktop 11-13 等，请参照官网。 布局自适应手机、平板电脑和PC。 结合PhoneGap，可生成跨平台移动客户端。 较丰富的组件支持，官方组件演示链接。 — 之jQueryMoble典型布局 jQueryMobile 典型的页面布局 根据data-role属性做组件渲染，page包含head、navbar、content ，page 为显示设备可视区域的一屏，多个page可以放在一个页面或一个独立的HTML页面。 开源项目参考 示例代码和界面为“移动Web开发社区”开源项目。 请点击链接查看源代码。 — 之jQueryMoble事件和数据加载 jQueryMobile 提供事件监听机制，在页面创建或显示时，提供回调函数。 如下面的示例代码，在分类页面创建时，用JSONP方式从服务器端，取回数据，然后填充页面内容。 也可用JSP、PHP等语言，在服务端打印内容。 — 之Sencha Touch 2 Sencha Touch 对于开发者而言，可简单认为Sencha Touch是ExtJS在移动端的版本。ExtJS在PC领域，UI样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。 支持以Webkit为核心的平台 Android、iPhone、BlackBerry。 Sencha官网在10月11日发布SenchaTouch2开发者预览版，被称为历史性改变，下面列出部分新特性： ExtJS4为核心,支持类动态加载机制，按需使用JavaScript文件。 更