`

Sencha-Touch开发环境准备(Webstorm+Ruby)

阅读更多

encha-Touch开发环境准备(Webstorm+Ruby)

一、准备

 1、编码工具(推荐)

WebStorm-7.0.3.exehttp://download.jetbrains.com/webstorm/WebStorm-7.0.3.exe

2、SenchaSDK(用来创建、打包sencha项目)

http://cdn.sencha.com/cmd/4.0.1.45/SenchaCmd-4.0.1.45-windows.exe.zip

3、sencha-touch-2.3.1-commercial.zip(Sencha touch源码及API文档)

http://www.sencha.com/products/touch/download/

4Ruby 2.0.0-p353 (x64)SASS开发工具(预编译sass文件))

http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.0.0-p353-x64.exe?direct

5Ruby 2.0.0-p353 SASS开发工具(预编译sass文件))

http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.0.0-p353.exe?direct

 

二、工具安装

 1、WebStorm安装很简单,一直点next就OK,但安装好后只能试用30天。

 2、SenchaSDK安装,一直点next就OK,在安装该SDK之前请确保电脑上已有java的jdk环境。

    验证SenchaSDK是否安装成功:cmd 到刚解压的文件夹目录,再执行sencha命令

  若能看到以上信息说明SenchaSDK已安装成功!

 3、将sencha-touch-2.0.1.1-commercial.zip解压到任意文件夹。

 4、Ruy安装

    Sencha Touch themes

    ST中,Themes是一个非常有用的方法来快速改变我们应用程序的外观的。

    SASS + Compass = themes

如果我们真的决定要改变我们的主题的话,我们就不得不安装SASS和Compass了,

这些并不包含在ST的库文件中。首先我们要安装Ruby。

 

三、创建应用

创建SenchaTouch项目

1、cmd ——> cd 到sencha-touch目录

2、执行命令:sencha app create Process../Process all

3、查看首页:http://127.0.0.1:8080/Process 

 

用WebStorm打开项目

找到刚创建的项目目录

 

 

启用Rub 的compass功能

在开始菜单中找到 “Ruby 1.9.3-p0 -> Start Command Prompt with Ruby”并运行。找到对应项目的[应用]/resource/sass目录,执行如下代码:

Compass watch

 

<!--EndFragment-->
  • 大小: 35.2 KB
  • 大小: 83.9 KB
0
0
分享到:
评论

相关推荐

    Sencha-touch开发环境准备

    - **WebStorm**:WebStorm 是一款强大的 JavaScript 集成开发环境,支持包括 Sencha Touch 在内的多种前端框架。你可以从官方网站下载最新版本的 WebStorm,并按照安装向导进行安装。提供的注册码可以用于激活试用...

    sencha-touch 下载

    sencha-touch下载

    sencha-touch-2.3.1-gpl.zip

    sencha-touch-2.3.1-gpl.zip

    sencha-touch-grid

    sencha touch完整包(试用版)中的grid代码,位置在 touch-2.3.n &gt; packages &gt; sencha-touch-grid 使用时放到 ../MyApp/packages下 TouchGrid gives you a grid feature to arrange information in rows and columns...

    sencha-touch

    - **环境准备**:安装Sencha Cmd工具,用于项目初始化、构建和部署。 - **创建项目**:使用`sencha generate app`命令创建新项目,配置项目结构。 - **编写代码**:基于MVC模式组织代码,包括模型(Model)、视图...

    sencha-touch demo

    sencha-touch demo里面包含着基本常用的 phonegap-1.2.0.js index.html sencha-touch.css sencha-touch-all.js 等常用文件

    sencha-touch-2.1.1-gpl.zip

    1. **响应式设计**:Sencha Touch 2.1.1支持各种屏幕尺寸和设备类型,能自动调整布局以适应不同的显示环境,确保应用在不同设备上都有良好的视觉效果。 2. **组件库**:框架包含大量预定义的UI组件,如按钮、表格、...

    sencha-touch-2.1.0-gpl.zip

    sencha-touch-2.1.0-gpl.zip 官网下载的,欢迎下载

    sencha-touch-2.1.0-gpl

    而 `sencha-touch-all.js` 和 `sencha-touch.js` 是不包含调试信息的生产版本,适用于部署到生产环境,以减少应用程序的大小和提高加载速度。 4. **CMD工具**: `cmd` 目录可能包含了Sencha Command,这是一个命令行...

    sencha-touch-2.0

    sencha-touch-2.0 jar包,基于html5新技术,extjs的发展,可在移动设备上浏览实现iphone效果的服务端技术

    官方sencha-touch最新版本2.0.0(附文档和实例)

    总而言之,Sencha Touch 2.0.0 是一款强大的移动前端开发工具,它简化了移动Web应用的开发流程,提高了应用的性能和用户体验。无论是新手还是经验丰富的开发者,都可以通过这个版本的学习和实践,提升自己的移动开发...

    sencha-touch 1.0 2.0 案例

    sencha-touch 1.0 所有文档 sencha-touch 2.0 API(docs说明) 案例

    sencha-touch-2.0.0-commercial

    sencha-touch-2.0.0-commercial

    sencha-touch-2.0.0-commercial02

    sencha-touch-2.0.0-commercial

    sencha-touch 移动开发

    - **ExtJS**:Sencha Touch 基于ExtJS构建,因此其很多API和概念与ExtJS相同,但Sencha Touch更专注于移动环境。 在压缩包文件`sencha-touch-1.1.0`中,包含了Sencha Touch 1.1.0版本的源码和相关资源。这个版本...

    sencha-touch-2.x jsb文件 支持2.4

    在给定的标题和描述中,重点是使用"sencha-touch-2.4.0.jsb2"文件以及Eclipse与Spket集成开发环境(IDE)来提升开发效率。 **Sencha Touch 2.4.0**: 这是Sencha Touch的一个特定版本,它包含了众多增强和改进。...

    sencha-touch + cordova(PhoneGap)使用adt-eclipse打包实例

    Sencha Touch 和 Cordova(PhoneGap)是两个在移动应用开发中广泛使用的框架。Sencha Touch 是一个专门用于创建触屏设备上的富交互应用的JavaScript库,提供了丰富的UI组件和强大的数据管理功能。Cordova(PhoneGap...

    sencha-touch2.0-notesapp-demo

    通过深入研究"sencha-touch2.0-notesapp-demo",开发者可以掌握Sencha Touch 2.0的基本用法,并将这些知识应用到自己的移动应用开发项目中。同时,这个示例也为学习JavaScript框架和移动应用开发提供了一个很好的...

    PhoneGap+Sencha-touch2.0实现的android程序

    2. **创建PhoneGap项目**:使用PhoneGap命令行工具或集成开发环境(IDE)如Visual Studio Code、IntelliJ IDEA创建一个新的PhoneGap项目。指定项目名称和目标平台,这里我们选择Android。 3. **引入Sencha Touch**...

    sencha-touch2 mvc demo

    总结,"sencha-touch2 mvc demo"是一个展示如何使用Sencha Touch 2 MVC模式开发移动应用的实例,它涵盖了模型、视图和控制器的使用,以及基础UI控件的集成。这个示例可以帮助开发者理解如何在支持HTML5的环境中构建...

Global site tag (gtag.js) - Google Analytics