使用 Sencha Touch 开发超炫的跨平台移动 Web 应用

最新推荐文章于 2021-06-26 16:00:29 发布

泰道

最新推荐文章于 2021-06-26 16:00:29 发布

阅读量1k

点赞数

分类专栏： ExtJs框架文章标签： web 跨平台 javascript apple 框架工具

本文链接：https://blog.csdn.net/wenwenzhuo/article/details/7108822

版权

ExtJs框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

随着智能移动设备的普及和 3G 通讯技术的发展，将会有越来越多的传统应用部署为移动 Web 应用，而良好兼容性和操控性是 Web 应用成功的关键。本文将分为以下四个部分介绍 Sencha Touch 的独特之处，并结合示例为相关移动应用的开发人员编写良好兼容性和操控性的 Web 程序提供借鉴。

功能与特性
界面组件
动画效果
应用开发环境的搭建及相关 JavaScript API 用法

与众不同的 Sencha Touch：功能和特性

Sencha Touch 是世界上第一个支持 HTML5 和 CSS3 标准的移动应用框架，你可以使用 HTML5 来编写音频和视频组件，还可以使用 LocalStorage Proxy 来存储离线数据，同时，大量 CSS3 样式表为你提供了创建健壮样式层的可能。该框架在提供丰富功能的基础上对 JavaScript 库文件进行合理优化，使得经过 gzipped 压缩后的库文件在 120kb 以下，最大限度地提升了 Web 应用在浏览器中的加载速度，增强了用户体验。

除了对最新标准的支持，该框架最大的特色正如其名，增强了对手持移动设备触控操作的支持，除了支持浏览器标准的触摸事件，还额外添加了如 tap, double tap, swipe, tap-hold, pinch 和 rotate 等富有吸引力的操作事件，使用户体验到与原生程序一样的效果。

Sencha Touch 另一大优势在于其跨平台性，由于 Apple iOS 和 Andriod 设备有其独立的开发、测试和运行环境，针对某一平台开发的应用在另一平台是不兼容的，这大大增加了移动应用的开发成本。而基于 Sencha Touch 开发的 Web 应用具有与原生应用相同的用户体验，同时兼容 Apple iOS、Andriod 和黑莓 RIM 6 设备，可以满足大部分的市场需求。

此外，借助 Ext JS 多年来对 Ajax 数据集成的经验，该框架提供了丰富的数据处理功能。开发人员能够方便地处理各种格式的数据如 XML、JSON，并能灵活地绑定到可视化组件加以展示。

个性鲜明的 UI 组件

表单是用户与应用程序交互的基本媒介，如用户信息注册、应用程序配置、个人评论的发表这些常见的 Web 应用场景都需要表单组件的支持。Sencha Touch 为我们提供了形式多样、操作简单的表单组件。图 1 中第一个界面所展示的是基本表单元素，包括多种类型的输入框，如纯文本、密码、邮件、URL 地址等类型，并能根据用户输入的文本进行有效性验证，以减少开发者对用户输入格式的验证代码，同时，基本表单还支持单选、多选、日历选择、多行文本输入等控件类型。图 1 第二个界面展示了触控屏手持设备所特有的滑动条组件，适合调整一些连续性的数值和作为切换的开关按钮。图 1 中第三个界面展示了建立在工具条上的表单控件，非常适用于搜索和文本过滤的应用场景。
图 1 表单组件

列表是移动 Web 应用展示信息最为常见的组件，其中比较有特色的是分组列表（Grouped List）（如图 2 中第一个界面），它可以根据所列项目的首字母进行排序分组，当用户触摸屏幕右侧字母索引时，屏幕可快速滚动并定位至对应分组，非常适合于列表信息较多的情况，如联系人列表，歌曲列表等。图 2 中第二个界面所示的嵌套列表（Nested List）则非常适合于展示信息有层级关系的情况，如浏览论坛时的“讨论区 -> 主题帖 -> 原帖及回复内容”这样的层次关系。
图 2 列表组件

精致形象的图标和布置合理的工具栏是 Apple iOS 原生应用引以为傲的部分，而 Sencha Touch 也可以做到这一点。图 3 中第一个界面所示的是框架内置的图标样式，已可以满足大部分应用的需要，开发人员还可以通过自定义图标样式来扩展出更多更丰富的图标。如图 3 中第二个界面所示，图标所在的工具栏布置方式也灵活多样，即可在屏幕顶部或者底部，也可以多个层叠，并可以在工具栏上布置形状各异的按钮。图 3 中第三个界面所展示的是根据底部 Tab 标签页而进行切换的面板，不同的面板中可以包含不同的主题内容。
图 3 图标、工具栏和标签页

如果你以为 Sencha Touch 只能做到以上这些小儿科，那就错了，下面展示了一些高级的 UI 功能。图 4 中第一个界面类似于 Apple iOS 设备上的 SpringBoard 操作，可以通过手指的左右或者上下滑动，来旋转切换界面窗口；图 4 中第二个界面显示了一个窗口重叠的效果，当上层弹出窗口激活时，下层窗口的操作是被屏蔽的，在提醒用户执行一些重要操作的场景中（如删除或者保存），这样的 UI 组件是非常好用的。
图 4 旋转切换与窗口的重叠效果

酷炫的动画效果

一直以来，基于浏览器的 Web 程序动画效果常被人诟病，尤其是基于 JavaScript 的动画效果库相对于原生的应用程序来说，还是存在一定的差距，而刚发布的 Sencha Touch 1.1.0 版本就支持多达六种动画效果，分别是 cube、fade、flip、pop、slide 和 wipe。以最为酷炫的 3D 旋转 Cube 动画为例，它将当前显示的界面面板（称之为 Card）想象为立方体的一个面，而即将展示的 Card 作为相邻的另外一个面，以左上方的顶点作为旋转基点进行旋转，从而得到 Card 之间切换的动画效果。大家一定很好奇它是如何做到这一点的，我们通过查看该动画效果的源代码即可找到答案。
图 5 Cube 动画效果示例

以下是本人做过项目的例子