Sencha Touch 是什么
Sencha Touch是一种高性能HTML5移动应用程序框架。可以使用Sencha Touch生成native-app-like(仿本地应用)在浏览器或混合壳上运行。Sencha Touch支持Android,iOS,Windows Phone,微软Surface Pro和RT,和黑莓手机。
必备软件
1. Sencha Touch 要求Chrome和Safari浏览器。在任何移动设备上你都可以使用Chrome,Safari,或者IE10和11
2.Sencha Cmd。
3. JRE1.7。Sencha Cmd是用Java写的所以需要JRE环境才能运行。
4. Ruby,构建完整的CSS被Touch使用。
1. windows:去官网下载Ruby.exe文件,运行安装。
2. Mac:Ruby已经被预安装。你可以在终端命令ruby -v验证其版本。
3. Ubuntu:使用sudo apt-get install ruby2.0.0去下载安装。
5. 最好的Debugging工具是使用最新的浏览器像Chrome和Safari。
6. 通过命令行查看Sencha Cmd操作和版本。
7. 创建一个特殊的项目目录作为你的应用,并确保这个目录是可写的。
8. 启动Web服务。如果你要使用Sencha Cmd自己的Web容器,那就使用命令cd到你生成应用所在位置,使用“Sencha web start”命令。接着你就可以通过链接地址: http://localhost:1841/>ProjectName<
URL访问应用程序。关闭服务使用CTRL+C,或者打开命令行输入“sencha web stop”。
如果你使用的是Windows的IIS作为web服务器,需要手工添加“application/x-json”作为消息实体给Sencha Touch一个稳定的运行环境。查看如何添加这个消息实体请看下面链接:http://stackoverflow.com/a/1121114/273985
安装
解压下载的Sencha Touch zip文件到你的项目路径下。
如果你正在使用Sencha Cmd的Web服务器,你可以把这个Sencha Touch压缩包解压在任何目录下面,并把Sencha Cmd服务容器指定在这个目录下。
如果你正在使用其他Web服务器,就将Sencha Touch压缩包解压到Web容器中。
你可以在浏览器地址栏导航到这个路径http://localhost/touch-n.n下看看Sencha Touch文档。
查看你已经正确的安装了Sencha Cmd,在终端切换路径cd到web容器下,在输入sencha命令行如下图所示。
$ cd ~/webroot/touch-n.n/
$ sencha
Sencha Cmd vn.n.n
...
生成你的第一个App
现在你已经安装了Sencha Touch和Sencha Cmd就可以生成一个应用了。
注意:当使用sencha命令行生成一个app时,你必须下载SDK目录或已生成的应用程序。详情请参阅Sencha Cmd文档。
此时终端还在Sencha Touch SDK文件夹下,输入以下:
$ sencha generate app MyApp ../MyApp
[INFO] Created file ...
…
本次生成一个Sencha Touch应用程序框架,以变量MyApp为命名空间并位于 ../MyApp目录(一个级别高于Sencha Touch SDK目录)。应用程序的框架包含了你要创建一个Sencha Touch应用的所有文件,这个本地包包括默认的index.html,一个Touch SDK拷贝文件,CSS文件,image和配置文件,都是提供给你的应用程序的。
如果您的应用程序已成功生成,通过打开一个web浏览器来验证。假设你已经提取SDK webroot文件夹,您应该能够导航到http://localhost/MyApp打开你的应用。
注意:如果在Linux使用命令行失败,那就使用root权限作为一个普通用户重装Sencha Cmd
代码开发
在Sencha Cmd文档可以发现生成文件的完整列表,下面的清单为每个文件和目录提供了一个简短的描述。
- app -这个文件夹包含了Models,Views,Controllers, 和 Stores 文件。
- app.js-这个JavaScript是作为你的应用的主要入口点。
- app.json-配置文件。
index.html-
HTML文件.packager.json-当使用Sencha Cmd创建本地应用的时候的配置文件。
resources-这个目录包含
CSS 和images文件。
title: 'Home Tab'
接着改成如下面所示的样子:
title: 'Woohoo!'
继续按照下面的样子改:
html: [
"I changed the default <b>HTML Contents</b> to something different!"
].join("")
刷新你的浏览器上的应用地址看看你的变更的效果。
如果你想跳过开头或想找关于这个框架的其他方面的 更详细的信息,查看以下指导和资源: