移动web开发实践之旅

《移动web开发实践之旅》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、移动Web开发实践之旅主讲：刚子团队成员：威老、阿本二零一一年金秋十月于杭州内容提纲移动Web开发和调试工具介绍jQueryMobile和SenchaTouch2实例演示移动Web发展机遇和技术优势移动Web开发框架分析和选择移动Web技术资源和前景展望www.html5mobi.com传统网站面临的挑战随着手机和平板电脑普及，传统信息类和电子商务网站因市场需求向移动端转移。这面临着挑战，传统网站在终端不能很好的适应，需要做移动站点；客户端应用由于Android、IOS等多种平台存在，开发、维护成本高。机遇与挑战并存移动Web技术，利用浏览器、HTML5、Ja

2、vaScript跨平台特性，提供通用的解决方案。一次编码，可以做为移动站点支持手机和平板电脑，包装成客户端应用支持Android、IOS等主流平台。移动Web技术优势通用性，移动站点、跨平台的客户端应用提供统一的解决方案。较低的开发和维护成本，因为您只需要一次编码。移动Web技术目前适合场景以信息为主的应用，不适合对性能要求过高的产品。移动Web发展机遇和技术优势—之需求分析www.html5mobi.comWeb移动站点（手机、平板电脑）客户端应用（Android、IOS）客户端应用（其他平台）移动Web发展机遇和技术优势—平台示意图www.html5mob

3、i.com移动Web开发框架分析和选择以移动Web开发客户端为例，整体架构如下：UI层负责页面布局，可自行实现或使用现有框架，框架优美之处在于封装常用布局和公共组件，开发者只需关注业务逻辑，推荐框架jQueryMobile和SenchaTouch。移动中间件，处于UI层和终端系统之间，封装各系统差异，提供统一的JavaScript接口，操作系统资源，如：文件系统、摄像头等，推荐PhoneGap。终端系统，处于整个应用的最底层，除非需要扩展PhoneGap接口，否则开发者可以不关心。—之总体架构UI层移动中间件终端系统jQueryMobileSenchaTouc

4、h…PhoneGap…Android、IOS…www.html5mobi.com移动Web开发框架分析和选择—之jQueryMoble介绍jQueryMobile支持较多平台：建立在jQuery框架之上，为其跨平台能力提供良好的基础。支持较好的平台有：AppleIOS3.2-5.0Beta、Android2.1-2.3、windowsphone7、Blackberry、FirfoxMobile、ChromeDesktop11-13等，请参照官网。布局自适应手机、平板电脑和PC。结合PhoneGap，可生成跨平台移动客户端。较丰富的组件支持，官方组件演示链接。w

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

6、数。如下面的示例代码，在分类页面创建时，用JSONP方式从服务器端，取回数据，然后填充页面内容。也可用JSP、PHP等语言，在服务端打印内容。www.html5mobi.com移动Web开发框架分析和选择—之SenchaTouch2SenchaTouch对于开发者而言，可简单认为SenchaTouch是ExtJS在移动端的版本。ExtJS在PC领域，UI样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。支持以Webkit为核心的平台Android、iPhone、BlackBerry。Sencha官网在10月11日发布SenchaTouch2开

7、发者预览版，被称为历史性改变，下面列出部分新特性：ExtJS4为核心,支持类动态加载机制，按需使用JavaScript文件。更清晰的MVC模式。API设计更加简单，比如：统一接口进行类定义和实例化操作。自动化程度提高，不再需要对View、Model等组件手动注册。SenchaTouch2官方指南中文版10月14日，“移动Web开发社区”发起了对ST2官方指南的翻译工作，了解更多特性请链接这里。在此感谢社区成员：威老、bamboo、若天、桔子、terry为官方指南的翻译工作做出的贡献！学习成本较高纯JavaScript编码实现布局，需熟悉MVC开发模式和组件之间

8、关系。www.html5mobi.co