【高级资料】2015年移动web开发实践之旅.ppt

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