Sencha Touch是什么

Sencha Touch是专门用于移动应用开发的JavaScript框架，也是第一个基于HTML5的移动应用框架，其前身是Ext。使用Sencha Touch，开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用，其效果看起来如同本地应用。目前Sencha Touch已经成为构建移动HTML5应用的领先框架。

官方网站：http://www.sencha.com/products/touch/

快速入门：http://docs.sencha.com/touch/2.4.0/#!/guide

为什么要使用Sencha Touch

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
下面是Sencha官方给出的几点特性

1. 基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。

2. 支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。

3. 增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。

4. 数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

如何构建Sencha Touch环境

Sencha Touch的开发模式呢和我们使用JQuery、Extjs不一样了。那么，怎么样做开发呢？它采用的方式是目前来说比较流行的基于命令的代码生成方式开发。非常的方便，灵活。

来看看我们需要准备的环境：

• Sencha cmd 这个是Sencha提供的命令行工具。
• Sencha touch 是我们需要使用库
• 配置环境变量
• JDK\Ruby

1. 安装Sencha Cmd

• 下载Sencha Cmd安装包

  这个Sencha Cmd是支持多平台的哦。
  
  下载地址：[http://www.sencha.com/products/sencha-cmd/download/sencha-cmd-5.0.1/windows](http://www.sencha.com/products/sencha-cmd/download/sencha-cmd-5.0.1/windows)
  

  

  那么，我这里安装在D:\buildtools\SenchaCmd

• 配置环境变量

   在PATH中追加： `D:\buildtools\SenchaCmd\Sencha\Cmd\5.0.1.231`
  
   `注意：这里要根据自己的安装路径来配置哦`
  

• 测试安装

    CMD运行下面命令
  
   ```
  

  sencha
  “`
  

1. 安装Java、Ruby运行环境

<

p>快速入门原文

4. Java Runtime Environment version 1.7. Sencha Cmd is written in Java and needs the JRE to run. Note: If you are building an Android app using Windows, you must install the Java SDK. You can build an iOS app under Windows with the JRE, but not an Android app.

5.Ruby to create the compiled CSS used by Touch.
Windows: Download Ruby from rubyinstaller.org. Download the RubyInstaller .exe file and run it.
Mac: Ruby is pre-installed. You can verify its presence with the ruby -v command.
Ubuntu: Use sudo apt-get install ruby2.0.0 to download and install Ruby.

因此我们需要安装Java 运行环境和Ruby运行环境。

注意：安装ruby是因为Sass依赖于ruby环境，而Sencha Touch使用了Sass。安装JDK是因为某些Sencha Touch使用Java开发呗，呵呵

1. 下载Sencha Touch,并解压出来

下载地址：http://www.sencha.com/products/touch/download/

可以负责任的告诉你，需要注册账号，并且登录才能下载。

我这里解压路径为：D:\buildtools\touch-2.3.1

创建第一个Sencha Touch应用

在命令行中执行：

sencha -sdk D:\buildtools\touch-2.3.1 generate app MyApp .

注意后边有个点喔，代表当前文件夹构建项目，建议在空文件夹路径执行该命令。

当你兴奋的看到这样的界面时候，那么你的项目就生成OK了。

来看看生成了些什么文件吧

这里是官方的解释，我就不翻译了

• app – The directory containing the Models, Views, Controllers, and Stores for your app.
• app.js – The main JavaScript entry point for your app.
• app.json – The configuration file for your app.
• index.html – The HTML file for your app.
• packager.json – The configuration file used by Sencha Cmd for creating native packages for your application.
• resources – The directory containing the CSS and the images for your app

构建Sencha Touch项目

构建命令

sencha app build

项目自动生成到：D:\hello\build\production\

将项目构建生成路径设置为Web服务器路径，这样我们就可以看到效果了

Sencha Touch应用运行效果