一网天行专业的网站小程序APP系统开发公司
新闻资讯-网站建设|微信开发|小程序开发-一网天行

Sencha Touch 2 快速入门(部署和小实例)

发布时间:2016-05-05 19:50:59编辑发布:一网天行网站开发公司

什么是Sencha Touch?

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

你需要准备好

首先,你需要下载免费的Sencha Touch 2 SDK 和 SDK Tools (或者Sencha Cmd ) 。你还需要:
一个本地的web server
安装

首先,把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.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("")

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

分享至:

相关资讯