Sencha Touch 2 快速入门

最新推荐文章于 2025-11-09 10:41:00 发布

转载最新推荐文章于 2025-11-09 10:41:00 发布 · 678 阅读

手机开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Sencha Touch创建基于HTML5的手机应用，包括安装SDK、生成首个应用及基本定制步骤。

什么是Sencha Touch?

Sencha Touch使得你可以便捷地创造一个基于HTML5的手机应用，支持Android、iOS和黑莓等设备，并且在浏览器中创造原生APP般的体验。

你需要准备好

首先，你需要下载免费的Sencha Touch 2 SDK 和 SDK Tools （或者Sencha Cmd ) 。你还需要：
一个本地的web server
现代浏览器；推荐 Chrome 和 Safari （请不要用IE6！！）
如果你是在Windows上使用IIS，请记得添加 application/x-json 这个MIME Type，否则Sencha Touch不能正常工作。你可以从这里知道应该如何做：
http://stackoverflow.com/a/1121114/273985（很抱歉我并不使用IIS，没有对这个链接中的方法进行测试）。

安装

首先，把SDK压缩包解压到你的项目目录。最好，这个目录可以被你的HTTP服务器访问。比如，你可以从你浏览器访问 http://localhost/sencha-touch-* 来访问Sencha Touch的文档。
你还需要运行SDK Tools( Sencha Cmd，注意SDK Tools 和 Sencha Cmd只需要安装一个，在我的机器上，Sencha Cmd工作更加正常）安装程序。SDK Tools会在你的PATH环境变量中增加sencha命令行工具，你可以用它来产生一个全新的模板应用。为了检查你的SDK tools是否安装好，切到你的Sencha Touch目录，输入sencha命令。比如：

 
   1.
   $ cd ~/webroot/sencha-touch-2.0.0-gpl/
  
   2.
   $ sencha
  
   3.
   Sencha Command v2.0.0 for Sencha Touch 2
  
   4.
   Copyright (c) 2012 Sencha Inc.
  
   5.
   ......

注意：你必须在下载好的SDK文件夹或者产生好的Touch app目录中使用sencha命令

产生你的第一个应用

现在，你有了Sencha Touch和安装好的SDK tools，于是可以开始生成一个应用了。保证你仍然在Sencha Touch SDK目录下，输入下列命令：

 
   1.
   $ sencha generate app GS ../GS
  
   2.
   [INFO] Created file /Users/nickpoulden/Projects/sencha/GS/.senchasdk
  
   3.
   [INFO] Created file /Users/nickpoulden/Projects/sencha/GS/index.html
  
   4.
   [INFO] Created file /Users/nickpoulden/Projects/sencha/GS/app.js
  
   5.
   ...

这将会产生一个叫做GS的Sencha Touch应用骨架，放在../GS目录下。骨架应用中包含了所有你创建一个Touch应用所需要的东西，包括默认的index.html，一份Touch SDK的拷贝，CSS，图片和打包你的应用所需的配置文件。

让我们检查一下你的应用是否生成成功。假设你的SDK位于webroot文件夹，你应该能从http://localhost/GS看到默认app：

浏览代码

使用你最喜欢的IDE或者文本编辑器打开GS文件夹。文件夹结构如下：

下面有一个对于每个文件和文件夹的简介：

app - 放着模型(Models)，视图(Views)，控制器(Controllers)和存储(Stores)的目录。
app.js - 主Javascript入口。
app.json - 配置文件，用来创建你的应用的缩小(minified)版本。
index.html - 你的应用的HTML文件。
packager.json - 配置文件，用来打包成iOS和Android应用。
resources - CSS和图片。
sdk(touch) - Sencha Touch SDK的拷贝。你不应该修改这个文件夹中的内容。

打开app.js，你应用的主入口点。

launch函数是你应用的入口点。在默认应用下，他将会先隐藏loading画面，然后创建一个Main视图的实例，并把它加入Viewport。
Viewport采用的卡片布局，让你可以添加元件到目录中。默认应用添加Main视图到viewport，然后我们看看Main视图的代码吧。

打开app/view/Main.js，我们可以修改title属性：

1. title: 'Home tab'

2. title: 'Woohoo!'

我们还可以修改页面内容：

 
   1.
   html: [
  
   2.
   "我<b>修改</b>了默认页面!!"
  
   3.
   ].join("")

现在，刷新你的浏览器，看看你的修改结果。

作者:
原文: http://www.verydemo.com/demo_c131_i9067.html